- bit BlazorUI
Home Docs

Shimmer

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 BitShimmer

Shapes
Explore different shapes of BitShimmer for varied visual effects.



Animations
Discover various animations of BitShimmer for dynamic effects.


IsDataLoaded
Utilize BitShimmer's IsDataLoaded feature, displaying content when data is loaded.

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:



Advanced
Explore advanced usage of BitShimmer, including template, content and nested shimmers.



Implementation

BitShimmer parameters
Name
Type
Default value
Description
Animation BitShimmerAnimation BitShimmerAnimation.Wave The animation of the shimmer
ChildContent RenderFragment? null Child content of component, the content that the shimmer will apply to.
Classes BitShimmerClassStyles? null Custom CSS classes for different parts of the BitShimmer.
Content RenderFragment? null Alias of ChildContent.
Height string? null The shimmer height value.
IsDataLoaded bool false Controls when the shimmer is swapped with actual data through an animated transition.
Shape BitShimmerShape BitShimmerShape.TopRight The shape of the shimmer.
ShimmerTemplate RenderFragment? null The template of the shimmer.
Styles BitShimmerClassStyles? null Custom CSS styles for different parts of the BitShimmer.
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.
BitShimmerAnimation enum
Name
Value
Description
Wave 0
Pulse 1
BitShimmerShape enum
Name
Value
Description
Line 0
Circle 1
Rectangle 2
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.