These loading animations can be used in your HTML application.
Inside the root of your Node project run the following command.
npm i simple-loading-animation
These web components can be combined with any HTML from your own project.
In order to use them the animations need to be imported in your project. Inside your Javascript (or Typescript) file add the following line.
import 'simple-loading-animation/<name-of-the-loader>.js';
Now inside the HTML you can add the following element.
<name-of-the-loader></name-of-the-loader>
import 'simple-loading-animation/simple-loader.js';
<html>
...
<simple-loader></simple-loader>
...
</html>
The text
property can be used to show a string to the user while the loading process is commencing.
- Default value for this property is
Loading
.
import 'simple-loading-animation/simple-loader-with-text.js';
<html>
...
<simple-loader-text text="Loading"></simple-loader-text>
...
</html>
Using the following css, the loading animations will align inside the center of your screen.
.loading-state {
position: absolute;
top: 40%;
bottom: 0;
width: 100%;
text-align: center;
font-family: AvenirNextLTPro-Demi, Helvetica, Arial, sans-serif;
font-size: 18px;
color: #4d4d4d;
}
Don't forget to hide or remove the element again once the loading is done.
For Angular projects you will need to add the custom scheme to support web components.
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [ ... ],
imports: [ ... ],
providers: [ ... ],
bootstrap: [ ... ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})