S-012 Loading simple

Bar Wave Loader バーウェーブローダー

Staggered scaleY vertical bars creating a smooth wave loading indicator. 時間差の垂直スケール変化による5本バーのウェーブローダー。

loading bars wave equalizer scale css-animation

ライブデモ Live Demo

Loading

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

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

何ができるかWhat it does

Five vertical bars pulsing with a staggered scaleY wave effect, reminiscent of an audio equalizer or fluid stream.

5本の垂直バーが時間差で拡大・縮小するウェーブ型ローダー。オーディオ波形のようなリズミカルな動きです。

どこで使うか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="s012-loader" role="status" aria-label="Loading">
  <span class="s012-sr-only">Loading</span>
  <div class="s012-bars" aria-hidden="true">
    <span class="s012-bar"></span>
    <span class="s012-bar"></span>
    <span class="s012-bar"></span>
    <span class="s012-bar"></span>
    <span class="s012-bar"></span>
  </div>
</div>
.s012-loader {
  --s012-size: 64px;
  --s012-duration: 1.4s;
  --s012-color: #818cf8;
  --s012-accent: #06b6d4;
  position: relative;
  width: var(--s012-size);
  height: var(--s012-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.s012-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;
}

.s012-bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--s012-size) * 0.7);
  height: calc(var(--s012-size) * 0.65);
}

.s012-bar {
  width: calc(var(--s012-size) * 0.08);
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(180deg, var(--s012-color), var(--s012-accent));
  transform-origin: center;
  animation: s012-wave var(--s012-duration) ease-in-out infinite;
}

.s012-bar:nth-child(1) { animation-delay: calc(var(--s012-duration) * -0.45); }
.s012-bar:nth-child(2) { animation-delay: calc(var(--s012-duration) * -0.30); }
.s012-bar:nth-child(3) { animation-delay: calc(var(--s012-duration) * -0.15); }
.s012-bar:nth-child(4) { animation-delay: 0s; }
.s012-bar:nth-child(5) { animation-delay: calc(var(--s012-duration) * 0.15); }

@keyframes s012-wave {
  0%, 100% {
    transform: scaleY(0.28);
    opacity: 0.45;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
    box-shadow: 0 0 10px var(--s012-color);
  }
}

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

@media screen and (prefers-reduced-motion: reduce) {
  .s012-bar {
    animation: none !important;
    transform: scaleY(0.65);
    opacity: 0.85;
  }
}
import React from 'react';
import './S-012.css';

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

  const classNames = [
    's012-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="s012-sr-only">{label}</span>
  <div className="s012-bars" aria-hidden="true">
    <span className="s012-bar" />
    <span className="s012-bar" />
    <span className="s012-bar" />
    <span className="s012-bar" />
    <span className="s012-bar" />
  </div>
    </div>
  );
}

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

.s012-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;
}

.s012-bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--s012-size) * 0.7);
  height: calc(var(--s012-size) * 0.65);
}

.s012-bar {
  width: calc(var(--s012-size) * 0.08);
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(180deg, var(--s012-color), var(--s012-accent));
  transform-origin: center;
  animation: s012-wave var(--s012-duration) ease-in-out infinite;
}

.s012-bar:nth-child(1) { animation-delay: calc(var(--s012-duration) * -0.45); }
.s012-bar:nth-child(2) { animation-delay: calc(var(--s012-duration) * -0.30); }
.s012-bar:nth-child(3) { animation-delay: calc(var(--s012-duration) * -0.15); }
.s012-bar:nth-child(4) { animation-delay: 0s; }
.s012-bar:nth-child(5) { animation-delay: calc(var(--s012-duration) * 0.15); }

@keyframes s012-wave {
  0%, 100% {
    transform: scaleY(0.28);
    opacity: 0.45;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
    box-shadow: 0 0 10px var(--s012-color);
  }
}

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

@media screen and (prefers-reduced-motion: reduce) {
  .s012-bar {
    animation: none !important;
    transform: scaleY(0.65);
    opacity: 0.85;
  }
}

仕組みとカスタマイズ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 Bar Wave Loader? バーウェーブローダーのアニメーション速度を変更するにはどうすればよいですか？

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

CSS変数 --s012-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.