S-007 Loading medium

How to create a overlay loader オーバーレイローダーの作り方

Fullscreen loading overlay with fade. Spinner and message. 画面全体を覆うローディングオーバーレイ。フェード表示。

overlay loading spinner

ライブデモ Live Demo

フェード時間Fade Duration 0.3s

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

何ができるかWhat it does

Fullscreen loading overlay with fade. Spinner and message.

画面全体を覆うローディングオーバーレイ。フェード表示。

どこで使うかWhere to use

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

フォーム送信、ファイルアップロード、ページ遷移、長時間の計算処理

特徴Key features

Full-page or component-scoped overlay with a centered spinner and optional message. Blocks interaction during async operations. Smooth fade-in/out animation. z-index management to overlay all content.

ページ全体またはコンポーネントスコープのオーバーレイ、中央スピナーとオプションのメッセージ付き。非同期操作中のインタラクションをブロック。スムーズなフェードイン/アウトアニメーション。全コンテンツをオーバーレイするz-index管理。

調整可能パラメータ Adjustable Parameters

Parameter	Default	Description

実装コード Implementation Code

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

export default function OverlayLoader({ loadingText = "Loading...", visible: controlledVisible, onVisibleChange }) {
  const [internalVisible, setInternalVisible] = useState(false);
  const visible = controlledVisible !== undefined ? controlledVisible : internalVisible;
  const setVisible = onVisibleChange ?? setInternalVisible;

  return (
    <div
      className={"overlay-loader" + (visible ? " visible" : "")}
      aria-hidden={!visible}
      role="status"
      aria-live="polite"
    >
      <div>
        <div className="spinner" aria-hidden="true"></div>
        <p>{loadingText}</p>
      </div>
    </div>
  );
}

// Parent: use state to toggle visible; optionally wrap in position: relative container.

/* react/S-007.css */
:root { --overlay-fade: 0.3s; }

.overlay-loader {
  position: absolute;
  inset: 0;
  background: rgba(29, 34, 66, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--overlay-fade) ease, visibility var(--overlay-fade) ease;
}

.overlay-loader.visible { opacity: 1; visibility: visible; }

.overlay-loader > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.overlay-loader .spinner {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: overlay-spin 0.8s linear infinite;
}

@keyframes overlay-spin { to { transform: rotate(360deg); } }

.overlay-loader p { color: #fff; margin: 16px 0 0; font-weight: 600; }

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

export default function OverlayLoader({ loadingText = "Loading...", visible: controlledVisible, onVisibleChange }) {
  const [internalVisible, setInternalVisible] = useState(false);
  const visible = controlledVisible !== undefined ? controlledVisible : internalVisible;
  const setVisible = onVisibleChange ?? setInternalVisible;

  return (
    <div
      className={"overlay-loader" + (visible ? " visible" : "")}
      aria-hidden={!visible}
      role="status"
      aria-live="polite"
    >
      <div>
        <div className="spinner" aria-hidden="true"></div>
        <p>{loadingText}</p>
      </div>
    </div>
  );
}

:root { --overlay-fade: 0.3s; }

.overlay-loader {
  position: absolute;
  inset: 0;
  background: rgba(29, 34, 66, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--overlay-fade) ease, visibility var(--overlay-fade) ease;
}

.overlay-loader.visible { opacity: 1; visibility: visible; }

.overlay-loader > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.overlay-loader .spinner {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: overlay-spin 0.8s linear infinite;
}

@keyframes overlay-spin { to { transform: rotate(360deg); } }

.overlay-loader p { color: #fff; margin: 16px 0 0; font-weight: 600; }

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

仕組みHow it works

An absolutely or fixed positioned overlay div (with inset: 0) covers the target area. A high z-index ensures it sits above all content. A centered flexbox holds the spinner and message. Show/hide is controlled by adding/removing a visible class that transitions opacity. pointer-events: none in hidden state prevents accidental interaction.

absoluteまたはfixed配置のオーバーレイdiv（inset:0）がターゲットエリアをカバー。高いz-indexで全コンテンツの上に配置。センタリングされたflexboxがスピナーとメッセージを保持。表示/非表示はopacityをトランジションするvisibleクラスの追加/削除で制御。非表示状態ではpointer-events:noneが偶発的なインタラクションを防止。

カスタマイズ方法Customization

Add a progress percentage text alongside the spinner for file upload scenarios. Use a backdrop-filter: blur() on the overlay for a frosted glass effect. Show a cancel button in the overlay for interruptible operations.

ファイルアップロードシナリオのためにスピナーの横に進行率テキストを追加。フロストガラスエフェクトのためにオーバーレイにbackdrop-filter:blur()を使用。中断可能な操作のためにオーバーレイにキャンセルボタンを表示。

注意点Caveats

Trap focus within the overlay to prevent users from interacting with covered content. Use aria-busy="true" on the covered element and role="dialog" with aria-label="Loading" on the overlay. Ensure cancel buttons are reachable by keyboard if provided.

カバーされたコンテンツとのインタラクションを防ぐためオーバーレイ内にフォーカスをトラップしてください。カバーされた要素にaria-busy="true"を使用し、オーバーレイにrole="dialog"とaria-label="読み込み中"を設定してください。キャンセルボタンが提供される場合はキーボードから到達可能にしてください。

よくある質問 Frequently Asked Questions

How to customize the overlay loader? Overlay 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 overlay loader in React? ReactでOverlay 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 overlay loader? Overlay 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.

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

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

Please implement the following UI pattern.

- Pattern ID: S-007
- Pattern Name: Overlay Loader
- Reference URL: https://devsnips.dev/snippets/overlay-loader/
- 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]