AI向け説明AI Description

S-007 は position: absolute で inset: 0 のオーバーレイを用意し、.visible で opacity と visibility を transition。スピナーは @keyframes で回転。実運用では固定レイヤーで画面全体を覆うことも多い。

S-007 uses an overlay with position absolute and inset 0; .visible toggles opacity and visibility with transition. Spinner uses @keyframes rotation. Often used as fixed fullscreen overlay.

調整可能パラメータParameters

• --overlay-fade, 背景色・スピナー色

実装Implementation

HTML + CSS

<div class="overlay-loader" aria-hidden="true">
  <div class="spinner"></div>
  <p>Loading...</p>
</div>

.overlay-loader { opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.overlay-loader.visible { opacity: 1; visibility: visible; }

React (JSX + CSS)

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