バーローダー（Bar Loader）はどんな効果ですか？

進捗不定（indeterminate）のバーが左右に流れるローダー。読み込み中・処理中の汎用インジケーターに。CSSのみ。データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く演出です。

Bar LoaderはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Bar Loader — CSS Effect with AI Prompt

CODE

HTML

<div class="demo-stage bl-stage"><div class="bl-track"><div class="bl-bar"></div></div></div>

CSS

.bl-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.bl-track { position:relative; width:min(320px,80%); height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
.bl-bar { position:absolute; left:0; top:0; height:100%; width:40%; border-radius:3px; background:linear-gradient(90deg,#e91b89,#7b37a8); animation:bl 1.4s ease-in-out infinite; }
@keyframes bl { 0% { left:-40%; } 100% { left:100%; } }

AI PROMPT

Claude Cursor v0

PROMPT

進捗不定（indeterminate）のバーが流れるローダーをCSSだけで作って。トラックは overflow:hidden、中のバーは width:40% で position:absolute。@keyframesで left:-40% → left:100% を 1.4s ease-in-out infinite。バーが左外から右外へ繰り返し流れる。読み込み中・処理中の汎用インジケーターに。

バーローダー（Bar Loader）とは

進捗不定（indeterminate）のバーが左右に流れるローダー。読み込み中・処理中の汎用インジケーターに。CSSのみ。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。