骨架

波浪

演示

代码

HTML

代码

JSX/TSX

<div class="grid grid-cols-3 gap-4 place-items-stretch h-56">
	<div class="skeleton wave" />
	<div class="skeleton wave bw" />
	<div class="skeleton wave info" />
	<div class="skeleton wave success" />
	<div class="skeleton wave warn" />
	<div class="skeleton wave danger" />
</div>

<div className='grid grid-cols-3 gap-4 place-items-stretch h-56'>
  <div className='skeleton wave' />
  <div className='skeleton wave bw' />
  <div className='skeleton wave info' />
  <div className='skeleton wave success' />
  <div className='skeleton wave warn' />
  <div className='skeleton wave danger' />
</div>

静止

演示

代码

HTML

代码

JSX/TSX

<div class="grid grid-cols-3 gap-4 place-items-stretch h-56">
	<div class="skeleton static" />
	<div class="skeleton static bw" />
	<div class="skeleton static info" />
	<div class="skeleton static success" />
	<div class="skeleton static warn" />
	<div class="skeleton static danger" />
</div>

<div className='grid grid-cols-3 gap-4 place-items-stretch h-56'>
  <div className='skeleton static' />
  <div className='skeleton static bw' />
  <div className='skeleton static info' />
  <div className='skeleton static success' />
  <div className='skeleton static warn' />
  <div className='skeleton static danger' />
</div>

跳动

演示

代码

HTML

代码

JSX/TSX

<div class="grid grid-cols-3 gap-4 place-items-stretch h-56">
	<div class="skeleton pulse" />
	<div class="skeleton pulse bw" />
	<div class="skeleton pulse info" />
	<div class="skeleton pulse success" />
	<div class="skeleton pulse warn" />
	<div class="skeleton pulse danger" />
</div>

<div className='grid grid-cols-3 gap-4 place-items-stretch h-56'>
  <div className='skeleton pulse' />
  <div className='skeleton pulse bw' />
  <div className='skeleton pulse info' />
  <div className='skeleton pulse success' />
  <div className='skeleton pulse warn' />
  <div className='skeleton pulse danger' />
</div>

进度条概览