Home Docs

Shimmer
Skeleton

Shimmer is a temporary animation placeholder for when a service call takes time to return data and you don't want to block rendering the rest of the UI.

Usage

Basic
Explore the fundamental use of the BitShimmer.

<BitShimmer />
Size
The BitShimmer can be customized using the Height and Width parameters.

Height

Width
<BitShimmer Height="5rem" />
<BitShimmer Width="10rem" />
Circle
The BitShimmer can be rendered in Circle shape instead of a rectangle.


Height

Width
<BitShimmer Circle Height="3rem" />
<BitShimmer Circle Width="4rem" />
Animation
Discover various animation options of BitShimmer for different effects.


Wave (default)


Pulse
<BitShimmer Height="4rem" Duration="5000" Delay="1000" />

<BitStack Horizontal>
    <BitShimmer Pulse Circle Height="4rem" Duration="3000" Delay="1000" />
    <BitShimmer Pulse Height="4rem" Width="100%" Duration="3000" Delay="1000" />
</BitStack>
Loaded
Utilize BitShimmer's Loaded feature, displaying content when data is loaded.



<BitShimmer Loaded="@isDataLoaded" AriaLabel="Loading content" Height="1.5rem">
    Content loaded successfully.
</BitShimmer>

<BitToggleButton @bind-IsChecked="@isDataLoaded" Text="Toggle shimmer" />
@code {
    private bool isDataLoaded;
}
Advanced
Explore advanced usage of BitShimmer, including template, content and nested shimmers.




<BitShimmer Loaded="@isContentLoaded" AriaLabel="Loading content" Width="15rem" Height="unset">
    <Content>
        <BitImage Height="8rem" Alt="bit logo"
                  Src="/images/bit-logo-blue.png" />
        <br />
        <BitPersona PrimaryText="Annie Lindqvist"
                    SecondaryText="Software Engineer"
                    Size="@BitPersonaSize.Size56"
                    Presence="@BitPersonaPresence.Online"
                    ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png" />
    </Content>
    <Template>
        <BitShimmer Height="8rem" />
        <br />
        <BitStack Horizontal>
            <BitShimmer Circle Height="3.5rem" />
            <BitStack>
                <BitShimmer Height="1.25rem" Width="8.5rem" />
                <BitShimmer Height="0.75rem" Width="7rem" />
            </BitStack>
        </BitStack>
    </Template>
</BitShimmer>

<BitToggleButton @bind-IsChecked="@isContentLoaded" Text="Toggle shimmer" />
@code {
    private bool isContentLoaded;
}
Color
Customize the BitShimmer using different colors available in bit BlazorUI.


Primary

Secondary

Tertiary

Info

Success

Warning

SevereWarning

Error

PrimaryBackground

SecondaryBackground

TertiaryBackground (default)

PrimaryForeground

SecondaryForeground

TertiaryForeground

PrimaryBorder

SecondaryBorder

TertiaryBorder
<BitShimmer Height="1rem" Color="BitColor.Primary" />
<BitShimmer Height="1rem" Color="BitColor.Secondary" />
<BitShimmer Height="1rem" Color="BitColor.Tertiary" />
<BitShimmer Height="1rem" Color="BitColor.Info" />
<BitShimmer Height="1rem" Color="BitColor.Success" />
<BitShimmer Height="1rem" Color="BitColor.Warning" />
<BitShimmer Height="1rem" Color="BitColor.SevereWarning" />
<BitShimmer Height="1rem" Color="BitColor.Error" />
<BitShimmer Height="1rem" Color="BitColor.PrimaryBackground" />
<BitShimmer Height="1rem" Color="BitColor.SecondaryBackground" />
<BitShimmer Height="1rem" Color="BitColor.TertiaryBackground" />
<BitShimmer Height="1rem" Color="BitColor.PrimaryForeground" />
<BitShimmer Height="1rem" Color="BitColor.SecondaryForeground" />
<BitShimmer Height="1rem" Color="BitColor.TertiaryForeground" />
<BitShimmer Height="1rem" Color="BitColor.PrimaryBorder" />
<BitShimmer Height="1rem" Color="BitColor.SecondaryBorder" />
<BitShimmer Height="1rem" Color="BitColor.TertiaryBorder" />
BackgroundColor
Customize the BitShimmer using different colors available in bit BlazorUI.


