
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/skeleton/index.mdx'

## 默认类名表格
  
<CssTable name="skeleton" />
  
## 样例
  
<Demo></Demo>
  
## Css 结构


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.skeleton {
  animation: skeleton-blink var(--skeleton-duration) ease-in-out infinite;
}

@keyframes skeleton-blink {
  50% {
    opacity: 0.6;
  }
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.skeleton {
  @apply bg-base-300;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css
.skeleton-title {
  @apply w-2/5 h-4;
}

.skeleton-paragraph {
  @apply w-full h-4;
}

.skeleton-avatar {
  @apply h-8 w-8 rounded-full;
}

```

</div>
</div>



