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, use the ForceAnimation parameter, or turn on the ForceAnimation toggle that appears at the top of this page while reduced motion is on.

ForceAnimation (whole page)

Usage

Basic

<BitTextShimmer Text="Thinking about your question..." />

<BitTextShimmer ForceAnimation Text="This shimmer keeps animating even in reduced motion mode" />

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

<BitTextShimmer Element="h1" Text="A shimmering heading" />

<div>An <BitTextShimmer Element="span" Text="inline text shimmer" /> in the middle of a sentence.</div>

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

<BitTextShimmer Duration="4000" Text="Slow and calm shimmer (4 seconds)" />

<BitTextShimmer Duration="750" Text="Fast and urgent shimmer (750 milliseconds)" />

<BitTextShimmer Spread="5" Text="A wide shimmer band" />

<BitTextShimmer Spread="0.5" Text="A narrow shimmer band" />

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

<BitTextShimmer BaseColor="#3f3f46" GradientColor="#22d3ee" Text="An ocean colored shimmer" />

<BitTextShimmer BaseColor="#92400e" GradientColor="#fbbf24" Text="A golden colored shimmer" />

Customize the resting and highlight colors of the BitTextShimmer:

An ocean colored shimmer

A golden colored shimmer

Content

<BitTextShimmer ContentLength="30">
    Thinking <strong>really</strong> hard about it...
</BitTextShimmer>

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

<style>
    .custom-class {
        font-size: 1.5rem;
        font-style: italic;
    }
</style>

<BitTextShimmer Style="font-size:2rem;font-weight:bold" Text="A styled text shimmer" />

<BitTextShimmer Class="custom-class" Text="A classy text shimmer" />

Use Style and Class to customize the BitTextShimmer:

A styled text shimmer

A classy text shimmer

RTL

<div dir="rtl">
    <BitTextShimmer Dir="BitDir.Rtl" Text="در حال فکر کردن به سوال شما..." />
</div>

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.
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.
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.

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.

Or you can review / edit this component on GitHub.