# Shimmer
**Also known as:** Skeleton
## Description
Shimmer is a loading placeholder for content that has not arrived yet, so a page lays itself out before its data is in. It draws a bar, a paragraph, a pill, a circle or a template of shimmers, can cover content that is being refreshed, holds the placeholder back from fast responses, and tells screen readers when the wait is over.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Animation | `BitShimmerAnimation?` | null | The animation the shimmer plays while it waits: Wave, Pulse, Fade or None. |
| Background | `BitColor?` | null | The resting color of the placeholder, which the animation plays over. It is all a None placeholder shows. |
| ChildContent | `RenderFragment?` | null | The content that replaces the shimmer once Loaded is true. |
| Circle | `bool` | false | Renders the shimmer as a circle. Short form of Shape="BitShape.Circle", which wins over it. |
| Classes | `BitShimmerClassStyles?` | null | Custom CSS classes for different parts of the BitShimmer. |
| Color | `BitColor?` | null | The color of the animated part of the shimmer. A None placeholder has no animated part. |
| Content | `RenderFragment?` | null | Alias of ChildContent. |
| Delay | `int?` | null | The pause in ms before the first loop of the animation. Not the wait before the placeholder appears (see ShowDelay). |
| Duration | `int?` | null | The length in ms of one loop of the animation. |
| Gap | `string?` | null | The gap between the lines of a multi-line shimmer, as a CSS length. |
| Height | `string?` | null | The height of the placeholder, or of each line of a multi-line one. Dropped once loaded, so the content sizes itself. Defaults to the Size. |
| Inline | `bool` | false | Lays the shimmer out in a line of text, rendered as a span. Without a Width it is eight spacing units (64px) wide. |
| Label | `string?` | null | Screen-reader text announced while the shimmer waits, in a live region that switches to LoadedLabel when the content arrives. The region is rendered right after the root, so a sibling selector sees it too, and it follows the root's Visibility, hidden, inert, aria-hidden, Dir and lang but not a stylesheet that hides it. |
| LastLineWidth | `string?` | null | The width of the last line of a multi-line shimmer, as a CSS length. Defaults to 60%. |
| Lines | `int` | 1 | The number of lines stacked as a paragraph. A circle and an overlay ignore it. |
| LineWidths | `IList<string>?` | null | The width of each line of a multi-line shimmer, from the first line on. Lines past the end of the list keep their default width. |
| Loaded | `bool` | false | Swaps the placeholder for the content, which fades in if a placeholder was seen. |
| LoadedLabel | `string?` | null | Screen-reader text announced once the content has replaced the shimmer. |
| MinShowTime | `int?` | null | The shortest time in ms a placeholder that has appeared stays on the page, so a response landing just after it never flickers. |
| Overlay | `bool` | false | Draws the placeholder over the content instead of in place of it, so the layout never moves and the content keeps its state. Lines and Template do not apply. Covered content leaves the tab order, so keep the control that starts a refresh outside it. |
| Politeness | `BitPoliteness` | BitPoliteness.Polite | How urgently the live region interrupts a screen reader. Only applies with Label or LoadedLabel. |
| Pulse | `bool` | false | Changes the animation to pulse. Short form of Animation="BitShimmerAnimation.Pulse", which wins over it. |
| Radius | `string?` | null | The corner radius of the placeholder, as a CSS length. Wins over the Shape; a circle ignores it. |
| Shape | `BitShape?` | null | The shape of the placeholder: Rounded, Square, Pill or Circle. |
| ShowDelay | `int?` | null | The wait in ms before the placeholder appears, so a fast response never flashes one. Pure CSS, so it also works under static SSR. |
| Size | `BitSize?` | null | The default line height and circle diameter. An explicit Height or Width wins over it. |
| Stagger | `int?` | null | The offset in ms between the animations of consecutive lines: line n starts at Delay + n * Stagger. |
| Styles | `BitShimmerClassStyles?` | null | Custom CSS styles for different parts of the BitShimmer. |
| Template | `RenderFragment?` | null | A custom skeleton built from shimmers of its own, replacing the default placeholder. ShowDelay still holds it back as one. |
| Width | `string?` | null | The width of the shimmer. Unlike Height it stays after the swap, so the placeholder and the content share a column. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitShimmerAnimation Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Wave | 0 | A highlight band sweeps across the placeholder from one side to the other, reversing with the direction of the page. |
| Pulse | 1 | The placeholder breathes between full and reduced opacity, which is cheaper to paint than the wave and calmer on a page full of placeholders. |
| Fade | 2 | The placeholder fades all the way out and back in, a heavier version of the pulse for a single placeholder that has to be noticed. |
| None | 3 | No animation at all: the placeholder is a static block of its Background, with no animated part left for Color to paint. |
### BitShape Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Rounded | 0 | The corner radius the current theme gives to this kind of surface, which is what most components draw unless something says otherwise. |
| Square | 1 | Sharp corners with no radius at all, for content that meets its container edge to edge. |
| Pill | 2 | Fully rounded ends, whatever the theme says: a pill where the box is wider than it is tall, and a circle where the box is square. |
| Circle | 3 | A true circle, which takes its diameter from whichever of the height and the width is set rather than leaving the proportions of the box alone. It is the only value that changes the size of what it draws. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### BitPoliteness Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Off | 0 | The region is not a live region: nothing in it is announced as it changes (aria-live="off"). |
| Polite | 1 | The change waits its turn and is announced once the screen reader has finished what it was saying (aria-live="polite"). |
| Assertive | 2 | The change interrupts the screen reader and is announced right away (aria-live="assertive"). |
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitShimmerClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitShimmer. |
| Content | `string?` | null | Custom CSS classes/styles for the content of the BitShimmer. The same box holds the content an Overlay covers. |
| Label | `string?` | null | Custom CSS classes/styles for the live region of the BitShimmer that carries its Label and LoadedLabel. It is rendered right after the root, not inside it, so a shimmer hidden by a stylesheet hides the region through these as well. |
| ShimmerWrapper | `string?` | null | Custom CSS classes/styles for the shimmer wrapper of the BitShimmer. A multi-line shimmer draws one wrapper per line, so these are applied to each of them. |
| Shimmer | `string?` | null | Custom CSS classes/styles for the shimmer of the BitShimmer, which is the animated part inside each wrapper and is not drawn at all when the animation is None. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-Shimmer-background` | --bit-clr-bg-sec | Resting color of the placeholder, which the animation plays over. The Background parameter wins over it. |
| `--bit-Shimmer-color` | --bit-clr-bg-ter | Color of the animated part: the wave band, or the block the pulse and the fade play on. The Color parameter wins over it. |
| `--bit-Shimmer-height` | spacing(4) | Height of a line. The Height and Size parameters win over it. |
| `--bit-Shimmer-circle-size` | --bit-siz-ctrl-md | Diameter of a circle. The Height and Size parameters win over it. |
| `--bit-Shimmer-radius` | --bit-shp-radius-surface | Corner of a Rounded placeholder. The Radius parameter and the Square and Pill shapes win over it. |
| `--bit-Shimmer-gap` | spacing(1) | Room between the lines of a stack. The Gap parameter wins over it. |
| `--bit-Shimmer-last-line-width` | 60% | Width of the last line of a stack. The LastLineWidth and LineWidths parameters win over it. |
| `--bit-Shimmer-animation-duration` | 1.6s x --bit-mot-loop-factor | One loop of the wave, the pulse or the fade. The Duration parameter wins over it. |
| `--bit-Shimmer-animation-delay` | 0.5s x --bit-mot-loop-factor | Pause before the first loop. The Delay and Stagger parameters win over it. |
## Examples
\n**Basic**:
```razor
```
\n**Lines**:
```razor
Content loaded successfully.
Fast response (300ms)
Just after the delay (1.2s)
Slow response (3s)
The response is in.
The response is in.
The response is in.
```
```csharp
private bool isDelayLoaded = true;
// Each click restarts the wait, so the delay of the click before it must not report the shimmer as loaded.
private CancellationTokenSource? delayCts;
private async Task SimulateLoading(int duration)
{
delayCts?.Cancel();
delayCts?.Dispose();
var cts = delayCts = new CancellationTokenSource();
isDelayLoaded = false;
StateHasChanged();
try
{
await Task.Delay(duration, cts.Token);
}
catch (OperationCanceledException)
{
return;
}
if (ReferenceEquals(cts, delayCts) is false) return;
isDelayLoaded = true;
}
```
\n**Overlay**:
```razor
Monthly revenue
$48,120
Up 12% on the previous month.
Monthly revenue
$48,120
Up 12% on the previous month.
Xafan Salina, Software Engineer.
```
\n**Style & Class**:
```razor
```
\n**RTL**:
```razor
```
The plan costs
Color
Background
```
\n**Size**:
```razor
Primary
Secondary
Tertiary
Info
Success
Warning
SevereWarning
Error
PrimaryBackground
SecondaryBackground (default Background)
TertiaryBackground (default Color)
PrimaryForeground
SecondaryForeground
TertiaryForeground
PrimaryBorder
SecondaryBorder
TertiaryBorder