TextShimmer
SkeletonLoadingAI
BitTextShimmer is an animated text shimmer in which a bright gradient band sweeps across the text, ideal for AI thinking/loading states or progressive reveals. The effect is implemented in pure CSS (no JavaScript interop), so it works in every Blazor render mode, including static server-side rendering.
Notes
To use this component, you need to install the
Bit.BlazorUI.Extras
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 or use the ForceAnimation parameter.
Usage
Basic
Thinking about your question...
BitTextShimmer honors the reduced motion preference of the OS/browser (prefers-reduced-motion) by default
and renders a static, dim text instead of animating. The ForceAnimation parameter keeps the shimmer animating
regardless of that preference:
This shimmer keeps animating even in reduced motion mode
Element
Customize the root html element of the BitTextShimmer using the Element parameter:
A shimmering heading
An inline text shimmer in the middle of a sentence.
Duration & Spread
Customize the animation speed and the width of the bright band of the BitTextShimmer:
Slow and calm shimmer (4 seconds)
Fast and urgent shimmer (750 milliseconds)
A wide shimmer band
A narrow shimmer band
Color
Customize the resting and highlight colors of the BitTextShimmer:
An ocean colored shimmer
A golden colored shimmer
Content
Shimmer any content using ChildContent. Since the length of the content cannot be measured,
supply the ContentLength parameter to scale the shimmer band width:
Thinking really hard about it...
Style & Class
Use Style and Class to customize the BitTextShimmer:
A styled text shimmer
A classy text shimmer
RTL
Use BitTextShimmer in right-to-left (RTL):
در حال فکر کردن به سوال شما...
API
BitTextShimmer parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| BaseColor | string? | null | The resting/dim color of the text. When null, a theme-aware default color is used. |
| ChildContent | RenderFragment? | null | The content to shimmer, which takes precedence over the Text parameter. |
| ContentLength | int | 10 | The character count used to scale the shimmer band width when the content is supplied using ChildContent. |
| Duration | int? | null | The animation duration of one full shimmer sweep in ms. |
| Element | string? | null | The custom html element used for the root node. |
| ForceAnimation | bool | false | Keeps the shimmer animating even if the user has requested reduced motion (prefers-reduced-motion). |
| GradientColor | string? | null | The bright highlight color that sweeps across the text. When null, a theme-aware default color is used. |
| Spread | double | 2 | The shimmer band width multiplier. The effective band width (px) is Spread times the character count, so longer text gets a proportionally wider shine. |
| 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. |
| 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. |
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
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
- On this page