Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @accubits/spinner with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. require("tslib/package.json"); // tslib is a peer dependency. var spinner = require("@accubits/spinner")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@accubits/spinner v1.1.2

Spinner

A Library to easily create your own custom loaders for pages. The spinner allows create your own HTML and use the SpinnerService to control it in your whole project.

Demo

View the demo here

Installation

Install spinner via npm

$ npm install @accubits/spinner --save

Usage

Import SpinnerModule in in the root module:

// Import library module
import { SpinnerModule } from '@accubits/spinner';

@NgModule({
  imports: [
    // ...
    SpinnerModule
  ]
})
export class AppModule { }

Add SpinnerService where you want to use the spinner.

import { SpinnerService } from '@accubits/spinner';

class ExampleComponent implements OnInit {

  constructor(private spinner: SpinnerService) { }

  ngOnInit() {
    
    this.spinner.show();

    setTimeout(() => {
       
        this.spinner.hide();
    }, 3000);
  }
}

Now use in your template

<ab-spinner></ab-spinner>

Spinner Service

  • SpinnerService.show()
  • SpinnerService.hide()

Custom HTML

<ab-spinner type="custom">
  <p class="spinner">
    <img src="assets/images/loader.gif" />
    <span>LOADER....</span>
  </p>
</ab-spinner>

Additional Options

Go to GITHUB for more options

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free