S-003 Loading simple

How to create a spinner loader スピナーローダーの作り方

Rotating spinner loader. Adjust rotation speed and size via custom properties. 回転するスピナーローダー。回転速度とサイズをカスタムプロパティで調整できます。

loader spinner rotation loading

ライブデモ Live Demo

48px
1.0s

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

何ができるかWhat it does

Rotating spinner loader. Adjust rotation speed and size via custom properties.

回転するスピナーローダー。回転速度とサイズをカスタムプロパティで調整できます。

どこで使うかWhere to use

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

ボタンローディング状態、フォーム送信、データフェッチ、インラインローディング

特徴Key features

Pure CSS spinner using border and border-top-color trick with @keyframes rotate. Ultra-lightweight (under 500 bytes). Multiple size variants via CSS custom properties. Supports overlay mode for full-component blocking.

@keyframes rotateを使用したborderとborder-top-colorトリックによる純粋なCSSスピナー。超軽量（500バイト未満）。CSSカスタムプロパティで複数サイズバリアント。コンポーネント全体をブロックするオーバーレイモードをサポート。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--spinner-size—spinner diameter
--spinner-speed—time for one rotation
--spinner-color—spinner color
border width—change border thickness

実装コード Implementation Code 

// react/S-003.jsx
import "./S-003.css";

export default function SpinnerLoader({ size = 48, speed = 1, color = "#5c6ac4" }) {
  return (
    <div
      className="spinner"
      style={{
        ["--spinner-size"]: `${size}px`,
        ["--spinner-speed"]: `${speed}s`,
        ["--spinner-color"]: color
      }}
    />
  );
}
/* react/S-003.css */
.spinner {
  width: var(--spinner-size, 48px);
  height: var(--spinner-size, 48px);
  border: 4px solid rgba(92, 106, 196, 0.2);
  border-top-color: var(--spinner-color, #5c6ac4);
  border-radius: 50%;
  animation: spin var(--spinner-speed, 1s) linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
import "./S-003.css";

export default function SpinnerLoader({ size = 48, speed = 1, color = "#5c6ac4" }) {
  return (
    <div
      className="spinner"
      style={{
        ["--spinner-size"]: `${size}px`,
        ["--spinner-speed"]: `${speed}s`,
        ["--spinner-color"]: color
      }}
      aria-label="Loading"
      role="status"
    />
  );
}
/* Spinner styles are now in global.css */

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

仕組みHow it works

A circular div has a transparent border on all sides except the top, which is colored. A @keyframes animation rotates the element 360° at a constant speed. The "donut" shape is achieved via border-radius: 50% and a transparent center. Size is controlled by width/height properties.

円形divは上辺以外の全ての辺に透明なボーダーを持ち、上辺は色付き。@keyframesアニメーションが一定速度で要素を360°回転。"ドーナツ"形状はborder-radius:50%と透明な中心で実現。サイズはwidth/heightプロパティで制御。

カスタマイズ方法Customization

Use conic-gradient instead of border for a more modern spinner with gradient arc. Add a second counter-rotating spinner ring for a compound loading animation. Scale using the --spinner-size variable to embed in buttons or headers.

borderの代わりにconic-gradientを使用してグラデーントアークのよりモダンなスピナーに。複合ローディングアニメーション用に逆回転する2番目のスピナーリングを追加。ボタンやヘッダーに埋め込むために--spinner-size変数でサイズ調整。

注意点Caveats

Add aria-label="Loading" and role="status" to the spinner element. When the loading is complete, remove the spinner and announce completion via an aria-live region. Provide a text fallback ("Loading...") alongside the visual spinner.

スピナー要素にaria-label="読み込み中"とrole="status"を追加してください。ローディング完了時にスピナーを削除してaria-live領域で完了をアナウンスしてください。視覚的スピナーと一緒にテキストフォールバック（"読み込み中..."）を提供してください。

よくある質問 Frequently Asked Questions

How to customize the spinner loader? Spinner Loaderをカスタマイズするには？

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 spinner loader in React? ReactでSpinner Loaderを使うには？

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 spinner loader? Spinner Loaderのパフォーマンスへの影響は？

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.