S-014 Loading moderate

Flipping Tiles Loader フリップタイルローダー

Four tiles in a 2x2 grid rotating with staggered 3D flips and subtle perspective. 2x2タイルの3Dフリップによるモダンで立体的なローディング演出。

loading 3d tiles flip grid css-transforms

ライブデモ Live Demo

Loading

読み込み中... Loading...

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

何ができるかWhat it does

Four square tiles in a 2x2 grid flipping with staggered 3D perspective transforms in a continuous sequence.

2x2に並んだ4枚のタイルが3Dパースペクティブにより順次立体反転する幾何学的ローダー。

どこで使うかWhere to use

Used inside loading screens, cards, modals, or centered async wrappers.

ローディング画面、カードコンポーネント、モーダル、または非同期データ待機エリアで使用します。

特徴Key features

Pure CSS keyframes, scoped custom properties, accessibility support with role="status", prefers-reduced-motion fallbacks, and pause/resume states.

CSSアニメーションのみで構成、スコープ付きカスタムプロパティ、role="status"によるアクセシビリティ対応、prefers-reduced-motion時の静的表示、一時停止対応。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
duration1.4sAnimation cycle duration
size64pxWidth and height of the loader container
color#818cf8Primary accent color of the loader

実装コード Implementation Code 

<div class="s014-loader" role="status" aria-label="Loading">
  <span class="s014-sr-only">Loading</span>
  <div class="s014-grid" aria-hidden="true">
    <div class="s014-tile"></div>
    <div class="s014-tile"></div>
    <div class="s014-tile"></div>
    <div class="s014-tile"></div>
  </div>
</div>
.s014-loader {
  --s014-size: 64px;
  --s014-duration: 1.4s;
  --s014-color: #818cf8;
  --s014-accent: #06b6d4;
  position: relative;
  width: var(--s014-size);
  height: var(--s014-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.s014-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.s014-grid {
  width: calc(var(--s014-size) * 0.75);
  height: calc(var(--s014-size) * 0.75);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(var(--s014-size) * 0.08);
  perspective: 160px;
}

.s014-tile {
  background: linear-gradient(135deg, var(--s014-color), var(--s014-accent));
  border-radius: calc(var(--s014-size) * 0.06);
  transform-style: preserve-3d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: s014-flip var(--s014-duration) ease-in-out infinite;
}

.s014-tile:nth-child(1) { animation-delay: 0s; }
.s014-tile:nth-child(2) { animation-delay: calc(var(--s014-duration) * 0.15); }
.s014-tile:nth-child(4) { animation-delay: calc(var(--s014-duration) * 0.30); }
.s014-tile:nth-child(3) { animation-delay: calc(var(--s014-duration) * 0.45); }

@keyframes s014-flip {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(180deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(0deg) rotateY(180deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

.s014-loader.paused,
.s014-loader[data-paused="true"],
.s014-loader.paused *,
.s014-loader[data-paused="true"] * {
  animation-play-state: paused !important;
}

@media screen and (prefers-reduced-motion: reduce) {
  .s014-tile {
    animation: none !important;
    transform: none !important;
    opacity: 0.9;
  }
}
import React from 'react';
import './S-014.css';

export default function S014FlippingTilesLoader({
  size = 64,
  duration = 1.4,
  color = '#818cf8',
  label = 'Loading',
  paused = false,
  className = ''
}) {
  const rootStyle = {
    '--s014-size': typeof size === 'number' ? `${size}px` : size,
    '--s014-duration': typeof duration === 'number' ? `${duration}s` : duration,
    '--s014-color': color
  };

  const classNames = [
    's014-loader',
    paused ? 'paused' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      className={classNames}
      style={rootStyle}
      role="status"
      aria-label={label}
      data-paused={paused ? 'true' : undefined}
    >
  <span className="s014-sr-only">{label}</span>
  <div className="s014-grid" aria-hidden="true">
    <div className="s014-tile" />
    <div className="s014-tile" />
    <div className="s014-tile" />
    <div className="s014-tile" />
  </div>
    </div>
  );
}

.s014-loader {
  --s014-size: 64px;
  --s014-duration: 1.4s;
  --s014-color: #818cf8;
  --s014-accent: #06b6d4;
  position: relative;
  width: var(--s014-size);
  height: var(--s014-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.s014-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.s014-grid {
  width: calc(var(--s014-size) * 0.75);
  height: calc(var(--s014-size) * 0.75);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(var(--s014-size) * 0.08);
  perspective: 160px;
}

.s014-tile {
  background: linear-gradient(135deg, var(--s014-color), var(--s014-accent));
  border-radius: calc(var(--s014-size) * 0.06);
  transform-style: preserve-3d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: s014-flip var(--s014-duration) ease-in-out infinite;
}

.s014-tile:nth-child(1) { animation-delay: 0s; }
.s014-tile:nth-child(2) { animation-delay: calc(var(--s014-duration) * 0.15); }
.s014-tile:nth-child(4) { animation-delay: calc(var(--s014-duration) * 0.30); }
.s014-tile:nth-child(3) { animation-delay: calc(var(--s014-duration) * 0.45); }

@keyframes s014-flip {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(180deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(0deg) rotateY(180deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

.s014-loader.paused,
.s014-loader[data-paused="true"],
.s014-loader.paused *,
.s014-loader[data-paused="true"] * {
  animation-play-state: paused !important;
}

@media screen and (prefers-reduced-motion: reduce) {
  .s014-tile {
    animation: none !important;
    transform: none !important;
    opacity: 0.9;
  }
}

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

仕組みHow it works

Combines CSS custom properties and keyframe transforms to animate visual geometry smoothly while keeping assistive technologies informed.

CSSカスタムプロパティとキーフレームを組み合わせ、支援技術に配慮しながら滑らかなアニメーションを実行します。

カスタマイズ方法Customization

Adjust duration, size, and accent colors via scoped CSS variables or React component props.

CSSカスタムプロパティまたはReactコンポーネントのProps経由でサイズ・周期・色を自在に変更可能です。

注意点Caveats

Always ensure meaningful label text for screen reader users and preserve reduced-motion overrides.

スクリーンリーダー向けのラベルテキストを適切に指定し、prefers-reduced-motion設定を上書きしないようご注意ください。

よくある質問 Frequently Asked Questions

How can I change the animation speed of Flipping Tiles Loader? フリップタイルローダーのアニメーション速度を変更するにはどうすればよいですか？

Override the --s014-duration CSS variable or pass the duration prop to the React component.

CSS変数 --s014-duration を指定するか、Reactコンポーネントの duration プロパティを設定してください。

Does this snippet support prefers-reduced-motion? prefers-reduced-motion（視覚効果の抑制設定）に対応していますか？

Yes, it provides explicit media query overrides that freeze or stabilize animations without disappearing.

はい。メディアクエリによりアニメーションを停止し、要素が非表示にならない安定した静止形状を表示します。

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

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