Primary

Secondary

Tertiary

Info

Success

Warning

SevereWarning

Error

PrimaryBackground

SecondaryBackground (default)

TertiaryBackground

PrimaryForeground

SecondaryForeground

TertiaryForeground

PrimaryBorder

SecondaryBorder

TertiaryBorder
<BitShimmer Height="2rem" Background="BitColor.Primary" />
<BitShimmer Height="2rem" Background="BitColor.Secondary" />
<BitShimmer Height="2rem" Background="BitColor.Tertiary" />
<BitShimmer Height="2rem" Background="BitColor.Info" />
<BitShimmer Height="2rem" Background="BitColor.Success" />
<BitShimmer Height="2rem" Background="BitColor.Warning" />
<BitShimmer Height="2rem" Background="BitColor.SevereWarning" />
<BitShimmer Height="2rem" Background="BitColor.Error" />
<BitShimmer Height="2rem" Background="BitColor.PrimaryBackground" />
<BitShimmer Height="2rem" Background="BitColor.SecondaryBackground" />
<BitShimmer Height="2rem" Background="BitColor.TertiaryBackground" />
<BitShimmer Height="2rem" Background="BitColor.PrimaryForeground" />
<BitShimmer Height="2rem" Background="BitColor.SecondaryForeground" />
<BitShimmer Height="2rem" Background="BitColor.TertiaryForeground" />
<BitShimmer Height="2rem" Background="BitColor.PrimaryBorder" />
<BitShimmer Height="2rem" Background="BitColor.SecondaryBorder" />
<BitShimmer Height="2rem" Background="BitColor.TertiaryBorder" />
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


Component's Style & Class:






Styles & Classes:



<style>
    .custom-class {
        box-shadow: aqua 0 0 1rem 0.5rem;
    }

    .custom-root {
        text-shadow: aqua 0 0 0.5rem;
    }

    .custom-shimmer {
        background: linear-gradient(90deg, transparent, darkred, transparent);
    }

    .custom-wrapper {
        border: solid tomato;
        border-radius: 0.5rem;
    }
</style>


<BitShimmer Height="2.7rem" Style="border:2px solid gray" />
<BitShimmer Height="2.7rem" Class="custom-class" />

<BitShimmer Height="2.7rem" Styles="@(new() { Shimmer="background-color: darkgoldenrod;",
                                                ShimmerWrapper = "background-color: darkgoldenrod;" })" />
<BitShimmer Height="2.7rem" Classes="@(new() { Root = "custom-root",
                                                 Shimmer="custom-shimmer",
                                                 ShimmerWrapper = "custom-wrapper" })" />

API

BitShimmer parameters
Name
Type
Default value
Description
Background BitColor? null The background color of the container of the shimmer.
ChildContent RenderFragment? null The content that will be shown when the Loaded parameter changes to true.
Circle bool false Renders the shimmer as circle instead of a rectangle.
Classes BitShimmerClassStyles? null Custom CSS classes for different parts of the BitShimmer.
Color BitColor? null The color of the animated part of the shimmer.
Content RenderFragment? null Alias of ChildContent.
Delay int? null The animation delay value in ms.
Duration int? null The animation duration value in ms.
Height string? null The shimmer height value.
Loaded bool false Controls when the shimmer is swapped with actual data through an animated transition.
Pulse bool false Changes the animation type of the shimmer to pulse.
Styles BitShimmerClassStyles? null Custom CSS styles for different parts of the BitShimmer.
Template RenderFragment? null The custom template to replace the default shimmer container and animation.
Width string? null The shimmer width value.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitShimmerClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitShimmer.
Content string? null Custom CSS classes/styles for the content of the BitShimmer.
ShimmerWrapper string? null Custom CSS classes/styles for the shimmer wrapper of the BitShimmer.
Shimmer string? null Custom CSS classes/styles for the shimmer of the BitShimmer.
BitColor enum
Name
Value
Description
Primary 0 Info 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

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.
  • On this page