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!