simple-loading-animation
v0.2.0
Published
A library for inserting a simple HTML loading animation
Readme
Simple loading animation
These loading animations can be used in your HTML application.
Installation
Inside the root of your Node project run the following command.
npm i simple-loading-animationUsage
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>Examples
Default loading animation
import 'simple-loading-animation/simple-loader.js';<html>
...
<simple-loader></simple-loader>
...
</html>Loading animation with text
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>CSS
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.
Notes
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 ]
})