Skeleton 骨架屏

行内 Tailwind/UnoCSS 用法

使用行内的tailwind/unocss样式构建，复制组件的代码即可使用

示例1

示例2

查看代码

<h2>示例1</h2>
<div class="animate-pulse space-y-4">
  <div class="h-20 rounded-lg bg-gray-200" />
  <div class="h-4 w-3/4 rounded-sm bg-gray-200" />
  <div class="h-4 w-1/2 rounded-sm bg-gray-200" />
  <div class="h-4 w-1/3 rounded-sm bg-gray-200" />
</div>

<h2>示例2</h2>
<div class="flex animate-pulse gap-2">
  <div class="w-1/3 space-y-4 rounded-sm">
    <div class="flex h-40 w-full items-center justify-center rounded-sm bg-gray-200 text-gray-400">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16"><path fill="currentColor" d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71l-2.66-1.772a.5.5 0 0 0-.63.062zm5-6.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0" /></svg>
    </div>
    <div class="h-4 w-3/4 rounded-sm bg-gray-200" />
    <div class="h-4 w-full rounded-sm bg-gray-200" />
    <div class="h-4 w-full rounded-sm bg-gray-200" />
  </div>

  <div class="w-1/3 space-y-4 rounded-sm">
    <div class="flex h-40 w-full items-center justify-center rounded-sm bg-gray-200 text-gray-400">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16"><path fill="currentColor" d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71l-2.66-1.772a.5.5 0 0 0-.63.062zm5-6.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0" /></svg>
    </div>
    <div class="h-4 w-3/4 rounded-sm bg-gray-200" />
    <div class="h-4 w-full rounded-sm bg-gray-200" />
    <div class="h-4 w-full rounded-sm bg-gray-200" />
  </div>

  <div class="w-1/3 space-y-4 rounded-sm">
    <div class="flex h-40 w-full items-center justify-center rounded-sm bg-gray-200 text-gray-400">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16"><path fill="currentColor" d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71l-2.66-1.772a.5.5 0 0 0-.63.062zm5-6.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0" /></svg>
    </div>
    <div class="h-4 w-3/4 rounded-sm bg-gray-200" />
    <div class="h-4 w-full rounded-sm bg-gray-200" />
    <div class="h-4 w-full rounded-sm bg-gray-200" />
  </div>
</div>