Extras
TextShimmer
Bit.BlazorUI.ExtrasShinyTextSkeletonLoadingAI
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.
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.
BitTextShimmer honors the reduced motion preference (prefers-reduced-motion) and shows the text at rest instead.
If the band does not sweep, turn off reduced motion or use the ForceAnimation toggle at the top of this page.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Give it a Text: a band sweeps across it in the reading direction, scaled to the length of the text.
ForceAnimation keeps it moving under reduced motion - reserve it for motion that carries a meaning.
Thinking about your question...
This shimmer keeps animating even in reduced motion mode
Element
Renders a p by default. Element picks another tag: a heading, or a span inside a sentence or a button.
The font is inherited, so inside a BitText the shimmer takes the typography of the theme.
A shimmering heading
An inline text shimmer in the middle of a sentence.
A heading in the typography of the theme
Band
Spread is the half-width of the band in px per character (2 by default): wider is a soft glow, narrower a crisp
glint. SpreadLength replaces it with any CSS length; a font-relative one (em, ch) looks alike at every
font size. Angle tilts the band in degrees - keep it within about 45 either way.
A wide shimmer band
A narrow shimmer band
A band two ems wide
A band tilted by 25 degrees
A band tilted by -25 degrees
Content
ChildContent shimmers any markup and wins over Text. Its length cannot be measured, so set
ContentLength (10 by default) or a font-relative SpreadLength.
A part that keeps its own colors (an emoji) or is transformed (a spinning icon) needs
-webkit-text-fill-color: currentcolor.
Thinking really hard about it...
Searching the docs for an answer...
✨ Generating a summary...
Timing
Duration is one sweep in ms (2000 by default). RepeatDelay rests between sweeps without changing the speed
of the band - calmer for a long wait. Delay postpones the first sweep; staggered, it turns a list into one wave.
Slow and calm shimmer (4 seconds)
Fast and urgent shimmer (750 milliseconds)
A sweep, then an extra two seconds of rest
Reading the question...
Searching the knowledge base...
Drafting an answer...
Direction & iterations
Reversed sweeps against the reading direction, Alternate back and forth. Iterations plays a set
number of sweeps and then rests - a single sweep is a reveal rather than a waiting state.
Against the reading direction
Back and forth
Revealed with a single sweep
Three sweeps, then at rest
Playback
Paused freezes the band where it is and resumes from there. PauseOnHover freezes it under the pointer or the
focus, so it holds still for whoever is reading it. Static takes the band away - the finished state. A disabled
shimmer rests too, dimmed.
Pause me and resume me
Hover over me to pause the sweep
Stop me and start me again
A disabled shimmer
Thinking status
An AI assistant pattern. Attributes that are not parameters are splatted onto the element, so role="status" makes
it a polite live region; Static stops the band once the answer is in, and the same
region announces it.
Ask a question to see the assistant think.
Cascading parameters
BitParams with a BitTextShimmerParams sets the defaults of every shimmer inside it, and a parameter of the
shimmer itself still wins. A cascaded Paused is one "pause animations" switch for a whole region (WCAG 2.2.2).
Reading the question...
Searching the knowledge base...
Drafting an answer (its own Duration)...
Color
Color paints the band in a theme color while the text rests in the dim foreground of the theme. BaseColor
and GradientColor take any CSS color, and GradientColor wins over Color. Check BaseColor for
contrast: it is what the text is read in.
Primary
Secondary
Tertiary
Info
Success
Warning
SevereWarning
Error
An ocean colored shimmer
A golden colored shimmer
Style & Class
Style and Class style the root. The public --bit-TextShimmer-* variables inherit, so setting them on
:root, a container or a class restyles every shimmer below it; a parameter of the shimmer itself wins over them.
A styled text shimmer
A classy text shimmer
Restyled by the variables of its container
Its own GradientColor wins
RTL
In right-to-left text the band sweeps from right to left - whether the direction comes from Dir or from a
dir attribute around it - and a tilted band is mirrored with it.
در حال فکر کردن به سوال شما...
در حال جستجو در مستندات...
نواری که ۲۵ درجه کج شده است
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitTextShimmer CSS variables
| 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. |
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, 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. |
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. |
| 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. |
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.