소개

이번은, 폼등으로 송신했을 때에, 송신중에 화면상에 로딩 화면을 표시시키는 실장을 실시합니다.

완성 이미지

환경

MacOS 10.15.7
루비 2.6.5
Ruby on Rails 6.0.0
jquery 3.4.1

전제 조건

jQuery가 도입되었습니다.

font-awesome이 도입된 것.

일하자.

①jquery-loading-overlay 도입

이번에는 jquery-loading-overlay라는 jQuery 플러그인을 사용하여 로딩 화면을 구현합니다.

jquery-loading-overlay를 사용하는 경우에는 npm으로 설치하는 방법이나 CDN을 사용하여 도입하는 방법이 있지만 이번에는 CDN을 사용한 방법으로 도입해 나갈 것입니다.

application.html.erb에

application.html.erb

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/loadingoverlay.min.js"></script>

여기를 추가합니다.

이제 준비가 되었습니다.

②js 파일에 처리를 기술

js 파일이 어느 시점에서 로딩 화면을 표시할지 설명합니다.

이번에는 new.html.erb내의 「투고하는 버튼」을 눌렀을 때에 로딩 화면을 표시하게 합니다.

일단 소개합니다만, 투고하는 버튼은 이하와 같습니다.

new.html.erb

<input type='submit' id='sending' class='send__btn' value='投稿する'>

다음 js 파일입니다. js 파일은 ``loading.js'' 파일을 작성하고 거기에 작성합니다.

loading.js

$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show");
  });
});

이상입니다.
이제 실제로 게시하는 버튼을 누르면

같은 느낌이 듭니다.

③옵션 지정

jquery-loading-overlay에서는 옵션을 사용하여 로딩 화면을 사용자 정의할 수 있습니다.

③-1 텍스트 삽입

예를 들어 텍스트 문장을 추가하려면

loading.js

$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show", {
      text :"Sending..."
    });
  });
});

이렇게 기술함으로써,

이렇게 텍스트 문장을 넣는 것도 가능합니다.

③-2 font-awesome 사용

그리고 다음과 같이 font-awesome을 사용하여 아이콘을 변경할 수도 있습니다.

덧붙여서, font-awesome의 아이콘을 회전시키는 경우에는, 클래스명의 뒤에 fa-spin 라고 기술하는 것으로,
아이콘을 회전할 수 있습니다.

loading.js

$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show", {
      image       : "",
      fontawesome : "fa fa-cog fa-spin"
    });
  });
});

실행하면 다음과 같습니다.

③-3 상태바 표시

다음과 같은 설정을 하면, 로드의 진행 상황을 가시화할 수 있게 됩니다.

loading.js

$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show", {
      image       : "",
      progress    : true
    });
    let count     = 0;
    let interval  = setInterval(function(){
      if (count >= 100) {
        clearInterval(interval);
        return;
      }
      count += 10;
      $.LoadingOverlay("progress", count);
    });
  });
});

수행한 결과는 다음과 같습니다.

③-4 커스터마이징

자신이 좋아하는 화면으로 하고 싶은 경우에는 CSS를 지정해 작성하는 것도 가능합니다.
다음과 같이 작성하여 사용자 정의할 수 있습니다.

loading.js

$(function() {
  $("form").on('submit', function(){
    var customElement = $("<div>", {
      "css"   : {
        "border"        : "2px solid blue",
        "font-size"     : "30px",
        "color"         : "#ffffff",
        "text-align"    : "center",
        "padding"       : "5px",
      },
      "class" : "your-custom-class",
      "text"  : "送信中...",
    });
    $.LoadingOverlay("show", {
      image       : "",
      fontawesome : "fas fa-sync fa-spin",
      background  : "rgba(0, 0, 0, 0.5)",
      custom      : customElement,
    });
  });
});

실행 결과는 다음과 같습니다.

③-5 특정 요소에만 오버레이를 적용

클래스 또는 id를 지정하여 특정 요소에만 오버레이를 적용할 수도 있습니다.
이번에는 「투고하는 버튼」에만 오버레이를 걸겠습니다. 투고하는 버튼에는 `id='sending' 으로 설정하고 있으므로, 그곳에서 지정합니다.

아래 코드입니다.

loading.js

$(function() {
  $("#sending").click(function(){
    $("#sending").LoadingOverlay("show");
  });
});

실행 결과는 다음과 같습니다.

참고 참조

이것들은 모두 jquery-loading-overlay의 레퍼런스에 기술하고 있으므로, 그쪽을 참고에 여러가지 시험해 주시면 좋겠습니다.

참조 : htps : //가 s 빠레 s 암이. 코 m/ぁbs/j쿠에 ry-ぉ아아 g-오ゔぇrぁy/