S-003 Spinner Loader | Vibe UI Pattern Library

ライブデモ Live Demo

円形のボーダーが回転するシンプルなスピナーローダー。回転速度とサイズをカスタムプロパティで調整できます。二重リングバージョンも用意しています。

Simple rotating spinner with circular border. Adjust rotation speed and size via custom properties. Double-ring version also available.

二重リングバージョン:

Double ring version:

スピナーサイズ Spinner Size 48px

回転速度 Rotation Speed 1.0s

AI向け説明 AI Description

`S-003` は `border` の一部だけに色を付け、`@keyframes spin` で `rotate(360deg)` をアニメーションさせます。二重リングは疑似要素で2つのリングを重ね、異なる速度で逆方向に回転させます。

`S-003` colors only part of the border and animates `rotate(360deg)` with `@keyframes spin`. Double ring uses pseudo-elements to layer two rings rotating at different speeds in opposite directions.

調整可能パラメータ Adjustable Parameters

--spinner-size — スピナーの直径 spinner diameter
--spinner-speed — 1回転の時間 time for one rotation
--spinner-color — スピナーの色 spinner color
border width — ボーダーの太さを変更 change border thickness

実装 Implementation

HTML + CSS

<div class="spinner"></div>

<style>
:root {
  --spinner-size: 48px;
  --spinner-speed: 1s;
  --spinner-color: #5c6ac4;
}

.spinner {
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: 4px solid rgba(92, 106, 196, 0.2);
  border-top-color: var(--spinner-color);
  border-radius: 50%;
  animation: spin var(--spinner-speed) linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

React (JSX + CSS)

// 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);
  }
}

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

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: S-003
- パターン名: スピナーローダー
- 参照URL: https://devsnips.dev/animations/S-003.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: S-003
- Pattern Name: Spinner Loader
- Reference URL: https://devsnips.dev/animations/S-003.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

`prefers-reduced-motion` では回転を停止し、点滅アニメーションに切り替えてください。アクセシビリティのため、`aria-label` でローディング状態を伝えてください。

Under `prefers-reduced-motion`, stop rotation and switch to a pulsing animation. Add `aria-label` to communicate loading state for accessibility.