視線を釘付けにする。CSSテキストアニメーション「ローディング・フィル（塗りつぶし）」5選

2026年3月9日

当ページのリンクには広告が含まれています。

視線を釘付けにする。CSSテキストアニメーション「ローディング・フィル（塗りつぶし）」5選

文字がインジケーターのように、ゆっくりと色づいていく。「ローディング・フィル（塗りつぶし）」アニメーションは、ユーザーに「次は何が起こるのか」という期待感を抱かせ、視線を釘付けにする強力なエフェクトです。

この記事では、透けた文字が黒く塗りつぶされていくCSSコードを5つ紹介します。複雑なプログラミングは不要。SWELLにコピペするだけで、表示中もパーセンテージが変動するように動き、マウスホバーで100%まで一気に満たされる、インタラクティブな表現を実装できます。

Horizontal Progress（ホリゾンタル・プログレス）

プログレスバー（進行状況バー）のように、左から右へテキストが黒く塗りつぶされていきます。待機中は読み込み中のように20%〜70%を行き来し、ホバーすると瞬時に100%まで完了します。

.fill-horizontal { position: relative; font-size: 4rem; font-weight: 900; color: #e0e0e0; /* 塗りつぶされる前の薄いグレー */ display: inline-block; cursor: pointer; } /* 塗りつぶすための黒いレイヤー */ .fill-horizontal::before { content: attr(data-text); position: absolute; top: 0; left: 0; color: #111; /* 塗りつぶし後の黒 */ overflow: hidden; white-space: nowrap; /* 待機アニメーション：左から右へ満ち引きする */ animation: loadingHorizontal 3s ease-in-out infinite alternate; transition: clip-path 0.3s ease-out; } /* ホバー時の挙動：100%まで一気に塗りつぶす */ .fill-horizontal:hover::before { animation: none; clip-path: inset(0 0 0 0); /* 全て表示 */ } @keyframes loadingHorizontal { 0% { clip-path: inset(0 80% 0 0); } /* 右側80%を隠す（20%表示） */ 100% { clip-path: inset(0 30% 0 0); } /* 右側30%を隠す（70%表示） */ }

調整方法

ベースの色: color: #e0e0e0; を変更すると、塗りつぶされる前の文字色を変えられます。アウトラインだけにしたい場合は -webkit-text-stroke: 1px #ccc; color: transparent; に変更してください。
待機中の進行度: @keyframes の inset の数値を変更することで、どのくらいまで塗りつぶすかを調整できます。

Vertical Rise（バーティカル・ライズ）

コップに水が注がれるように、下から上へと黒い塗りがせり上がってきます。待機中は水位が上下に揺らぎ、ホバーすると溢れるように100%まで満たされ、文字が少し浮き上がります。

See the Pen Vertical Rise by BaseKENT (@basekent) on CodePen.

調整方法

枠線の太さ: -webkit-text-stroke: 1.5px の数値を大きくすると、ベースの文字枠が太くなります。
ホバー時の浮き上がり: .fill-vertical:hover の translateY(-5px) を 0 にすれば、位置を固定したまま塗りつぶせます。

Center Expand（センター・エクスパンド）

文字の中央から左右に向かって、インクが染み込むように黒く塗りつぶされていきます。待機中は中央部分で呼吸するように伸縮し、ホバーで左右の端まで一気に広がります。

See the Pen Center Expand by BaseKENT (@basekent) on CodePen.

調整方法

伸縮のリズム: cubic-bezier(0.4, 0, 0.2, 1) を ease-in-out に変更すると、よりゆったりとした均等なリズムで伸縮します。

Diagonal Wipe（ダイアゴナル・ワイプ）

斜めのライン（約45度）でテキストが切り取られ、スタイリッシュに塗りつぶされていきます。このコードはグラデーションを使って実装しており、ホバーすると斜めの境界線がスッと通り抜けて黒文字が完成します。

.fill-diagonal { font-size: 4rem; font-weight: 900; display: inline-block; cursor: pointer; /* 斜めグラデーション（透明と黒の境界） */ background: linear-gradient( 135deg, #111 50%, #e0e0e0 50% ); background-size: 300% 100%; color: transparent; -webkit-background-clip: text; background-clip: text; /* 待機アニメーション：斜め線が行ったり来たりする */ animation: wipeDiagonal 4s ease-in-out infinite alternate; transition: background-position 0.4s ease-out, transform 0.3s ease; } /* ホバー時の挙動：斜めに完全に塗りつぶす */ .fill-diagonal:hover { animation: none; background-position: 100% 0; /* 黒の領域（左側）を表示 */ transform: skewX(-5deg); /* 少し斜体にして躍動感を出す */ } @keyframes wipeDiagonal { 0% { background-position: 0% 0; } /* 薄い領域 */ 100% { background-position: 60% 0; } /* 途中まで黒が入る */ }

調整方法

斜めの角度: 135deg の角度を変更すると、塗りつぶされる境界線の傾きが変わります。
グラデーションのぼかし: #111 50%, #e0e0e0 50% を #111 40%, #e0e0e0 60% のようにパーセンテージをずらすと、境界線がぼやけた柔らかい塗りつぶしになります。

Stepped Loading（ステップ・ローディング）

滑らかな動きではなく「20%… 40%… 60%…」と、階段状にカクカクと進行するデジタルな塗りつぶし表現です。ローディングの文字や、サイバーな世界観と非常に相性が良いです。ホバーするとスムーズに100%になります。

See the Pen Stepped Loading by BaseKENT (@basekent) on CodePen.

調整方法

ステップ数: steps(5) の数値を steps(10) などに増やすと、より細かくカクカク進みます。
ループの仕方: 現在は100%になったら瞬時に0%に戻るループですが、行ったり来たりさせたい場合は infinite の後に alternate を追加してください。