Amazing collection of Angular spinners components with pure css.
The Angular spinners are based on loading.io and from all over the web.
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
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.
Spinner | color: string | size: number |
---|---|---|
<circle-loader></circle-loader> |
#7f58af |
64 |
<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> |
#7f58af |
80 |
<ripple-loader></ripple-loader> |
#7f58af |
- |
<roller-loader></roller-loader> |
#7f58af |
- |
<spinner-loader></spinner-loader> |
#7f58af |
- |
<orbitals-loader></orbitals-loader> |
#7f58af |
- |
npm i --save ng-spinners
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
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.
You can see the components locally by cloning this repo and doing the following steps:
package.json
, run: npm install
.npm run start
. If you like to support my open-source contributions please star and share this project. 💫