文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > ページ全体のデザイン > CSSのみで実行中

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

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

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

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

いろいろな実行中を試してみよう!

実行中の動き・アニメーション
実行中の動き速度
実行中の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
背景の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度

実行中
しばらくお待ちください

当サンプルはクリックで戻ります

使用したhtml
<!-- 実行する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>
生成したCSS
<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>
生成したJavaScript
<script type="text/javascript">
function runOpen(){
  document.getElementById("runArea").className = 'runBg';
 
  // ここにsubumitの実行
  // document.myForm.submit();
 
  // サンプルのため「false」で返す
  return false;
}
</script>
ページTOP
広告
広告

注意事項

色々なアニメーションやトランジションを組み合わせることで、実行中・処理中の見せ方(スライダーの動き)を変更することができます。
詳細は以下をご確認ください
animation 「アニメーション」
transform 「変形」

広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン