Skip to content
Angular components for spinners
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
projects/uiowa/spinner
src
.editorconfig
.firebaserc
.gitignore
.travis.yml
README.md
angular.json
browserslist
firebase.json
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

@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 {}
You can’t perform that action at this time.