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