Welcome folks today in this blog post we will be showing the svg and css loading spinners
in browser using the spinners-angular
library in angular 14
using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleapp
cd sampleapp
And after that you need to install the below library using the below command as shown below
npm i spinners-angular
And after that you need to include the module
inside the app.module.ts
file as shown below
app.module.ts
1 2 3 4 5 |
import { SpinnersAngularModule } from 'spinners-angular'; @NgModule({ imports: [ SpinnersAngularModule ] }) |
Now we need to go to app.component.html
file and add the below html code as shown below
app.component.html
1 2 |
<sa-spinner-circular-split [size]="90" [thickness]="180" [speed]="106" color="#dd0031" secondaryColor="rgba(172, 57, 84, 0.75)" > </sa-spinner-circular-split> |
List of components
Properties
The following optional properties are available.
Property | Default value | Type | Description |
---|---|---|---|
size | 50 |
number or string | Set the size as number of pixels or any valid CSS string (e.g. size="100%" ). |
thickness | 100 |
number | Set lines width as a percentage of default thickness. |
сolor | '#38ad48' |
string | Set the color. Can be set to any valid CSS string (hex, rgb, rgba). |
secondaryColor | 'rgba(0,0,0,0.44)' |
string | Set the secondary color. Can be set to any valid CSS string (hex, rgb, rgba). |
speed | 100 |
number | Set the animation speed as a percentage of default speed. |
enabled | true |
boolean | Show/Hide the spinner. |
still | false |
boolean | Disable/Enable spinner animation. |
styles | undefined | object | Pass CSS styles to the root SVG element |