10種類のバーローディングアニメーション

Webサイトでよく見る、データ読み込み中に表示される横長のバーって、どうやって作るんですか?

それはプログレスバー（進行状況バー）と呼ばれるUIパーツだね。ローディング中の待ち時間を視覚化して、ユーザーに「処理が進んでいる」ことを伝える重要な役割があるんだ。

確かに、何も表示されないと「固まってるのかな？」って不安になりますよね。バーがあると安心できます！

その通り。ユーザー体験において、待ち時間の可視化はとても重要なんだ。今回は、様々な色や形、アニメーションを持つプログレスバーを10種類作成しながら、AIへの効果的な指示方法を学んでいこう。

AIに指示する際のプロンプトのコツ

プログレスバーを作るとき、AIにどんな風に指示すればいいんですか？

いい質問だね。プログレスバーはボタンと違って、「外枠」と「進行バー」の2つの要素を説明する必要があるんだ。それぞれの役割を分けて伝えることがポイントだよ。

効果的なプロンプトの構造

プログレスバーを正確に生成してもらうには、3段階の構造化された指示が効果的です。

プロンプトの基本構造

1. 全体の印象とデザインスタイルを宣言
2. 初期状態（外枠と背景）の説明
3. アニメーション（進行バー）の説明

外枠と進行バーを分けて説明するんですね。

その通り。まず「器」を説明してから、中で動く「バー」の動きを説明すると、AIが理解しやすいんだ。実際の例を見てみよう。

良いプロンプト例

シンプルでミニマルなプログレスバーを作成してください。

## 初期状態
- グレーの枠線で囲まれた白い背景
- 内側にグレーのグラデーションバー

## アニメーション
- バーが左から右へ滑らかに伸びる
- 0%から100%まで進行

確かに、これなら何をどう作ればいいか分かりやすいですね！

そうだね。特にアニメーションの動きは、「どこから」「どこへ」「どんな風に」を明確にすることが大事なんだ。

各段階で伝えるべき内容

1. 全体の印象とスタイル（最初に宣言）

デザインの方向性 「シンプル」「モダン」「ゲーム風」「立体的」
視覚的印象 「ミニマル」「鮮やか」「柔らかい」「ダイナミック」

2. 初期状態の視覚的説明

外枠（コンテナ）:

背景の色 「白い背景」「薄いグレーの背景」「透明な背景」
枠線の有無と種類 「枠線なし」「グレーの枠線」「太めの枠線」
形状「角丸」「四角いまま」「傾けた平行四辺形」
影の有無 「影なし」「控えめな影」「立体的な影」

内側のバー:

色と質感 「グレーのグラデーション」「鮮やかな緑」「オレンジ色」
初期の位置 「左端に配置」「画面外の左側に配置」

3. アニメーションの説明

動きの方向 「左から右へ」「右から左へ」
動きの種類 「滑らかに伸びる」「段階的に進む」「スライドして表示」
速度と変化 「滑らかに」「一定速度で」「カクカクと」
特殊な効果 「色が変化しながら」「グラデーションが見える」

こうやって分けて考えると、プロンプトが書きやすくなりますね！

そうだね。特にアニメーションは「widthを変える」のか「位置を移動させる」のかで見た目が大きく変わるから、そこも意識して伝えるといいよ。それじゃあ、実際に10種類のバーを作りながら学んでいこう！

10種類のローディングバー

今回は、様々な色や形、アニメーションを持つプログレスバーを10種類作成しました。シンプルなデザインから徐々に複雑な表現へと進んでいくことで、バーデザインの基礎から応用まで段階的に学べます。

共通処理ーと用語

用語の定義

外枠（コンテナ） 進行バーを囲む枠・背景。幅や角丸、枠線、影など全体の器を表します
内側（進行バー） 進捗を表す塗り部分。幅や位置、変形のアニメーションで進行を表現します
区切り/ライン ボックス式の縦線など、進捗の段階を視覚的に示す補助要素

アニメーションの演出

このレッスンの多くのバーで以下の共通のアニメーションとなっています。
グラデーション系などはwidthではなくtransform: scaleX / translateXを使用。時間配分の考え方は同じ。

