# Tailwind CSS でアニメーション付きのローディングスケルトンを作る > シマー効果を使って Tailwind CSS でアニメーション付きのローディングスケルトンを作り、実際のコンテンツを読み込んでいる間にプレースホルダー UI を表示できるようにします。著者 Shodipo Ayomide、2022年7月18日公開。Web 版：https://blog.shodipoayomide.com/ja/animated-loading-skeletons-with-tailwind

# スケルトン - Tailwind の豊富なユーティリティクラスを使って、これから読み込むコンテンツにおおまかに似せたスケルトンを作ります。

```html

```

# グラデーションオーバーレイ - Tailwind のグラデーションカラーストップを使って、透明から白へ、そして再び透明へとフェードするグラデーションを作ります。

```html

```

# アニメーション - `tailwind.config.js` の extend 内にある keyframes オブジェクトに、要素を右方向へ 100% 移動させる CSS キーフレームアニメーションを定義します。 - Tailwind の任意値（arbitrary values）を使って、オーバーレイ要素にキーフレームアニメーションを適用します。

```json { "keyframes": { "shimmer": { "100%": { "transform": "translateX(100%)", }, }, } }, ``` ```html

```

# スケルトンとオーバーレイのアニメーションを組み合わせる - Tailwind の `before:` モディファイアを使って、スケルトンのラッパーの疑似要素にオーバーレイを追加します。

```html

[...]

```

# 仕上げ - オーバーレイがスケルトンの外側に位置している間は非表示にします。 - スケルトンに影を付けます。 - 光の反射を表現するために、オーバーレイの上端に控えめなボーダーを追加します。 - 角丸の部分で Safari がアニメーションをはみ出させてしまう問題は、`isolate` で修正できます。

```html

[...]

```