https://github.com/vpotluri9/ng-spinner

light weight overlay loading spinner for angular 2+ apps
https://github.com/vpotluri9/ng-spinner

angular angular-apps angular2 angular4 loading loading-spinner spinner

Last synced: about 2 months ago
JSON representation

light weight overlay loading spinner for angular 2+ apps

• Host: GitHub
• URL: https://github.com/vpotluri9/ng-spinner
• Owner: vpotluri9
• License: mit
• Created: 2018-01-07T08:55:59.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T16:44:37.000Z (almost 2 years ago)
• Last Synced: 2024-11-10T11:25:58.378Z (about 2 months ago)
• Topics: angular, angular-apps, angular2, angular4, loading, loading-spinner, spinner
• Language: TypeScript
• Homepage:
• Size: 4.3 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Ng-spinner

This is a simple overlay spinner for Angular apps with perfectly centered spinner for all device sizes.

## Installation:

    npm install ng-spinner --save

## Versions: 

    v1.0.0 - Angular 5 |

    v6.0.0 - Angular 6 |

    v7.0.0 - Angular 7 |

    v8.0.0 - Angular 8 |

    v9.0.0 - Angular 9

## Set-Up:

    Import SpinnerModule in your app.module.ts file

    import { SpinnerModule } from 'ng-spinner';

    Add SpinnerModule to your imports in app.module.ts file

    imports: [

        BrowserModule,

        SpinnerModule

    ]

    The spinner is based on font-awesome 4.7. So, you need font awesome in your app.

    Install font-awesome

    npm install --save font-awesome

    if your application has styles.css file

        add font-awesome to styles in .angular-cli.json

        "styles": [

            "styles.css",

            "../node_modules/font-awesome/css/font-awesome.css"

        ]

    if your application has styles.scss file

        Create an empty file _variables.scss in src/.

        Add the following to _variables.scss:

        $fa-font-path : '../node_modules/font-awesome/fonts';

        In styles.scss add the following:

        @import 'variables';

        @import '../node_modules/font-awesome/scss/font-awesome';

## Usage:

    Tag: 

    When you want to start the spinner

        

    When you want to stop the spinner 

         

    When you want to display an overlay error symbol in place of spinner

        

    When you want to remove the overlay error symbol

        

## Best use case: 

    when you have an async call -> set the display variable to true and error variable false

    data successfully loaded -> set the display variable to false and error variable false

    if there is an error loading -> set the error variable to true and display variable to true

    if you want to remove the error symbol -> set the display variable to false

If you find any issues, you can report at 

https://github.com/vpotluri9/ng-spinner/issues

Happy Coding :)