Natural Potato Magnet

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published

    Angular Spinners CSS Loaders (Vue, React)

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

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

    • 💅No extra CSS imports
    • ✂️Zero dependencies
    • 📦Spinners can be installing separately

    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.

    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 -

    📦 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'

    and use your favorite package manager:

    npm i @bit/
    yarn add @bit/
    bit import 

    💻 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/';
        declarations: [
        imports: [
        providers: [],
        bootstrap: [AppComponent]
    export class AppModule { }

    component html file example:

    <facebook-loader color="black"></facebook-loader>
    <facebook-loader color="#de3541"></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:

    • Install dependencies from package.json, run: npm install.
    • Run the app in the development mode, run: npm run start.

    🙌 Contributing

    • Pull requests and ⭐ stars are always welcome.
    • For bugs and feature requests, please create an issue.

    👏🏻 Support my open-source

    If you like to support my open-source contributions please star and share this project. 💫

    📄 License



    npm i ng-spinners

    DownloadsWeekly Downloads






    Unpacked Size

    415 kB

    Total Files


    Last publish


    • joshk2