Zenn
🍃

[Tailwind CSS] ロードUI/スケルトンUI

2024/12/01に公開
CSS
Tailwind CSS
UI
初心者向け
tech

はじめに

この記事では、ロードUI/スケルトンUIの実装方法を解説します。
下記サイトを活用して表示しております。

参考資料

1. iPhoneで見かけそうなUI

Tailwind-CSS-animate-spin

<div class="flex items-center justify-center animate-spin min-h-screen">
  <svg class="absolute w-4 h-2 bg-gray-100/50 rounded-lg translate-x-[24px] translate-y-0 rotate-0"></svg>
  <svg class="absolute w-4 h-2 bg-gray-200/50 rounded-lg translate-x-[17px] translate-y-[17px] rotate-[45deg]"></svg>
  <svg class="absolute w-4 h-2 bg-gray-300/50 rounded-lg translate-x-0 translate-y-[24px] rotate-[90deg]"></svg>
  <svg class="absolute w-4 h-2 bg-gray-400/50 rounded-lg translate-x-[-17px] translate-y-[17px] rotate-[135deg]"></svg>
  <svg class="absolute w-4 h-2 bg-gray-500/50 rounded-lg translate-x-[-24px] translate-y-0 rotate-0"></svg>
  <svg class="absolute w-4 h-2 bg-gray-600/50 rounded-lg translate-x-[-17px] translate-y-[-17px] rotate-[-135deg]"></svg>
  <svg class="absolute w-4 h-2 bg-gray-700/50 rounded-lg translate-x-0 translate-y-[-24px] rotate-[-90deg]"></svg>
  <svg class="absolute w-4 h-2 bg-gray-800/50 rounded-lg translate-x-[17px] translate-y-[-17px] rotate-[-45deg]"></svg>
</div>

2. Androidで見かけそうなUI

Tailwind CSS animate-spin-2

<div class="flex items-center justify-center animate-spin min-h-screen">
  <svg class="w-10 h-10 border-4 border-gray-400 border-t-transparent rounded-full animate-spin"></svg>
</div>

3. YouTubeで見かけそうなUI

Tailwind-CSS-animate-pulse

<div class="flex items-center justify-center min-h-screen">
  <svg class="w-10 h-10 bg-gray-400 rounded-full animate-pulse"></svg>
  <svg class="w-20 h-10 bg-gray-400 rounded-lg animate-pulse mx-4"></svg>\
</div>

4. ゲームの右下で見かけそうなUI

Tailwind-CSS-animate-bounce

<div class="flex items-center justify-center animate-spin min-h-screen">
  <svg class="w-12 h-12 bg-gradient-to-t from-gray-300 to-gray-400 rounded-full animate-bounce"></svg>
</div>
GitHubで編集を提案

Discussion