70%で完了到達 アニメーションの70%の時点で見た目は100%に到達させます
残り30%は完了状態を維持 ユーザーに「完了した」安心感を早めに与えます

実運用では進捗同期や速度調整で体感時間を最適化してください

共通の時間配分（例）

@keyframes progressBase {
    0% { width: 0%; }
    70% { width: 100%; }
    100% { width: 100%; }
}

1. 基本のシンプルバー

シンプルでミニマルなプログレスバーです。グレーの配色で落ち着いた印象を与えます。

HTML

<div class="progress-container">
    <div class="progress-bar"></div>
</div>

CSS

.progress-container {
    width: 50%;
    height: 20px;
    background: #ffffff;
    border: 2px solid #4b5563;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6b7280, #4b5563);
    animation: progress 10s ease-in-out infinite;
}

@keyframes progress {
    0% {
        width: 0%;
    }
    70% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

シンプルでミニマルなプログレスバーを作成してください。

## 初期状態
- グレーの枠線で囲まれた白い背景
- 内側にグレーのグラデーションバー

## アニメーション
- バーが左から右へ滑らかに伸びる
- 0%から100%まで進行

このバーの特徴

シンプルな構造 外枠と進行バーの2層構造で理解しやすい
フラットデザイン 影を付けず、モダンでシンプルな見た目
グレー配色 落ち着いた色合いでどんなデザインにも合う
滑らかな動き ease-in-outで自然な加速・減速

コードのポイント

バーの進行アニメーション:

CSS

.progress-bar {
    width: 0; /* 初期状態は幅0% */
    animation: progress 10s ease-in-out infinite;
}

/* ほぼすべてのアニメーションに共通 */
@keyframes progress {
    0% { width: 0%; }      /* 開始時 */
    70% { width: 100%; }   /* 70%時点で完了 */
    100% { width: 100%; }  /* 完了状態を維持 */
}

width: 0からwidth: 100%へアニメーション
ease-in-outで開始と終了が滑らか
70%の時点で100%に到達し、残り30%は完了状態を表示

2. 角丸バー

角を丸めた柔らかい印象のバーです。モダンで優しい見た目に仕上がります。

HTML

<div class="progress-container-rounded">
    <div class="progress-bar-rounded"></div>
</div>

CSS

.progress-container-rounded {
    width: 50%;
    height: 20px;
    background: #ffffff;
    border: 2px solid #4b5563;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-rounded {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6b7280, #4b5563);
    border-radius: 10px;
    animation: progress-rounded 10s ease-in-out infinite;
}

@keyframes progress-rounded {
    0% {
        width: 0%;
    }
    70% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

角丸で優しい印象のプログレスバーを作成してください。

## 初期状態
- グレーの枠線で囲まれた白い背景
- 角を丸めた柔らかいデザイン

## アニメーション
- 内側のグレーバーが左から右へ滑らかに伸びる
- バーも角丸に合わせた形状

このバーの特徴

角丸デザイン 柔らかく優しい印象を与える
モダンな見た目 現代的なUIデザインに最適
視覚的な統一感 外枠とバーの両方が角丸で調和

コードのポイント

角丸の統一:

CSS

.progress-container-rounded {
    border-radius: 10px; /* 外枠を角丸に */
    overflow: hidden; /* はみ出しを隠す */
}

.progress-bar-rounded {
    border-radius: 10px; /* バーも同じ角丸に */
}

外枠とバーに同じborder-radiusを指定して統一感を出す
overflow: hiddenではみ出した部分を隠す

3. 両端を傾けたバー

transform: skewXで傾けた、ダイナミックな印象のバーです。スピード感を演出します。

HTML

<div class="progress-container-skew">
    <div class="progress-bar-skew"></div>
</div>

CSS

.progress-container-skew {
    width: 50%;
    height: 20px;
    background: #f3f4f6;
    border: 2px solid #6b7280;
    transform: skewX(-15deg);
    overflow: hidden;
}

.progress-bar-skew {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6b7280, #4b5563);
    animation: progress-skew 10s ease-in-out infinite;
}

@keyframes progress-skew {
    0% {
        width: 0%;
    }
    70% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

斜めに傾いたダイナミックなプログレスバーを作成してください。

## 初期状態
- 斜めに傾いた平行四辺形の形状
- グレーの枠線と薄いグレーの背景

## アニメーション
- 内側にグレーのグラデーションバーが左から右へ進行

このバーの特徴

ダイナミックな形状 skewXで傾けてスピード感を演出
個性的なデザイン 通常の四角形とは違う印象
視覚的なインパクト 斜めの形状が目を引く

コードのポイント

transform: skewXの使用:

CSS

.progress-container-skew {
    transform: skewX(-15deg); /* 左に15度傾ける */
}

skewX(-15deg)でコンテナ全体を傾ける
マイナス値で左方向に傾く
中のバーも連動して傾いた形状になる

4. 影付きバー

控えめな影を追加したバーです。立体感を出して、より視覚的にわかりやすくします。

HTML

<div class="progress-container-stripe">
    <div class="progress-bar-stripe"></div>
</div>

CSS

.progress-container-stripe {
    width: 50%;
    height: 20px;
    background: #f9fafb;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(75, 85, 99, 0.1);
}

.progress-bar-stripe {
    height: 100%;
    width: 0;
    background: #4b5563;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(75, 85, 99, 0.4);
    animation: stripe-progress 10s ease-in-out infinite;
}

@keyframes stripe-progress {
    0% {
        width: 0%;
    }
    70% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

立体感のある影付きプログレスバーを作成してください。

## 初期状態
- 明るいグレーの背景
- 角丸のデザイン

## アニメーション
- 濃いグレーのバーが左から右へ進行
- バーに控えめな影を付けて立体感を出す

このバーの特徴

立体的な影 box-shadowで奥行きを表現
控えめなデザイン 派手すぎず、上品な印象
視認性の向上 影により進行状況が明確に

コードのポイント

box-shadowによる立体感:

CSS

.progress-bar-stripe {
    box-shadow: 4px 4px 8px rgba(75, 85, 99, 0.4);
    /* 右に4px 下に4px ぼかし8px 透明度40% */
}

box-shadowでバーに影を追加
右下方向に影を配置して立体感を演出
rgba()で透明度を指定し、自然な影を表現

5. 枠線で囲まれたバー

太めの枠線とパディングで、内側にバーが進行するデザインです。

HTML

<div class="progress-container-multi">
    <div class="progress-bar-multi"></div>
</div>

CSS

.progress-container-multi {
    width: 50%;
    height: 20px;
    background: transparent;
    border: 2px solid #4b5563;
    border-radius: 5px;
    overflow: hidden;
    padding: 2px;
}

.progress-bar-multi {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6b7280, #4b5563);
    border-radius: 3px;
    animation: multi-progress 10s ease-in-out infinite;
}

@keyframes multi-progress {
    0% {
        width: 0%;
    }
    70% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

枠線で囲まれた二重構造のプログレスバーを作成してください。

## 初期状態
- 太めの濃いグレーの枠線
- 背景は透明
- 枠線の内側にパディング（余白）

## アニメーション
- グレーのグラデーションバーが内側の空間を埋めていく
- 枠線との間に少し隙間がある

このバーの特徴

二重構造 枠線と内側のバーで2層のデザイン
明確な境界 太い枠線で視認性が高い
パディングの活用 枠線とバーの間に余白を作る

コードのポイント

paddingによる内側の余白:

CSS

.progress-container-multi {
    border: 2px solid #4b5563; /* 太めの枠線 */
    padding: 2px; /* 内側に余白 */
}

.progress-bar-multi {
    border-radius: 3px; /* バーの角も少し丸める */
}

paddingで枠線とバーの間に隙間を作る
バーのborder-radiusを小さくして外枠に合わせる

6. グラデーションバー

鮮やかなグラデーションで視覚的にインパクトのあるバーです。translateXで位置を変化させます。

HTML

<div class="progress-container-gradient">
    <div class="progress-bar-gradient"></div>
</div>

CSS

.progress-container-gradient {
    width: 50%;
    height: 20px;
    background: #f0fdf4;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-gradient {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
    transform: translateX(-100%);
    animation: progress-gradient 10s ease-in-out infinite;
}

@keyframes progress-gradient {
    0% {
        transform: translateX(-100%);
    }
    70% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(0%);
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

鮮やかな緑系グラデーションのプログレスバーを作成してください。

## 初期状態
- 薄い緑色の背景
- バーは画面外の左側に配置

## アニメーション
- 鮮やかな緑から青へのグラデーションバーが左から右へスライド表示
- グラデーションがそのまま見えるように、位置を移動させて表示

このバーの特徴

鮮やかなグラデーション 緑→ティール→シアンの美しい色の変化
translateXアニメーション widthではなく位置を変化させる
グラデーションの保持 色の変化がそのまま見える
視覚的インパクト 華やかで目を引くデザイン

コードのポイント

translateXによる位置移動:

CSS

.progress-bar-gradient {
    width: 100%; /* 常に100%の幅 */
    transform: translateX(-100%); /* 初期位置は左側の画面外 */
}

@keyframes progress-gradient {
    0% { transform: translateX(-100%); } /* 左の画面外から */
    70% { transform: translateX(0%); }   /* 元の位置へ */
}

widthを変えるのではなく、translateXで位置を移動
これによりグラデーションが圧縮されずに表示される
overflow: hiddenで画面外の部分を隠す

7. ニューモフィズム風バー

凹凸を影で表現した、立体的なニューモフィズムデザインのバーです。

HTML

<div class="progress-container-pulse">
    <div class="progress-bar-pulse"></div>
</div>

CSS

.progress-container-pulse {
    width: 50%;
    height: 20px;
    background: #e5e7eb;
    border-radius: 10px;
    box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.6),
                -8px -8px 16px rgba(255, 255, 255, 0.8);
}

.progress-bar-pulse {
    height: 100%;
    width: 0;
    background: #e5e7eb;
    border-radius: 10px;
    box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.4),
                inset -4px -4px 8px rgba(255, 255, 255, 0.5);
    animation: pulse-progress 10s ease-in-out infinite;
}

@keyframes pulse-progress {
    0% {
        width: 0%;
    }
    70% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ニューモフィズム風の凹凸を表現したプログレスバーを作成してください。

## 初期状態
- 灰色の背景に埋め込まれたような凹んだ外枠
- 外側に明るい影と暗い影を配置して立体感を出す

## アニメーション
- 内側から凹んだ部分が埋まっていく
- バーにも内側に影を付けて凹凸を表現

このバーの特徴

ニューモフィズムデザイン 凹凸を影だけで表現する洗練されたスタイル
立体的な質感 複数の影で深みのある表現
モダンな印象 近年人気のUIデザイントレンド

コードのポイント

box-shadowで凹凸を表現:

CSS

.progress-container-pulse {
    /* 外側に2つの影: 暗い影(右下) と 明るい影(左上) */
    box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.6),
                -8px -8px 16px rgba(255, 255, 255, 0.8);
}

.progress-bar-pulse {
    /* 内側に影を配置して凹んだ感じに */
    box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.4),
                inset -4px -4px 8px rgba(255, 255, 255, 0.5);
}

外枠は外側に影を配置して浮き上がった感じに
バーはinsetで内側に影を配置して凹んだ感じに
明暗2つの影を組み合わせて立体感を演出

8. ボックス式プログレスバー

10個のボックスが順番に塗りつぶされていくステップ式のバーです。

HTML

<div class="progress-container-neon">
    <div class="progress-bar-neon"></div>
</div>

CSS

.progress-container-neon {
    width: 50%;
    height: 20px;
    background: #4b5563;
    border-radius: 5px;
    padding: 4px;
    position: relative;
}

.progress-container-neon::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%, transparent 10%,
        #4b5563 10%, #4b5563 calc(10% + 2px),
        transparent calc(10% + 2px), transparent 20%,
        #4b5563 20%, #4b5563 calc(20% + 2px),
        transparent calc(20% + 2px), transparent 30%,
        #4b5563 30%, #4b5563 calc(30% + 2px),
        transparent calc(30% + 2px), transparent 40%,
        #4b5563 40%, #4b5563 calc(40% + 2px),
        transparent calc(40% + 2px), transparent 50%,
        #4b5563 50%, #4b5563 calc(50% + 2px),
        transparent calc(50% + 2px), transparent 60%,
        #4b5563 60%, #4b5563 calc(60% + 2px),
        transparent calc(60% + 2px), transparent 70%,
        #4b5563 70%, #4b5563 calc(70% + 2px),
        transparent calc(70% + 2px), transparent 80%,
        #4b5563 80%, #4b5563 calc(80% + 2px),
        transparent calc(80% + 2px), transparent 90%,
        #4b5563 90%, #4b5563 calc(90% + 2px),
        transparent calc(90% + 2px), transparent 100%
    );
    pointer-events: none;
    z-index: 2;
}

.progress-bar-neon {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 2px;
    animation: neon-progress 10s infinite steps(10);
}

@keyframes neon-progress {
    0% {
        width: 0%;
    }
    90% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

10個のボックスが段階的に塗りつぶされるプログレスバーを作成してください。

## 初期状態
- 濃いグレーの背景
- 10個のボックスに区切られた見た目

## アニメーション
- オレンジ色のバーが左から右へ進行
- ボックスごとに段階的に塗りつぶされていく
- スムーズではなく、カクカクとしたステップ式の動き

このバーの特徴

ステップ式アニメーション steps()で段階的な動き
視覚的な区切り 10個のボックスで進捗が明確
ゲーム風デザイン レトロなゲームのような表現

コードのポイント

steps()とlinear-gradientの組み合わせ:

CSS

.progress-container-neon::before {
    /* linear-gradientで10個の縦線を描画 */
    background: linear-gradient(
        90deg,
        transparent 0%, transparent 10%,
        #4b5563 10%, #4b5563 calc(10% + 2px),
        /* 10%ごとに繰り返し */
    );
    z-index: 2; /* バーの上に重ねる */
}

.progress-bar-neon {
    animation: neon-progress 10s infinite steps(10);
    /* steps(10)で10段階のカクカクした動き */
}

::before疑似要素で10本の縦線を描画
steps(10)で10段階に区切られた動き
z-indexで線をバーの上に重ねる

9. HP回復風のバー

ゲームのHP回復をイメージした、赤から緑へ変化するバーです。

HTML

<div class="progress-container-hp">
    <div class="progress-bar-hp"></div>
</div>

CSS

.progress-container-hp {
    width: 50%;
    height: 20px;
    background: #fca5a5;
    border-radius: 8px;
    border: 2px solid #374151;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.progress-bar-hp {
    height: 100%;
    width: 0;
    background: #a4f9a4;
    animation: hp-recovery 10s ease-in-out infinite;
}

@keyframes hp-recovery {
    0% {
        width: 0%;
    }
    70% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ゲームのHP回復をイメージしたプログレスバーを作成してください。

## 初期状態
- 薄い赤色の背景
- 濃いグレーの枠線で囲む
- 角を少し丸める

## アニメーション
- 緑色のバーが左から右へ進行
- 70%まで進んだら完了状態を維持
- ゲームのHP回復をイメージした動き

このバーの特徴

HP回復演出 ゲームのHP回復をイメージした色変化
薄い赤の背景 ダメージ状態を表現
緑のバー 回復の進行を視覚化

コードのポイント

薄い赤の背景で状態を表現:

CSS

.progress-container-hp {
    background: #fca5a5; /* 薄い赤でダメージ状態 */
    border: 3px solid #374151; /* ゲーム風の枠線 */
}

.progress-bar-hp {
    background: #a4f9a4;
    /* 緑のバー */
}

背景色で「ダメージ状態」を表現
進行バーの緑色で「回復」を視覚化
枠線でゲーム風の UI を演出

10. LOADINGが表示されるバー

緑色のバーが進行し、その上に「LOADING…」テキストが徐々に表示されるバーです。

HTML

<div class="progress-container-text">
    <div class="progress-bar-text"></div>
    <span class="progress-label">LOADING...</span>
</div>

CSS

.progress-container-text {
    width: 50%;
    height: 25px;
    background: #f3f4f6;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-bar-text {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 5px;
    animation: text-progress 10s ease-in-out infinite;
}

.progress-label {
    position: relative;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 2px;
    z-index: 10;
    color: #f3f4f6;
}

@keyframes text-progress {
    0% {
        width: 0%;
    }
    70% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

「LOADING...」テキストが徐々に表示されるプログレスバーを作成してください。

## 初期状態
- 薄いグレーの背景
- 「LOADING...」というテキストを中央に配置
- テキストは文字色は背景と同じ色で見えない状態

## アニメーション
- 緑色のグラデーションバーがテキストの下で左から右へ進行
- テキストがバーの進行に合わせて徐々に見えるようになる
- 70%まで進んだら完了状態を維持

このバーの特徴

テキストオーバーレイ 「LOADING…」がバー上に表示
レイヤー構造 position で要素を重ね合わせ
視認性の確保 太字と文字間隔で読みやすく

コードのポイント

positionとz-indexでレイヤー管理:

CSS

.progress-container-text {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
}

.progress-bar-text {
    position: absolute; /* 背面に配置 */
    left: 0;
    top: 0;
}

.progress-label {
    position: relative;
    z-index: 10; /* 前面に表示 */
    letter-spacing: 2px; /* 文字間隔を広げる */
    color: #f3f4f6; /* 背景と同じ色で初期は見えない */
}

position: relativeでコンテナを基準に
position: absoluteでバーを背面に配置
z-indexでテキストを前面に表示

WEBサイトでの実装方法

これまで作ったバーはデモ用のアニメーションでしたが、実際のWebサイトで「100%まで読み込んだら次のページに移動する」みたいな実装はどうやるんですか？

実際の現場では、JavaScriptを使って読み込み状況と連動させるんだ。主に2つのパターンがあるよ。

パターン1: ページ読み込み時のローディング画面

Webサイトにアクセスした時、コンテンツが完全に読み込まれるまでローディング画面を表示する方法です。

ローディング画面を用意する 画面全体を覆う固定要素（position: fixed）でローディング画面を作成し、プログレスバーと読み込み率を表示
JavaScriptで進捗を管理 変数で進捗率（0〜100%）を管理し、requestAnimationFrameを使って滑らかに更新
プログレスバーの幅を更新 progressBar.style.width = progress + '%' でバーの幅を変更し、視覚的に進捗を表現
100%到達後にフェードアウト classList.add('fade-out') でローディング画面を非表示にし、メインコンテンツを表示
要素を削除 アニメーション完了後、remove() でローディング画面のDOM要素を削除してメモリを解放

重要なコード（JavaScript）

// 進捗率を更新
progressBar.style.width = progress + '%';
percentText.textContent = Math.floor(progress);

// 100%到達後、ローディング画面をフェードアウト
if (progress >= 100) {
    loadingScreen.classList.add('fade-out');
    mainContent.style.display = 'block';
}

なるほど！JavaScriptで進捗を管理して、100%になったらローディング画面を消すんですね。

パターン2: 実際のリソースの読み込み進捗を表示

画像や動画などのリソースがたくさんあるサイトで、実際の読み込み状況を正確に表示する方法です。

読み込むリソースをリスト化 すべての画像、動画、CSSファイルなどのURLを配列で管理
各リソースを順次読み込み new Image() や document.createElement('video') でリソースを読み込み
読み込み完了イベントを監視 onload イベントで読み込み完了を検知し、カウンターを増やす
進捗率を計算 (読み込み完了数 / 全体数) × 100 で正確な進捗率を算出
エラーも進捗に含める onerror イベントでも進捗を進め、ユーザーが待ち続けないようにする

重要なコード（JavaScript）

// 画像の読み込み
const img = new Image();
img.onload = () => {
    loadedCount++;
    const progress = (loadedCount / totalCount) * 100;
    progressBar.style.width = progress + '%';
};
img.src = url;

実際のリソースを監視する方が正確ですね！でも、リソースが多いと読み込みに時間がかかりそう…

その通り。だから実際の現場では、重要な画像だけを先に読み込んで、残りは後から遅延読み込み（Lazy Loading）する方法がよく使われているよ。また、読み込み時間が長くなりすぎる場合は、最初から一部のコンテンツを表示して、徐々に追加していく方法も効果的だね。

実装時の重要なポイント

ユーザー体験の配慮 読み込みが3秒以上かかる場合は、ローディング画面を表示してユーザーに待ち時間を伝える
モバイル対応 スマートフォンでは通信速度が遅い場合があるため、軽量化や段階的な読み込みを検討
エラーハンドリング リソースの読み込みが失敗した場合も、進捗を進めてユーザーが待ち続けないようにする
アクセシビリティ 読み込み状況をテキストでも表示し、スクリーンリーダーユーザーにも伝わるようにする
パフォーマンス 不要なアニメーションや重い処理は避け、読み込み自体が遅くならないように注意

実際の現場では、デザインだけじゃなくて、ユーザー体験やパフォーマンスも考えないといけないんですね！

まさにその通り。見た目の美しさと機能性、そしてユーザー体験のバランスを取ることが、プロのWeb制作では重要なんだ。ローディング画面は「待たせている」という事実を伝えつつ、その待ち時間をできるだけ快適にする役割があるんだよ。

まとめ

プログレスバーって、シンプルに見えて奥が深いですね！色やアニメーションで印象が全然違います。

そうだね。ユーザーに「待っている」ことを伝えるだけでなく、ブランドイメージやサイトの雰囲気に合わせたデザインを選ぶことが重要なんだ。

AIに指示する時も、具体的に「どんな色で」「どんな動きで」って伝えると、思い通りのデザインが作れそうです！

その通り！具体的な指示があれば、AIもより良いデザインを提案してくれるよ。ぜひ今回学んだポイントを活かして、素敵なプログレスバーを作ってみてね。

バーローディングアニメーション活用のポイント

2層構造の理解 外枠（背景）と進行バー（内側）を分けて設計
アニメーションの重要性 滑らかな動きでユーザーに安心感を提供
色のコントラスト 外枠と進行バーの色を明確に区別して視認性を確保
用途に応じた選択 データ量や処理時間に応じて適切なデザインを選ぶ
アクセシビリティ 色だけでなく、数値やテキストでも進行状況を伝える配慮

AIに指示する際のプロンプトのコツ

効果的なプロンプトの構造

プロンプトの基本構造

良いプロンプト例

各段階で伝えるべき内容

1. 全体の印象とスタイル（最初に宣言）

2. 初期状態の視覚的説明

3. アニメーションの説明

10種類のローディングバー

共通処理ーと用語

用語の定義

アニメーションの演出

1. 基本のシンプルバー

AIへのプロンプト例

このバーの特徴

コードのポイント

バーの進行アニメーション:

2. 角丸バー

AIへのプロンプト例

このバーの特徴

コードのポイント

角丸の統一:

3. 両端を傾けたバー

AIへのプロンプト例

このバーの特徴

コードのポイント

transform: skewXの使用:

4. 影付きバー

AIへのプロンプト例

このバーの特徴

コードのポイント

box-shadowによる立体感:

5. 枠線で囲まれたバー

AIへのプロンプト例

このバーの特徴

コードのポイント

paddingによる内側の余白:

6. グラデーションバー

AIへのプロンプト例

このバーの特徴

コードのポイント

translateXによる位置移動:

7. ニューモフィズム風バー

AIへのプロンプト例

このバーの特徴

コードのポイント

box-shadowで凹凸を表現:

8. ボックス式プログレスバー

AIへのプロンプト例

このバーの特徴

コードのポイント

steps()とlinear-gradientの組み合わせ:

9. HP回復風のバー

AIへのプロンプト例

このバーの特徴

コードのポイント

薄い赤の背景で状態を表現:

10. LOADINGが表示されるバー

AIへのプロンプト例

このバーの特徴

コードのポイント

positionとz-indexでレイヤー管理:

WEBサイトでの実装方法

パターン1: ページ読み込み時のローディング画面

パターン2: 実際のリソースの読み込み進捗を表示

実装時の重要なポイント

まとめ

学習チェック