# TextShimmer
**Also known as:** ShinyText, Skeleton, Loading, AI
## Description
BitTextShimmer sweeps a bright band across a run of text - for AI thinking labels, loading messages and progressive reveals. It is pure CSS, so it works in every render mode including static SSR. The text stays real text for copying, find-in-page and screen readers, and falls back to a flat color under reduced motion, forced colors and print.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Alternate | `bool` | false | Sweeps the band back and forth across the text instead of always in the same direction. Reversed decides which of the two directions comes first. |
| Angle | `double?` | null | The tilt of the band in degrees, measured from upright. A positive angle leans the top of the band towards the end of the text in its reading direction, so a right-to-left shimmer is mirrored. Keep it within about 45 degrees either way; a value that is not a finite number is ignored. |
| BaseColor | `string?` | null | The resting/dim color of the text. When null, a theme-aware default color is used. It is the color the text is read in most of the time, so it is the one to check for contrast. |
| ChildContent | `RenderFragment?` | null | The content to shimmer, which takes precedence over the Text parameter. Its length cannot be measured, so the band is scaled by ContentLength (or sized by SpreadLength) instead. A part that should keep its own colors (an emoji), or that is transformed (a spinning icon), needs a fill of its own. |
| Color | `BitColor?` | null | The general color of the band that sweeps across the text, read from the theme. An explicit GradientColor wins over it, unless only a BitParams supplies it. |
| ContentLength | `int` | 10 | The character count used to scale the shimmer band width when the content is supplied using ChildContent (or when neither ChildContent nor Text is set). |
| Delay | `int?` | null | The delay before the first shimmer sweep starts in ms. The text rests in its base color until then. A negative value is treated as zero. |
| Duration | `int?` | null | The animation duration of one full shimmer sweep in ms - the band crossing the text and the rest before it enters again. When null, a two-second sweep is used. A negative value is treated as zero. |
| Element | `string?` | null | The custom html element used for the root node. The default is "p"; a value that is not a name a tag can have falls back to it. A void element (such as "br" or "img") holds no content, so neither Text nor ChildContent is rendered into it. |
| GradientColor | `string?` | null | The bright highlight color that sweeps across the text. When null, a theme-aware default color is used. It wins over Color. |
| Iterations | `int?` | null | The number of shimmer sweeps to play before the text comes to rest. When null (or below one), the shimmer sweeps forever. |
| Paused | `bool` | false | Holds the shimmer where it is instead of sweeping. The band stops wherever it had reached and carries on from there once this is turned off again. |
| PauseOnHover | `bool` | false | Holds the shimmer where it is while the pointer is over it or the focus is inside it. |
| RepeatDelay | `int?` | null | An extra pause between two shimmer sweeps in ms, which adds to the rest between them without changing the speed of the band. Without a Duration it is retuned by the theme along with the sweep. A negative value is treated as zero. |
| Reversed | `bool` | false | Sweeps the band against the reading direction. The band follows the reading direction by default, whether it comes from the Dir parameter or from the page around the shimmer. |
| Spread | `double?` | null | The shimmer band width multiplier. The effective spread of the band (px) - from its brightest point to each of its edges - is Spread times the character count (a multiplier of 2 when null), so longer text gets a proportionally wider shine. SpreadLength wins over it, unless only a BitParams supplies it; left null, --bit-TextShimmer-spread does too. |
| SpreadLength | `string?` | null | An explicit CSS length for the spread of the band, which replaces the one computed from Spread and the character count. A font-relative length (em, ch) follows the size of the text without counting its characters, which is also what a text wrapping over several lines needs. |
| Static | `bool` | false | Renders the text at rest in its base color, without the shimmer. Unlike Paused, it takes the band away altogether; turning it off starts the sweeps from the beginning. |
| Text | `string?` | null | The text to display, that is also used to scale the shimmer band width based on its character count. |
| 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. |
| 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
### 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. |
## 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.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-TextShimmer-base-color` | var(--bit-clr-fg-ter) | Resting color of the text. BaseColor wins over it. |
| `--bit-TextShimmer-gradient-color` | var(--bit-clr-fg-pri) | Color of the band. GradientColor and Color win over it. |
| `--bit-TextShimmer-spread` | 2px per character | Distance from the brightest point of the band to each edge; prefer a font-relative length (em, ch). SpreadLength and any Spread that is set win over it. |
| `--bit-TextShimmer-angle` | 0deg | Tilt of the band from upright, mirrored in RTL. Angle wins over it. |
| `--bit-TextShimmer-duration` | calc(2000ms * var(--bit-mot-loop-factor)) | Length of one sweep. Duration wins over it. |
| `--bit-TextShimmer-delay` | 0ms | Pause before the first sweep. Delay wins over it. |
| `--bit-TextShimmer-repeat-delay` | 0ms | Extra rest between two sweeps, stretched by the loop factor along with the default sweep unless a duration is set. RepeatDelay wins over it. |
| `--bit-TextShimmer-iterations` | infinite | Number of sweeps before the text comes to rest. Iterations wins over it. |
| `--bit-TextShimmer-disabled-opacity` | var(--bit-opa-dis) | Opacity of a shimmer whose Disabled is true. |
## Examples
\n**Basic**:
```razor
```
\n**Band**:
```razor
Thinking really hard about it...
✨ Generating a summary...
```
\n**Timing**:
```razor
Replay
Ask a question
```
```csharp
private bool pauseAll;
private BitTextShimmerParams[] shimmerParams => [new() { Duration = 3000, RepeatDelay = 1000, SpreadLength = "3em", Paused = pauseAll }];
```
\n**Color**:
```razor
An