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!