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