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

はじめに

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

参考資料

1. iPhone で見かけそうな UI

<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

<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

<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

<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>

YouTube のご案内

ポモドーロタイマー（25 分勉強＋ 5 分休憩）を活用した作業・勉強配信を行っています。
集中したいときや、誰かと一緒に頑張りたいときに、ぜひご活用ください。

ご興味のある方は、ぜひお気軽に遊びに来てください！
「Zenn から来ました!!」とコメントを貰えると泣いて喜びます 🤣