0.0.4 • Published 2 years ago
angular-bee-loading-spinners v0.0.4
AngularBeeLoadingSpinners
A set of loading spinners for Angular 13+ with lots of styling options
Getting Started
Instalation
Install via npm package manager
npm i angular-bee-loading-spinners
Usage
Import angular-bee-loading-spinners
import { AngularBeeLoadingSpinnersModule } from 'angular-bee-loading-spinners';
@NgModule({
imports: [ AngularBeeLoadingSpinnersModule,]
})In html with standard options
<bee-loading
[type]="//THE CHOSEN SPINNER TYPE"
[imageUrl]="//ONLY IF TYPE 6"
>
</bee-loading>In html with options declared
<bee-loading
[type]="1"
[speed]="2"
[color1]="'green'"
[color2]="'purple'"
[color3]="'blue'"
[thickness]="5"
[size]="5"
[lineStyle]="1"
>
</bee-loading>Types
| Type number | Description | Required properties | Optional Properties (See table below) | Image |
|---|---|---|---|---|
| 1 | Half circle spinner | none | size, thickness, color1, color2, color3, speed, lineStyle |  |
| 2 | Four color spinner | type | size, thickness, color1, color2, color3, color4, speed, lineStyle |  |
| 3 | Two color two cirle spinner | type | size, thickness, color1, color2, speed, lineStyle |  |
| 4 | Growing circle spinner | type | size, thickness, color1, color2, speed, lineStyle |  |
| 5 | Ying Yang | type | size, color1, color2, speed |  |
| 6 | Image Spinner | type, imageUrl | size, speed |  |
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| size | number | 5 | The size of the spinner in rem |
| thickness | number | 5 | The thickness of the lines in px |
| color1 | string | 'yellow' | Color 1 Can use any css color |
| color2 | string | 'orange' | Color 2 Can use any css color |
| color3 | string | 'red' | Color 3 Can use any css color |
| color4 | string | 'rgb(4, 120, 253)' | Color 4 Can use any css color |
| speed | number | 2 | The speed of the animation |
| lineStyle | number | 1 | The line style of spinner, Options are: 1 = solid, 2 = dotted, 3 = dashed, 4 = double, 5 = none (only useful on type 4) |
| imageUrl | string ' | none | Only used on type 6, Send a path to an image, eg company logo, to use as the spinner |
Notes
These spinners can be changed greatly by passing through different options, many different effects can be achieved with a bit of creativity. Enjoy!