Usage
The spinner component provides a visual loading indicator, commonly used to show ongoing processes.
<LumexSpinner />
Label
Add a label to the spinner to provide context about what is loading.
<LumexSpinner Label="Loading..." />
Sizes
Adjust the size of the spinner.
<div class="flex gap-4">
<LumexSpinner Size="@Size.Small" />
<LumexSpinner Size="@Size.Medium" />
<LumexSpinner Size="@Size.Large" />
</div>
Colors
Customize the spinner color.
<div class="flex gap-8">
<LumexSpinner Label="Default" LabelColor="@ThemeColor.Default" Color="@ThemeColor.Default" />
<LumexSpinner Label="Primary" LabelColor="@ThemeColor.Primary" Color="@ThemeColor.Primary" />
<LumexSpinner Label="Secondary" LabelColor="@ThemeColor.Secondary" Color="@ThemeColor.Secondary" />
<LumexSpinner Label="Success" LabelColor="@ThemeColor.Success" Color="@ThemeColor.Success" />
<LumexSpinner Label="Warning" LabelColor="@ThemeColor.Warning" Color="@ThemeColor.Warning" />
<LumexSpinner Label="Danger" LabelColor="@ThemeColor.Danger" Color="@ThemeColor.Danger" />
<LumexSpinner Label="Info" LabelColor="@ThemeColor.Info" Color="@ThemeColor.Info" />
</div>
Variants
Choose different spinner styles.
<div class="flex gap-8">
<LumexSpinner Variant="@SpinnerVariant.Ring" Label="Ring" />
<LumexSpinner Variant="@SpinnerVariant.Arc" Label="Arc" />
<LumexSpinner Variant="@SpinnerVariant.ArcGradient" Label="Arc Gradient" />
<LumexSpinner Variant="@SpinnerVariant.DotsWave" Label="Dots Wave" />
<LumexSpinner Variant="@SpinnerVariant.DotsFade" Label="Dots Fade" />
<LumexSpinner Variant="@SpinnerVariant.Classic" Label="Classic" />
</div>
Custom Styles
This component supports named slots that allow you to apply custom CSS to specific parts of the component.
- Base: The main container for the spinner component.
- Wrapper: The wrapper of the circles.
- Label: The label associated with the spinner.
- Circle1: The first animated circle in circular spinner variants.
- Circle2: The second animated circle in circular spinner variants.
- Dots: A set of animated dots used in dot-based spinner variants.
- Bars: A set of animated bars used in bar-based spinner variants.
You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:
Spinner
Class: The CSS class names to style the wrapper.Classes: The CSS class names to style the slots.
API
See the API references below for a complete guide to all the parameters available for the components mentioned here.