Extras
TextShimmer
Bit.BlazorUI.ExtrasShinyTextSkeletonLoadingAI
BitTextShimmer sweeps a bright gradient band across a run of text - the signal an AI thinking label, a loading message or a progressive reveal needs. The band is scaled to the text and follows its reading direction, and it can be retimed, delayed, rested between sweeps, played a set number of times, tilted, reversed, paused, colored from the theme and stopped once the work is over. It is pure CSS with no JavaScript interop, 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 wherever the shimmer cannot or should not be painted.
Notes
To use this component, you need to install the Bit.BlazorUI.Extras(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.
By default, BitTextShimmer honors the reduced motion preference of the OS/browser (prefers-reduced-motion) and shows a static, dim text instead of animating. If you don't see the shimmer sweep, either disable the reduce motion setting, use the ForceAnimation parameter, or turn on the ForceAnimation toggle that appears at the top of this page while reduced motion is on.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Give the shimmer its Text and a band of the highlight color sweeps across it, in the direction the text is read, over a
dim resting color. The band is scaled to the length of the text, it crosses the text in the middle of each two-second sweep and
leaves it in its resting color at both ends, so the text never starts or stops with a band stuck on its first letters.
The shimmer is a paint effect only: the characters are real text, so they are copied, found by a find-in-page and read out by a screen reader exactly as they are written.
The shimmer honors the reduced motion preference of the OS/browser and shows the text in its resting color instead of animating. ForceAnimation keeps it animating regardless - reserve it for a shimmer whose motion carries a meaning that is lost without it.
The shimmer is a paint effect only: the characters are real text, so they are copied, found by a find-in-page and read out by a screen reader exactly as they are written.
The shimmer honors the reduced motion preference of the OS/browser and shows the text in its resting color instead of animating. ForceAnimation keeps it animating regardless - reserve it for a shimmer whose motion carries a meaning that is lost without it.
Thinking about your question...
This shimmer keeps animating even in reduced motion mode
Element
The shimmer renders a p by default. Element picks any other tag: a heading tag for a shimmering heading, or a
span for a shimmer inside a sentence, a button or anything else that only accepts phrasing content, where a p is
invalid markup. The root is laid out as an inline block either way, so the band sweeps across the width of the text rather than
the width of its container.
A value that is not a name a tag can have falls back to the default tag. A void element (such as br or img) is a valid name and is kept, but it is defined to hold no content, so neither Text nor ChildContent is rendered into it: a shimmer that shows text needs a non-void element.
A value that is not a name a tag can have falls back to the default tag. A void element (such as br or img) is a valid name and is kept, but it is defined to hold no content, so neither Text nor ChildContent is rendered into it: a shimmer that shows text needs a non-void element.
A shimmering heading
An inline text shimmer in the middle of a sentence.
Spread
Spread is how far the band reaches from its brightest point to each of its edges, as a multiplier of the character count
of the text (2 by default, in px per character), so a longer text gets a proportionally wider band. A larger value gives a soft,
wide glow; a smaller one a crisp, narrow glint.
SpreadLength replaces that computation with an explicit CSS length. A font-relative one (em, ch) follows the size of the text without counting its characters, so the same shimmer looks alike in a heading and in a caption.
SpreadLength replaces that computation with an explicit CSS length. A font-relative one (em, ch) follows the size of the text without counting its characters, so the same shimmer looks alike in a heading and in a caption.
A wide shimmer band
A narrow shimmer band
A band two ems wide
A band two ems wide
Content
Shimmer any content using ChildContent, which takes precedence over Text. Every glyph of the content shimmers as
one run - the markup and the font icons inside it included - while an SVG drawn in the current color keeps the resting color.
The length of the content cannot be measured, so supply ContentLength - the character count to scale the band by, 10 by default - or give the band a font-relative SpreadLength that needs no count at all.
An emoji is painted by the band too, as a silhouette of it. Give it a fill of its own (-webkit-text-fill-color: currentcolor) to keep its colors - which is also what a transformed part of the content, such as a spinning icon, needs to be painted at all.
The length of the content cannot be measured, so supply ContentLength - the character count to scale the band by, 10 by default - or give the band a font-relative SpreadLength that needs no count at all.
An emoji is painted by the band too, as a silhouette of it. Give it a fill of its own (-webkit-text-fill-color: currentcolor) to keep its colors - which is also what a transformed part of the content, such as a spinning icon, needs to be painted at all.
Thinking really hard about it...
Searching the docs for an answer...
✨ Generating a summary...
Timing
Duration is the length of one sweep in milliseconds - the band crossing the text and the rest before it enters again,
which take about half of it each. A slow sweep reads as calm, a fast one as urgent.
RepeatDelay adds to that rest without changing the speed of the band, which is what keeps a label that stays on screen for a long while from reading as a blinking one.
Delay postpones the first sweep. Giving each shimmer of a list a slightly later start than the one before it turns many shimmers blinking at once into one wave running down the list.
RepeatDelay adds to that rest without changing the speed of the band, which is what keeps a label that stays on screen for a long while from reading as a blinking one.
Delay postpones the first sweep. Giving each shimmer of a list a slightly later start than the one before it turns many shimmers blinking at once into one wave running down the list.
Slow and calm shimmer (4 seconds)
Fast and urgent shimmer (750 milliseconds)
A sweep, then an extra two seconds of rest
Staggered with Delay:
Reading the question...
Searching the knowledge base...
Drafting an answer...
Direction
The band follows the reading direction of the text: left to right, and right to left in right-to-left text. Reversed
turns it against the reading direction, and Alternate sweeps it back and forth, with Reversed deciding which way
the first sweep runs.
Following the reading direction (default)
Against the reading direction
Back and forth
Angle
Angle tilts the band, in degrees from upright. A positive angle leans its top towards the end of the text in its reading
direction, a negative one towards its start - so a right-to-left shimmer is tilted as the mirror image of a left-to-right one. A
tilted band reads as a light catching the text rather than a scan passing over it; keep it within about 45 degrees either way,
since the sweep stops reading as one as the band approaches a quarter turn.
A band tilted by 25 degrees
A band tilted by -25 degrees
Iterations
The shimmer sweeps forever by default, which says that something is still going on. Iterations plays a set number of
sweeps instead and then leaves the text at rest - a single sweep is a progressive reveal, an entrance for a heading or a freshly
arrived answer rather than a waiting state.
Revealed with a single sweep
Three sweeps, then at rest
Playback
Paused holds the band wherever it happens to be and carries on from there once it is turned off, so the text never jumps.
PauseOnHover does the same while the pointer is over the shimmer or the focus is inside it, which gives a reader who is
trying to read the text a way to stop it.
Static takes the band away altogether and leaves the plain text in its resting color - the finished state of a label that stays on the page once the work is over; turning it off starts the sweeps again from the beginning. A disabled shimmer (IsEnabled="false") is at rest as well, and dimmed.
Static takes the band away altogether and leaves the plain text in its resting color - the finished state of a label that stays on the page once the work is over; turning it off starts the sweeps again from the beginning. A disabled shimmer (IsEnabled="false") is at rest as well, and dimmed.
Pause me and resume me
Hover over me to pause the sweep
Stop me and start me again
A disabled shimmer
Thinking status
A practical AI assistant example. While the answer is on its way the shimmer is the message, so it is announced to screen
readers as a polite live region: anything that is not a parameter - here a role of status - is splatted onto the
rendered element. Once the answer is in, Static stops the band and the same element carries
the finished text, so the announcement lands in the region the reader was already told about.
A calm RepeatDelay keeps a wait that runs long from turning into a distraction.
A calm RepeatDelay keeps a wait that runs long from turning into a distraction.
Ask a question to see the assistant think.
Color
Color paints the band in one of the general colors of the theme, so it follows the preset and the color scheme of the page.
The resting color stays the dim foreground of the theme, which keeps the text readable whichever color sweeps across it.
BaseColor and GradientColor take any CSS color for the resting text and the band, and the explicit GradientColor wins over Color. The resting color is what the text is read in most of the time, so it is the one to check for contrast.
BaseColor and GradientColor take any CSS color for the resting text and the band, and the explicit GradientColor wins over Color. The resting color is what the text is read in most of the time, so it is the one to check for contrast.
Primary
Secondary
Tertiary
Info
Success
Warning
SevereWarning
Error
Custom colors:
An ocean colored shimmer
A golden colored shimmer
Style & Class
Use Style and Class to customize the root element of the shimmer - its font, its size, its weight. The shimmer
also reads a set of custom properties that a class or a style can set directly, which is how one class restyles every shimmer
of an app: --bit-tsh-base-clr and --bit-tsh-gradient-clr for its colors, --bit-tsh-duration,
--bit-tsh-delay, --bit-tsh-repeat-delay and --bit-tsh-iterations for its timing, and --bit-tsh-angle for its tilt. A value set by a
parameter is written inline and wins over the one a class sets - and so does the spread of the band, which is always written
inline, so it is set with SpreadLength or Style instead.
A styled text shimmer
A classy text shimmer
A band colored through a custom property
RTL
Use BitTextShimmer in right-to-left (RTL). The band follows the reading direction, so it sweeps from right to left - whether the
direction comes from the Dir parameter or from a dir attribute on the page around it - and a tilted band is
mirrored along with it.
در حال فکر کردن به سوال شما...
در حال جستجو در مستندات...
نواری که ۲۵ درجه کج شده است
API
Every parameter, public member, sub-class and enum this component exposes.
BitTextShimmer 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. |
| 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 | 2 | 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, so longer text gets a proportionally wider shine. SpreadLength wins over it. |
| 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. |
| 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. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| 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. |
| 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. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| 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. |
BitComponentBase 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. |
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. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.