CSSのみで実行中・処理中のスライダー・スクロールを表示

submitやajax時に処理中や実行中のスライダー表示を行う場合が多くあります。当ページでは、CSSのみで実行中や処理中のスライダー/スクロール表示を行うサンプル（雛形）を作成することができます。
横に流れるスクロール表示や伸び縮、回転などで実行中を表現することが出来ます。

処理に時間が掛かる場合、実行中の表示はユーザにボタンクリック漏れの安心を与えます。処理に時間が掛からない場合も導入した方がユーザに安心感を与えます。

当ページのサンプルはCSSのみで実装していますが、画像を使うとより種類が多く表現できます。
画像を使用する場合は以下をご利用ください。
【フリーアイコン:商用可】処理中（動く）

<!-- 実行するformエリア -->
<form name="myForm" action="xxx.cgi" onsubmit="return runOpen()">
  <input type="submit" value="実行中の動きを確認する">
</form>
 
<!-- 実行中ウインドウのエリア -->
<div id="runArea" class="runNoDisp">
  <div class="runWindow"> <!-- ここがウインドウとなります -->
    <p>実行中<br>しばらくお待ちください</p>
    <div class="bar"></div>
  </div>
</div>

<style type="text/css">
/* === 実行中非表示（初期） ================================ */
.runNoDisp {
  display : none;
}
 
/* === 実行中バックグランド ================================ */
.runBg {
  position   : fixed;
  overflow   : hidden;
  top        : 0;
  right      : 0;
  bottom     : 0;
  left       : 0;
  background : rgba(255, 255, 255, 0.90);
  z-index    : 10;
}
 
/* === 実行中ウインド ====================================== */
.runBg .runWindow {
                               /* 実行中ウインドを中心に表示 */
  position      : absolute;
  top           : 50%;
  left          : 50%;
  transform     : translate(-50%, -50%);
  z-index       : 11;
             /* ↓実行中ウインドウの見た目：変更してください */
  width         : 300px;
  background    : #fff;
  border        : 3px solid #999;
  border-radius : 10px;
  font-size     : 12pt;
  line-height   : 1.2;
  text-align    : center;
}
 
/* === 実行中バーのエリア ================================== */
.runBg .runWindow .bar {
  width         : 80%;
  margin        : 10px auto;
  overflow      : hidden;
  border        : 1px solid rgba(89, 0, 179, 0.90);
}
 
/* === 実行中ウインド：アニメーション ====================== */
.runBg .runWindow .bar::before {
  display       : block;
  content       : "";
  height        : 20px;
  color         : #fff;
  background    : linear-gradient(90deg, #ffffff, rgba(89, 0, 179, 0.90));
  animation     : runOpenAnime 2s linear infinite;
}
@keyframes runOpenAnime {
   0% { transform  :translateX(-100%) }
 100% { transform  :translateX(100%)  }
}
</style>

<script type="text/javascript">
function runOpen(){
  document.getElementById("runArea").className = 'runBg';
 
  // ここにsubumitの実行
  // document.myForm.submit();
 
  // サンプルのため「false」で返す
  return false;
}
</script>