【CodePen】プログレスバーのアイデア14選

💡 実装のポイント
JS不使用のPure CSS構成。.Loading:after擬似要素のwidthとbackgroundを@keyframes loadで5秒かけて0%→100%に変化させ、同時に@keyframes pulseで背景全体の色も連動して変わる仕組み。色の切り替えタイミングはキーフレームのパーセンテージ値を調整するだけでOK。

💡 実装のポイント
Pug＋Sass＋JSの構成。setIntervalで#progressのwidthをランダムな量ずつ増加させ、99%に達すると.completeクラスを付与→CSSのtransform: rotate(-180deg)でバー全体を回転させて0%に戻す「終わらないローディング」を演出。ネタ的な用途だが、ランダムな待ち時間の作り方は参考になる。

💡 実装のポイント
requestAnimationFrameで.progress-barのwidthをランダムな増分で0→100%まで進め、100%到達時に.doneクラスを付与。CSS側のtransitionで高さが2pxから100%に一気に「展開」する仕掛けになっている。数値のカウントアップ表示も同じJSロジックで実装。

💡 実装のポイント
.crossesや.dotsなど柄ごとのクラス名にdata URI形式のSVGパターンをbackground-imageとして指定した20種類のコレクション。hoverでmouseoverイベントが発火し、JSがランダムな幅とtransition-durationを設定してバーを伸ばす。1パターンだけ使う場合は該当するSVGパターンのdata URIごとコピーすればよい。

💡 実装のポイント
.aqua・.neon・.candyなど見た目違いのクラス10種＋共通の.progress-bar構成。jQueryのMutationObserverでstyle属性の変化を監視しdata-width属性に反映する仕組みがユニークだが、単体利用なら.progress-barのwidthを直接指定するだけでシンプルに使える。

💡 実装のポイント
SCSS＋JSの構成。#fillのwidthを@keyframes growで0→100%に伸ばし、:before擬似要素に泡アニメーションgifをmix-blend-mode: overlayで重ねて質感を出している。パーセンテージ表示はsetIntervalでテキストを1ずつインクリメントするだけのシンプルな仕組み。

💡 実装のポイント
Canvas＋SimplexNoiseライブラリを使った実装。バーの先端からパーティクルを生成し、ノイズ関数で揺らめかせながらフェードアウトさせている。stops配列で進捗の一時停止ポイントを制御。CSSベースの他の実装と違い、Canvas全体のロジックとノイズライブラリの移植が必要なため導入コストは高め。

💡 実装のポイント
JS不使用のPure CSS構成。@property --numでカスタムプロパティをアニメーション可能な数値として登録し、counter()関数でパーセンテージ数字をカウントアップ表示している。contentプロパティを@keyframesで書き換えてターミナルのログ風テキストも演出。@propertyはSafari 16.4未満では非対応なので、対応状況を確認してから採用したい。

💡 実装のポイント
Slim＋Sass＋CoffeeScriptの構成（Bourbon依存）。CoffeeScript側で.percentageのwidthを0.2%ずつ増やし続け、:before/:after擬似要素でホバー・アクティブ時に現在の%をツールチップ表示する仕組み。移植時はBourbonのmixin部分を通常のCSSに置き換える必要がある。

💡 実装のポイント
JS不使用のPure CSS(SCSS)構成。.bgと.elをmix-blend-mode: differenceで重ねることで、背景色が変化しても数字が常に読みやすい色に自動反転する仕組みが特徴。パーセンテージ表示はSCSSの@forループで1〜100までのcontentをキーフレームに書き出す力技で実現している。

💡 実装のポイント
8枚の花びら状要素をtransform: rotate()で放射状に配置し、.containerごと回転させながら各花びらをanimation-delayで少しずつずらして発光させるスピナー構成。下部の.bar＋.progressがシンプルな進捗バーを兼ねており、left値のキーフレームで進み具合を表現している。

💡 実装のポイント
Compassベースの疑似3Dバー。.wrapper全体をtransform: rotate(-90deg) scale(0.85)させることで円柱風の見た目を作り、.innerのwidthを@keyframes loaderで0→100%にアニメーションさせている。複数のbox-shadowを重ねて金属的な質感を表現している点が参考になる。

💡 実装のポイント
外部ライブラリ「circular-progress-bar」（CDN経由）を使ったSVG円形プログレスバーのショーケース。data-pie属性にJSONでパーセンテージや色、線の太さなどのオプションを渡すだけで多彩なバリエーションを生成できる設計。IntersectionObserverでビューポート内に入った時だけアニメーションを開始する配慮もされている。

💡 実装のポイント
Stylusのprogress-bubble($color, $amount)というmixinに色と進捗量を渡すだけで円形バブル型バーを生成できる設計。内部の.water要素を@keyframes spinで回転させ続けることで水面が揺れているような演出を実現。進捗値に応じて.greenなどのクラスを切り替えて色を変える運用を想定している。