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 @uiowa/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. var spinner = require("@uiowa/spinner")

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

@uiowa/spinner v6.0.2

(action-spinner) rotating circle spinner, used for actions such as button clicks. (loading-bar) beeping blocks, used for loading promises. (uiowa-ring) rotating golden and black spinner, used as loading indicator.

@uiowa/spinner

Build Status npm

DEMO

StackBlitz

This library only contains three components and doesn't have third party dependencies.

Components

  • action-spinner

    Rotating circles. Used for action promise or waiting for page rendering. Allow to set spinner size. By default, size is 1rem.

  • loading-bar

    Beeping blocks. Used for server side data loading. Allow to set spinner size. By default, size is 1rem.

  • uiowa-ring

    Rotating spinner with Golden and Black colors. Userd as loading indicator. Allow to set spinner size. By default, size is 4rem.

Usage

<div>
  <action-spinner></action-spinner>
</div>

<div>
  <action-spinner size="2"></action-spinner>
</div>

<div>
  <action-spinner size="9"></action-spinner>
</div>

<loading-bar>Loading...</loading-bar>

<loading-bar size="1.5">Loading...</loading-bar>

<div style="color:red;">
  <loading-bar size="2">
    <span style="font-size:2rem;">Validating ...</span>
  </loading-bar>
</div>

<h2>Title
  <action-spinner></action-spinner>
</h2>

<uiowa-ring></uiowa-ring>   // default size = 4rem
<uiowa-ring size="2"></uiowa-ring>

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

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