Styled byLS Spinners
<SpinnerVortex></SpinnerVortex>
<SpinnerVortex [Square]="true"></SpinnerVortex>
With adaptive colors.
<SpinnerVortex [Adaptive]="true"></SpinnerVortex>
<SpinnerVortex [Adaptive]="true" [Square]="true"></SpinnerVortex>
Use the border spinners for a lightweight loading indicator
<SpinnerBorder></SpinnerBorder>
<SpinnerBorder [Adaptive]="true"></SpinnerBorder>
The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.
<SpinnerBorder class="Fg-red"></SpinnerBorder>
<SpinnerBorder class="Fg-orange"></SpinnerBorder>
<SpinnerBorder class="Fg-yellow"></SpinnerBorder>
<SpinnerBorder class="Fg-lime"></SpinnerBorder>
<SpinnerBorder class="Fg-blue"></SpinnerBorder>
<SpinnerBorder class="Fg-purple"></SpinnerBorder>
<SpinnerBorder class="Fg-magenta"></SpinnerBorder>
<SpinnerBorder class="Fg-pink"></SpinnerBorder>
<SpinnerBorder Color="orange"></SpinnerBorder>
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
<SpinnerGrow></SpinnerGrow>
<SpinnerGrow [Adaptive]="true"></SpinnerGrow>
Once again, this spinner is built with currentColor, so you can easily change its appearance with text color utilities.
<SpinnerGrow class="Fg-red"></SpinnerGrow>
<SpinnerGrow class="Fg-orange"></SpinnerGrow>
<SpinnerGrow class="Fg-yellow"></SpinnerGrow>
<SpinnerGrow class="Fg-lime"></SpinnerGrow>
<SpinnerGrow class="Fg-blue"></SpinnerGrow>
<SpinnerGrow class="Fg-purple"></SpinnerGrow>
<SpinnerGrow class="Fg-magenta"></SpinnerGrow>
<SpinnerGrow class="Fg-pink"></SpinnerGrow>
Use following code to align spinner center.
<div class="Text-center">
<SpinnerBorder [Adaptive]="true"></SpinnerBorder>
</div>
Add [Small]="true" to make a smaller spinner that can quickly be used within other components.
<SpinnerBorder [Adaptive]="true" [Small]="true"></SpinnerBorder>
<SpinnerGrow [Adaptive]="true" [Small]="true"></SpinnerGrow>
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
<button class="Btn Btn-primary" type="button" disabled>
<SpinnerBorder [Small]="true"></SpinnerBorder>
</button>
<button class="Btn Btn-primary" type="button" disabled>
<SpinnerBorder [Small]="true"></SpinnerBorder>
Loading...
</button>
<button class="Btn Btn-primary" type="button" disabled>
<SpinnerGrow [Small]="true"></SpinnerGrow>
</button>
<button class="Btn Btn-primary" type="button" disabled>
<SpinnerGrow [Small]="true"></SpinnerGrow>
Loading...
</button>
Need to assign ViewContainerRef first, for creating dynamic components through Service as below: constructor(private spinnerService: SpinnerService, private viewContainerRef: ViewContainerRef) {
this.spinnerService.ViewContainerRef = viewContainerRef;
}
Adaptive, Color and Small props work on Grow and Border types. Adaptive prop will change color to current theme's accent color if its true.
<button class="Btn Btn-primary"
(click)="Spinner(+Pattern, Overlay, Adaptive, ExpireIn, Color, Small)">
Show
</button>
Pattern = SpinnerPattern.Border;
ExpireIn = 4000;
Color = 'hsl(45,100%,51%)';
Overlay = false;
Adaptive = false;
Small = false;
constructor(private spinnerService: SpinnerService, private viewContainerRef: ViewContainerRef) {
this.spinnerService.ViewContainerRef = viewContainerRef;
}
Spinner(Pattern: SpinnerPattern, Overlay: boolean, Adaptive: boolean, expireIn: number,
Color: any = undefined, Small: boolean = false): void {
this.SpinnerId = this.spinnerService.Show(Pattern, Overlay, Adaptive, expireIn, Color, Small);
// setTimeout(() => this.spinnerService.Hide(this.SpinnerId), 5000);
}