ローディング：nja

loaddingパーツの３ステップ

１．body前にスタイルを直書き


<style type="text/css">
body { position:relative; }
#pageLoader {position:fixed; top:0; left:0; right:0; display: flex; width: 100%; height: 100vh!important; background-color: #fff;z-index:99999; justify-content: center; align-items: center; }
.fadeoutdell { display: none; height: 0; opacity: 0; overflow: hidden; transition: height 350ms ease-in-out; }
</style>

２．body直後にloadingパーツ


<body>
<div id="pageLoader"><div id="pageLoaderimg">loading・・・</div></div>

３．javascriptでloadingパーツをフェードアウトさせながら削除！

フェードアウトさせながら削除する関数　<-汎用化しとく？？？　


//フェードアウトしてloadingを削除する
function stopedloadding(){
  const $loader = document.getElementById('pageLoader');
  if(!$loader) return;
  const fadeEffect = setInterval(function () {
      if (!$loader.style.opacity) {
          $loader.style.opacity = 1;
      }
      if($loader.style.opacity > 0) {
          $loader.style.opacity -= 0.1;
      } else {
        $loader.remove();
        clearInterval(fadeEffect);
      }
  }, 50);
};

一定時間を確保するケース

//load
const loadingstarttime = new Date().getTime();
window.addEventListener("DOMContentLoaded",function(){
  const now = new Date().getTime();
  if(now-loadingstarttime <= 2000) {
    setTimeout(stopedloadding,3000-(now-loadingstarttime));
    return;
  } else {
    stopedloadding();
  }
}, false);
setTimeout(stopedloadding,50000);

読み込みが完了したら即,長くても3秒

//load
window.addEventListener("DOMContentLoaded",function(){
    stopedloadding();
}, false);

setTimeout(stopedloadding,30000);

spinkit:css-only

参考リンク：spinkit

参考リンク：three-dots

//position abusoleteで、中央に配置
//z-index: 999999;
//background-color:rgba(255,255,255,0.5); 背景透過

//現状、design.cssに入れている
//mt-static/css/desing/spinkit.css
//入れずに使用するローディングのみ別に加えるか？


  
//この中に入れる

progress - normal

30%

//html5 progress
  30%

progress - cdd design

30% 30%

//角丸
  progress.rad {
    width: 200px;
    height: 30px;
    border-radius: 15px;
  }

  progress.rad::-webkit-progress-bar {
     border-radius: 15px;
  }

  progress.rad::-webkit-progress-value {
     border-radius: 15px;
  }

  progress.rad::-moz-progress-bar {
     border-radius: 15px;
  }

  progress.rad::-ms-fill {
     border-radius: 15px;
  }

//カラー変更
progress.ovcolor {
  width: 200px;
  height: 30px;
  background-color: orange;
}

progress.ovcolor::-webkit-progress-bar {
  background-color: orange;
}

progress.ovcolor::-webkit-progress-value {
  background-color: violet;
}

progress.ovcolor::-moz-progress-bar {
  background-color: violet;
}

progress.ovcolor::-ms-fill {
  background-color: violet;
}

nanobar

参考リンク：nanobar

JavaScript


var simplebar = new Nanobar();
//simplebar.go(50);

var colorbar = new Nanobar({target: document.getElementById('color')});
//colorbar.go(50);

var centeredbar = new Nanobar({target: document.getElementById('centered')});
//centeredbar.go(30)