Pulse Ring Loader
グラデーションと波紋のように広がるリングアニメーションを持つローディングスピナーです。
波紋のように広がるリングが美しい、パルスエフェクトを用いたローダーコンポーネントです。
プレビュー
ユースケースと特徴
この「Pulse Ring Loader」は、以下のような場面で特に威力を発揮します。
-
ファイルアップロード・ダウンロード中：データの送受信が行われている「鼓動」を視覚的に表現したい場合に最適です。
-
データ分析・AI生成などの長時間処理：単純な回転アニメーションとは異なり、波紋が広がるリッチな表現により、ユーザーの待機中のストレスを軽減します。
-
ヒーローセクションの中央：単一の要素として存在感があるため、コンテンツを読み込んでいる最中のプレースホルダーとしても美しく機能します。
デザインとUXのポイント
-
グラデーションとシャドウの相乗効果：中心のコア部分に鮮やかなグラデーション（インディゴ〜パープル〜ピンク）を用い、さらに同系色の発光（ドロップシャドウ）を付与することで、モダンでプレミアムな印象を与えます。
-
非線形なアニメーション（cubic-bezier）：リングが広がる速度に
cubic-bezierを使用し、最初は勢いよく広がり、徐々に消えていく自然な波紋を表現しています。 -
ディレイによる多重波紋：複数のリングに時間差（
animation-delay）を設けることで、常に動きが続く連続性を作り出しています。
カスタマイズ方法
-
色の変更：`.pulse-core` の `background: linear-gradient(…)` や `.pulse-ring` の
border-colorを変更することで、テーマカラーに合わせることができます。 -
波紋の大きさと速度：`@keyframes ring-pulse` の `transform: scale(3.5)` の数値を大きくすれば波紋がさらに広がり、
animationの `2.5s` を変更すれば速度を調整できます。 -
コアの脈打ち具合：`@keyframes core-pulse` の `transform: scale(1.2)` を変えることで、中心部分の鼓動の激しさを変更できます。
実装コード
<div class="pulse-loader-container">
<div class="pulse-ring"></div>
<div class="pulse-ring delay-1"></div>
<div class="pulse-ring delay-2"></div>
<div class="pulse-core"></div>
</div>
<style>
/* ローダー全体のコンテナ配置 */
.pulse-loader-container {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
/* 中心のコア部分 */
.pulse-core {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
border-radius: 50%;
position: absolute;
z-index: 10;
box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
animation: core-pulse 2s infinite ease-in-out;
}
/* 波紋となるリング部分 */
.pulse-ring {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid rgba(168, 85, 247, 0.8);
box-sizing: border-box;
animation: ring-pulse 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
}
/* 波紋のディレイ（時間差） */
.delay-1 {
animation-delay: 0.8s;
}
.delay-2 {
animation-delay: 1.6s;
}
/* コアの脈打ちアニメーション */
@keyframes core-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}
50% {
transform: scale(1.2);
/* 拡大時にシャドウも強くして発光感をアップ */
box-shadow: 0 0 25px rgba(168, 85, 247, 0.8), 0 0 40px rgba(236, 72, 153, 0.4);
}
}
/* 波紋が広がるアニメーション */
@keyframes ring-pulse {
0% {
transform: scale(1);
opacity: 1;
border-width: 2px;
border-color: rgba(99, 102, 241, 1);
}
50% {
border-color: rgba(168, 85, 247, 0.5);
border-width: 1px;
}
100% {
transform: scale(3.5);
opacity: 0;
border-width: 0px;
border-color: rgba(236, 72, 153, 0);
}
}
</style>ブラウザ対応状況
| ブラウザ | 対応状況 | 備考 |
| --- | --- | --- |
| Chrome | ✅ 対応 | |
| Safari | ✅ 対応 | |
| Firefox | ✅ 対応 | |
| Edge | ✅ 対応 | |