Go to Project on Github 

Angular Spinner Library

This library helps you with your loading spinner.

Why this spinner library?

  • Simple
  • Good defaults, yet customizable
  • Block and inline supported
  • When displayed inline, the spinner adapts to the font-size
  • Themable colors
  • Customizable animations
  • Works smoothly Internet Explorer, Safari, Chrome, Firefox and Opera

Installation

You can get the library with:

npm install @tsmean/spinner

In your app.module.ts use:

@NgModule({
declarations: [AppComponent],
imports: [
  ... // some other imports
  SpinnerModule.forRoot({})
]

And in your HTML:

<spinner></spinner>

This should result in:

Customization

While you can use this library out of the box, you might want to customize it.

Colors

You can define two colors for your spinner when you set up the app:

<spinner color="primary"></spinner>
<spinner color="secondary"></spinner>
SpinnerModule.forRoot({
  primaryColor: '#FCBE41',
  secondaryColor: '#309488'
})

You can also input a color directly into the spinner.

<spinner color="#ff0000"></spinner>

However, to stay consistent with your color scheme I'd recommend the other option.

If you don't specify a color, the spinner will detect the current font-color and use that:

Hello


<span style="color: #F728FC">Hello <spinner display="inline"></spinner></span>

Inline / Block

If you're waiting for a whole section to load, you usually want a large, centered, block format spinner:

<spinner></spinner>

If you're waiting for a button click to finish, you usually want an inline spinner matching the font-size and text color of the button:

<button style="background: #FCBE41; color: white">
  <span>Loading</span>
  <spinner display="inline"></spinner>
</button>

Animation

If the default spinner animation is too boring for you, simply use a different animation:

To set it globally (best for consistency across app):

SpinnerModule.forRoot({
  primaryColor: '#FCBE41',
  secondaryColor: '#309488',
  animation: 'spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite'
})

You can also set it locally for a single spinner:

<spinner [animation]="myAnimation" color="primary"></spinner>
where myAnimation is
spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite

Let's see another example:

<spinner [animation]="spin 1s ease-in-out infinite"></spinner>

Here, spin are spinner-internal css keyframes:

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Sizes

If you need to change the size of the spinner, that's also easy:

<spinner [size]="10"></spinner>
<spinner [size]="20"></spinner>
<spinner [size]="30"></spinner>

Go to Project on Github