Home

Awesome

Angular Spinners CSS Loaders (Vue, React)

bit components npm version GitHub stars code style: prettier GitHub license Twitter Follow

<p align="center"> <a href="https://bit.dev/joshk/ng-spinners"><img src="https://i.imagesup.co/images2/1990710a88808ee8914167c74f57e604c5ed91fe.gif"></a> </p>

Amazing collection of Angular spinners components with pure css.
The Angular spinners are based on loading.io and from all over the web.

Live Demo

Browse components and explore their props with Bit.
Install specific angular spinner component with npm, yarn or bit without having to install the whole project.
Install components and live demo

πŸš€ List of Spinners - Input and Default Property

Each component accepts a color prop, and few accepts also size prop.
The default color prop is #7f58af.
Component that accepts size prop have a default size in pixel.

Spinnercolor: stringsize: number
<circle-loader></circle-loader>#7f58af64
<default-loader></default-loader>#7f58af-
<dualring-loader></dualring-loader>#7f58af-
<ellipsis-loader></ellipsis-loader>#7f58af-
<facebook-loader></facebook-loader>#7f58af-
<grid-loader></grid-loader>#7f58af-
<heart-loader></heart-loader>#7f58af-
<hourglass-loader></hourglass-loader>#7f58af-
<ring-loader></ring-loader>#7f58af80
<ripple-loader></ripple-loader>#7f58af-
<roller-loader></roller-loader>#7f58af-
<spinner-loader></spinner-loader>#7f58af-
<orbitals-loader></orbitals-loader>#7f58af-

πŸ“¦ Installation

Using npm to install ng-spinners

npm i --save ng-spinners

Play and install spinners for Angular with Bit

Install specific Angular spinner component/module with bit, npm or yarn without having to install the whole project Using bit to play with live demo, and try the spinners before install.

set npm regisetry config(one time action):

npm config set '@bit:registry' https://node.bit.dev

and use your favorite package manager:

npm i @bit/joshk.ng-spinners.facebook-loader
yarn add @bit/joshk.ng-spinners.facebook-loader
bit import joshk.ng-spinners/facebook-loader 

πŸ’» Usage Examples

module file example:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
//using npm or yarn
import { FacebookLoaderModule } from 'ng-spinners';
//using bit
import { FacebookLoaderModule } from '@bit/joshk.ng-spinners.facebook-loader';

@NgModule({
	declarations: [
		AppComponent,
	],
	imports: [
		BrowserModule,
		FacebookLoaderModule
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

component html file example:

<facebook-loader color="black"></facebook-loader>
<facebook-loader color="#de3541"></facebook-loader>
<facebook-loader></facebook-loader>

Complete example of this component can be found here.

πŸ‘Ύ Development

You can see the components locally by cloning this repo and doing the following steps:

πŸ™Œ Contributing

πŸ‘πŸ» Support my open-source

If you like to support my open-source contributions please star and share this project. πŸ’«

πŸ“„ License

MIT