S-013 Loading simple

Ripple Loader リップルローダー

Expanding fading concentric rings producing an organic sonar ripple. 波紋のように外側へ広がり消える3重リングのローダー。

loading ripple rings pulse expanding css-animation

ライブデモ Live Demo

Loading

読み込み中... Loading...

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Three concentric circular rings expanding and fading outwards in a rhythmic pulse.

3層の同心円リングがリズミカルに外側へ拡散しながらフェードするリップルアニメーション。

どこで使うかWhere to use

Used inside loading screens, cards, modals, or centered async wrappers.

ローディング画面、カードコンポーネント、モーダル、または非同期データ待機エリアで使用します。

特徴Key features

Pure CSS keyframes, scoped custom properties, accessibility support with role="status", prefers-reduced-motion fallbacks, and pause/resume states.

CSSアニメーションのみで構成、スコープ付きカスタムプロパティ、role="status"によるアクセシビリティ対応、prefers-reduced-motion時の静的表示、一時停止対応。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
duration1.4sAnimation cycle duration
size64pxWidth and height of the loader container
color#818cf8Primary accent color of the loader

実装コード Implementation Code 

<div class="s013-loader" role="status" aria-label="Loading">
  <span class="s013-sr-only">Loading</span>
  <div class="s013-rings" aria-hidden="true">
    <span class="s013-ring"></span>
    <span class="s013-ring"></span>
    <span class="s013-ring"></span>
  </div>
</div>
.s013-loader {
  --s013-size: 64px;
  --s013-duration: 1.4s;
  --s013-color: #818cf8;
  --s013-accent: #38bdf8;
  position: relative;
  width: var(--s013-size);
  height: var(--s013-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.s013-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.s013-rings {
  position: relative;
  width: 100%;
  height: 100%;
}

.s013-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--s013-color);
  animation: s013-ripple var(--s013-duration) cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.s013-ring:nth-child(1) { animation-delay: 0s; }
.s013-ring:nth-child(2) { animation-delay: calc(var(--s013-duration) * 0.33); border-color: var(--s013-accent); }
.s013-ring:nth-child(3) { animation-delay: calc(var(--s013-duration) * 0.66); border-color: #c084fc; }

@keyframes s013-ripple {
  0% {
    transform: scale(0.15);
    opacity: 0.95;
    border-width: 3px;
  }
  70% {
    opacity: 0.55;
  }
  100% {
    transform: scale(1.05);
    opacity: 0;
    border-width: 1px;
  }
}

.s013-loader.paused,
.s013-loader[data-paused="true"],
.s013-loader.paused *,
.s013-loader[data-paused="true"] * {
  animation-play-state: paused !important;
}

@media screen and (prefers-reduced-motion: reduce) {
  .s013-ring {
    animation: none !important;
  }
  .s013-ring:nth-child(1) {
    transform: scale(0.35);
    opacity: 0.85;
    border-width: 2px;
  }
  .s013-ring:nth-child(2) {
    transform: scale(0.7);
    opacity: 0.55;
    border-width: 2px;
  }
  .s013-ring:nth-child(3) {
    transform: scale(1);
    opacity: 0.3;
    border-width: 1.5px;
  }
}
import React from 'react';
import './S-013.css';

export default function S013RippleLoader({
  size = 64,
  duration = 1.4,
  color = '#818cf8',
  label = 'Loading',
  paused = false,
  className = ''
}) {
  const rootStyle = {
    '--s013-size': typeof size === 'number' ? `${size}px` : size,
    '--s013-duration': typeof duration === 'number' ? `${duration}s` : duration,
    '--s013-color': color
  };

  const classNames = [
    's013-loader',
    paused ? 'paused' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      className={classNames}
      style={rootStyle}
      role="status"
      aria-label={label}
      data-paused={paused ? 'true' : undefined}
    >
  <span className="s013-sr-only">{label}</span>
  <div className="s013-rings" aria-hidden="true">
    <span className="s013-ring" />
    <span className="s013-ring" />
    <span className="s013-ring" />
  </div>
    </div>
  );
}

.s013-loader {
  --s013-size: 64px;
  --s013-duration: 1.4s;
  --s013-color: #818cf8;
  --s013-accent: #38bdf8;
  position: relative;
  width: var(--s013-size);
  height: var(--s013-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.s013-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.s013-rings {
  position: relative;
  width: 100%;
  height: 100%;
}

.s013-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--s013-color);
  animation: s013-ripple var(--s013-duration) cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.s013-ring:nth-child(1) { animation-delay: 0s; }
.s013-ring:nth-child(2) { animation-delay: calc(var(--s013-duration) * 0.33); border-color: var(--s013-accent); }
.s013-ring:nth-child(3) { animation-delay: calc(var(--s013-duration) * 0.66); border-color: #c084fc; }

@keyframes s013-ripple {
  0% {
    transform: scale(0.15);
    opacity: 0.95;
    border-width: 3px;
  }
  70% {
    opacity: 0.55;
  }
  100% {
    transform: scale(1.05);
    opacity: 0;
    border-width: 1px;
  }
}

.s013-loader.paused,
.s013-loader[data-paused="true"],
.s013-loader.paused *,
.s013-loader[data-paused="true"] * {
  animation-play-state: paused !important;
}

@media screen and (prefers-reduced-motion: reduce) {
  .s013-ring {
    animation: none !important;
  }
  .s013-ring:nth-child(1) {
    transform: scale(0.35);
    opacity: 0.85;
    border-width: 2px;
  }
  .s013-ring:nth-child(2) {
    transform: scale(0.7);
    opacity: 0.55;
    border-width: 2px;
  }
  .s013-ring:nth-child(3) {
    transform: scale(1);
    opacity: 0.3;
    border-width: 1.5px;
  }
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Combines CSS custom properties and keyframe transforms to animate visual geometry smoothly while keeping assistive technologies informed.

CSSカスタムプロパティとキーフレームを組み合わせ、支援技術に配慮しながら滑らかなアニメーションを実行します。

カスタマイズ方法Customization

Adjust duration, size, and accent colors via scoped CSS variables or React component props.

CSSカスタムプロパティまたはReactコンポーネントのProps経由でサイズ・周期・色を自在に変更可能です。

注意点Caveats

Always ensure meaningful label text for screen reader users and preserve reduced-motion overrides.

スクリーンリーダー向けのラベルテキストを適切に指定し、prefers-reduced-motion設定を上書きしないようご注意ください。

よくある質問 Frequently Asked Questions

How can I change the animation speed of Ripple Loader? リップルローダーのアニメーション速度を変更するにはどうすればよいですか？

Override the --s013-duration CSS variable or pass the duration prop to the React component.

CSS変数 --s013-duration を指定するか、Reactコンポーネントの duration プロパティを設定してください。

Does this snippet support prefers-reduced-motion? prefers-reduced-motion（視覚効果の抑制設定）に対応していますか？

Yes, it provides explicit media query overrides that freeze or stabilize animations without disappearing.

はい。メディアクエリによりアニメーションを停止し、要素が非表示にならない安定した静止形状を表示します。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.