# Loading
## Description
A family of eighteen loading animations - spinners, dots, bars and shapes - that all share the same API. Each one is pure CSS: a theme color or a custom one, three sizes or a size in pixels, a stroke thickness for the ones drawn with a line, an optional label on any of the four sides, a speed multiplier, a pause, a delay that keeps a loader from flashing up for work that turns out to be quick, and a live region so the wait is announced rather than only drawn.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AriaLive | `string?` | null | How insistently the live region of the loading component announces itself, rendered as the aria-live attribute of the root element. Falls back to "polite". |
| Classes | `BitLoadingClassStyles?` | null | Custom CSS classes for different parts of the loading component. |
| Color | `BitColor?` | null | The general color of the loading component. |
| CustomColor | `string?` | null | The custom css color of the loading component. Only applies while Color is left unset. |
| CustomSize | `int?` | null | The custom size of the loading component in px. Only applies while Size is left unset. |
| Delay | `int` | 0 | How long, in milliseconds, the loading component waits before it shows anything, so that a quick task never makes it flash up and vanish again. Changing the value opens the window again from the new length. |
| Inline | `bool` | false | Lays the loading component out as an inline box aligned to the middle of the current line, so it can sit inside a sentence, a button or a table cell. |
| Label | `string?` | null | The text content of the label of the loading component, which is also what assistive technology announces. |
| LabelPosition | `BitLabelPosition?` | null | The position of the label of the loading component. |
| LabelTemplate | `RenderFragment?` | null | The custom content of the label of the loading component. |
| Paused | `bool` | false | Holds the animation of the loading component at the frame it had reached instead of running it. The drawing keeps its shape and its place in the layout, so only the movement stops. |
| Role | `string?` | null | The ARIA role of the root element of the loading component. Falls back to "status", which makes the root a live region. |
| Size | `BitSize?` | null | The Size of the loading component. |
| Speed | `double?` | null | How fast the animation runs, as a multiplier of its normal speed: 2 is twice as fast, 0.5 half as fast. Zero and negative values are ignored. |
| Styles | `BitLoadingClassStyles?` | null | Custom CSS styles for different parts of the loading component. |
| Thickness | `int?` | null | The thickness, in px, of the stroke the loading component is drawn with. Only the loaders drawn with a stroke read it - BitRingLoading, BitDualRingLoading, BitRippleLoading, BitXboxLoading and BitSpinnerLoading - and it does not scale with Size. Zero and negative values are ignored. |
| 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. |
## 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. |
## Enums
### 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. |
### BitLabelPosition Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Top | 0 | The label shows above the animation. |
| End | 1 | The label shows at the end side of the animation, which follows the direction of the writing. |
| Bottom | 2 | The label shows below the animation. |
| Start | 3 | The label shows at the start side of the animation, which follows the direction of the writing. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size, which renders a 40px loading component. |
| Medium | 1 | The medium size, which renders a 64px loading component. |
| Large | 2 | The large size, which renders an 88px loading 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. |
## Sub Classes
### BitLoadingClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitLoading components. |
| Container | `string?` | null | Custom CSS classes/styles for the child container of the BitLoading components. |
| Child | `string?` | null | Custom CSS classes/styles for the child element(s) of the BitLoading components. |
| Label | `string?` | null | Custom CSS classes/styles for the label of the BitLoading components. |
| ScreenReaderText | `string?` | null | Custom CSS classes/styles for the visually hidden text a labelless BitLoading component announces to assistive technology. |
## Examples
\n**Basic**:
```razor
Restoring your session
```
\n**Speed**:
```razor
Run a 1.5s task
@if (_isWorking)
{
```
\n**Accessibility**:
```razor
@* role="status" aria-live="polite" and a visually hidden "Loading" by default. *@
Loading
Fetching the latest results