20211004

index.pug (HTML部分)

#uploading(class="loaded")
    .spinner
    

index.pug (Scriptタグ部分。クリック時イベントをトリガーとして実行。ここには記述しないが失敗時には再度ローディング画面が消える。)

      
  var spinner = document.getElementById('uploading');
  spinner.classList.remove("loaded");
  

main.css

 /* ローディング画面 */
 #uploading {
     width: 100vw;
     height: 100vh;
     transition: all 1s;
     background-color: #808080;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9999;
     opacity: 0.5;
 }

 .spinner {
     width: 100px;
     height: 100px;
     margin: 200px auto;
     background-color: #fff;
     border-radius: 100%;
     animation: sk-scaleout 1.0s infinite ease-in-out;
 }
 /* ローディングアニメーション */
 @keyframes sk-scaleout {
     0% {
         transform: scale(0);
     }
 
     100% {
         transform: scale(1.0);
         opacity: 0;
     }
 }
 
 .loaded {
     opacity: 0;
     visibility: hidden;
 }