S-004 Loading simple

How to create a progress bar プログレスバーの作り方

Progress bar displaying loading progress. Customize animation speed and colors. 進捗を表示するプログレスバー。アニメーション速度と色をカスタマイズできます。

progress loading bar indicator

ライブデモ Live Demo

進捗 Progress 0%
0%

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

何ができるかWhat it does

Progress bar displaying loading progress. Customize animation speed and colors.

進捗を表示するプログレスバー。アニメーション速度と色をカスタマイズできます。

どこで使うかWhere to use

loading screen, async UI state, page transition, data fetching indicator

ファイルアップロード、タスク完了、クイズ進行、マルチステップフォーム

特徴Key features

Animated progress bar driven by CSS width or transform: scaleX transition. Supports determinate (percentage) and indeterminate (looping) modes. Customizable color, height, and border-radius. ARIA progressbar role with aria-valuenow.

CSS widthまたはtransform:scaleXトランジションで駆動するアニメーションプログレスバー。確定（パーセンテージ）と不確定（ループ）モードをサポート。カラー・高さ・border-radiusをカスタマイズ可能。aria-valuenow付きのARIA progressbarロール。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--progress-duration—animation duration for progress bar
--progress-color—gradient color for progress bar
bar height—height of the progress bar

実装コード Implementation Code 

// react/S-004.jsx
import { useState } from "react";
import "./S-004.css";

export default function ProgressBar({ value = 0 }) {
  return (
    <div className="progress-bar">
      <div
        className="progress-bar__fill"
        style={{ width: `${value}%` }}
      ></div>
    </div>
  );
}
/* react/S-004.css */
.progress-bar {
  width: 100%;
  height: 8px;
  background: #dfe3f6;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #5c6ac4, #8c6ff7);
  border-radius: 999px;
  transition: width 0.3s ease;
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
import "./S-004.css";

export default function ProgressBar({ value = 0 }) {
  return (
    <div className="progress-bar">
      <div
        className="progress-bar__fill"
        style={{ width: `${value}%` }}
      ></div>
    </div>
  );
}
.progress-bar {
  width: 100%;
  height: 8px;
  background: #dfe3f6;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #5c6ac4, #8c6ff7);
  border-radius: 999px;
  transition: width 0.3s ease;
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

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

仕組みHow it works

A container div holds a fill div. The fill's width (or scaleX transform with transform-origin: left) is updated via CSS transition as the progress value changes. For indeterminate mode, a looping @keyframes animation slides a gradient across the bar. JavaScript updates aria-valuenow and aria-valuetext alongside the visual fill.

コンテナdivがフィルdivを保持。フィルのwidth（またはtransform-origin:leftのscaleXトランスフォーム）は進行値変化に伴いCSSトランジションで更新。不確定モードでは、ループする@keyframesアニメーションがバー全体でグラデーションをスライド。JavaScriptが視覚的フィルと並行してaria-valuenowとaria-valuetextを更新。

カスタマイズ方法Customization

Add a percentage label inside or above the bar. Use a striped gradient on the fill for a classic progress bar look. Add a pulsing glow effect on the fill leading edge for visual interest.

バーの内部または上部にパーセンテージラベルを追加。クラシックなプログレスバーの外観のためにフィルにストライプグラデーションを使用。視覚的な興味のためにフィル先端に点滅グロウエフェクトを追加。

注意点Caveats

Use the native <progress> element when possible for built-in accessibility. For custom styled bars, add role="progressbar", aria-valuenow, aria-valuemin="0", and aria-valuemax="100". For indeterminate progress, omit aria-valuenow.

組み込みアクセシビリティのため可能な場合はネイティブの<progress>要素を使用してください。カスタムスタイルのバーにはrole="progressbar"、aria-valuenow、aria-valuemin="0"、aria-valuemax="100"を追加してください。不確定な進行にはaria-valuenowを省略してください。

よくある質問 Frequently Asked Questions

How to customize the progress bar? Progress Barをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the progress bar in React? ReactでProgress Barを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of progress bar? Progress Barのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

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

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