This library helps you with your loading spinner.
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:
While you can use this library out of the box, you might want to customize it.
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>
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>
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); } }
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>