# Skeleton > `` is a BootstrapVue custom component, that allows you to display a loading state for > several component types while your data is being fetched or computed. **Example: Basic usage** ```html ``` ## Types `` supports various basic types, to represent various components in your project. ```html
Text (default)
Avatar
Input
Button
``` ## Skeleton animations `` supports different animations. You can set them per component or change it globally in the [settings](/docs/reference/settings). ```html
Wave (default)
Fade
Throb
None
``` ## Helper components Utilize `` helper components to quickly scaffold existing components. ### Table `` allows you to scaffold a basic table structure by utilizing the `rows` and `columns` props to define the size of the table. You can pass props directly to the table via the `table-props` property, which supports the same props as ``. Refer to the `` [documentation](/docs/components/table#comp-ref-b-table-simple) for a complete list. ```html ``` ### Image Utilize `` to represent images. It utilizes a 16:9 aspect ratio by default, for a responsive sizing. You can overwrite this by applying `no-aspect` and utilize the `height` and `width` props to set your own sizing. ```html ``` #### Card Image Use `` to represent images in ``. Remember to set the `card-img` prop to the position of the image. This will apply the proper border-radius. ```html
Image top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien, non rhoncus elit tincidunt vitae.
Image bottom
Vestibulum maximus, ligula eu feugiat molestie, massa diam imperdiet odio, vitae viverra ligula est id nisi. Aliquam ut molestie est.
Image left
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus at consequat dui.
Image right
Aenean tristique sagittis quam, sit amet sollicitudin neque sodales in. ``` ## Icons `` can also be used as placeholder for icons. If you need to use any icon props, you can pass them via the `icon-props` property. ```html ``` **Note:** The `throb` animation does not work with `b-skeleton-icon`. ## Styling and customization The `` component and helper components utilizes Bootstrap SCSS variables, as much as possible to best match the styling and sizing of the native components. This means if you've customized Bootstrap SCSS, the skeleton components should adapt to fit your custom theming. We've also provided a few custom SCSS variables, that can be used to further customize the styling of the various `` components. You can read more about how to change these variables in the [theming section](/docs/reference/theming#bootstrapvue-sass-variables).