소개

이번 동영상을 투고한 후 등 로드하는 시간이 걸리거나 하고, 기다리는 시간이 있었던 것이 신경이 쓰였으므로 이하와 같은 로딩의 애니메이션의 구현을 했습니다.

환경

Rails 5.2.3
Ruby 2.5.1

구현 방법

여러 가지 방법이 있지만 제 경우에는 다음을 참고하여 CSS로 애니메이션을 만들었습니다.

참고 자료

뷰 파일

우선 application.html.haml 파일에 로딩 애니메이션용의 클래스를 body 아래에 기술합니다.

application.html.haml

%body
 .loader-wrap
   .loader

SCSS 파일

그런 다음 SCSS에 로딩 애니메이션을 위한 레이아웃을 작성합니다.
여러가지 기술하고 있습니다만, 방금 전의 참고 자료안에 있는 사이트의 내용을 거의 copipe 하는 것만으로 실장 할 수 있습니다.
후에는 색이나 크기 등을 변경하거나 자신의 마음에 드는 레이아웃으로하십시오.

사용 사이트:Single Element CSS Spinners

htps // p 여지 cts.ぅ케하아 s. 메/cs-ぉ아데 rs/


loading.scss

.loader-wrap {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}


.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader {
  color: black;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: white;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: white;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

나중에 이번에는 SCSS를 사용하고 있기 때문에 @import에서 application.scss에 SCSS 파일을 읽는 것을 잊지 않도록합니다.

application.scss

@import "loading";

jQuery

나중에 애니메이션 설정을 JS 파일에 작성하기 만하면됩니다.
사용 부분은 "페이지 로드가 완료되면 애니메이션 숨겨진 부분"까지도 문제 없습니다.

loading.js

$(document).on('turbolinks:load', function() {
  $(function(){
    var loader = $('.loader-wrap');

    //ページの読み込みが完了したらアニメーションを非表示
    $(window).on('load',function(){
      loader.fadeOut();
    });

    //ページの読み込みが完了してなくても2秒後にアニメーションを非表示にする
    setTimeout(function(){
      loader.fadeOut();
    },2000);
  });
});

마지막으로

이미지를 사용하는 방법도 있었습니다만, 나는 이번 이쪽으로 구현했습니다.
상당히 간단하게 실장할 수 있으므로 신경이 쓰이는 분은 시험해 주세요.