Skeleton
A placeholder for content to load
edit on github
Examples
Base
Props
Prop name | Description | Type | Values | Default |
active | Show or hide loader | boolean | - | true |
animated | Show a loading animation | boolean | - | true |
width | Custom width | number|string | - | |
height | Custom height | number|string | - | |
circle | Show a circle shape | boolean | - | |
rounded | Rounded style | boolean | - | true |
count | Number of shapes to display | number | - | 1 |
position | Skeleton position in relation to the element | string | left , centered , right | '' |
size | Size of skeleton | string | small , medium , large | |
rootClass | | string | - | |
animationClass | | string | - | |
positionClass | | string | - | |
itemClass | | string | - | |
itemRoundedClass | | string | - | |
sizeClass | | string | - | |
Style
CSS Variable | SASS Variable | Default |
--oruga-skeleton-background | $skeleton-background | linear-gradient(90deg, $grey-lighter 25%, rgba($grey-lighter, 0.5) 50%, $grey-lighter 75%) |
--oruga-skeleton-border-radius | $skeleton-border-radius | $base-border-radius |
--oruga-skeleton-duration | $skeleton-duration | 1.5s |
--oruga-skeleton-margin | $skeleton-margin | .5rem 0 0 0 |