# auro-skeleton
The `auro-skeleton` element provides users a way to indicate the loading of asynchronous content on a page.
### Properties & Attributes
| Properties | Attributes | Modifiers | Type | Default | Description |
| ---------- | ---------- | --------- | --------------------------------- | ------- | ------------------------------------------- |
| shape | shape | | `circle` \| `oval` \| `rectangle` | | Renders a circle, oval, or rectangle loader |
### Methods
| Name | Parameters | Return | Description |
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
## Basic
See code
```html
```
## Property & Attribute Examples
### Shape
The `` element makes use of a single `shape` to control its appearance. Options are [`circle`, `oval`, `rectangle`].
### Circle
See code
```html
```
### Oval
See code
```html
```
### Rectangle
See code
```html
```
## Common Usage Patterns & Functional Examples
## Be creative
Use your imagination. Wherever data can be placed, an `` element can be used. In the following example see how `` is used in place where data will be filled once the process is completed.
| The table header |
The table header |
|
|
|
|
|
|
See code
```html
| The table header |
The table header |
|
|
|
|
|
|
```
## Restyle Component with CSS Variables
The component may be restyled by changing the values of the following token(s).
```scss
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
:host {
--ds-auro-skeleton-container-color: var(--ds-advanced-color-skeleton-background, #{v.$ds-advanced-color-skeleton-background});
--ds-auro-skeleton-container-gradient-color-one: var(--ds-advanced-color-skeleton-background, #{v.$ds-advanced-color-skeleton-background});
--ds-auro-skeleton-container-gradient-color-two: var(--ds-advanced-color-skeleton-wave, #{v.$ds-advanced-color-skeleton-wave});
}
```