1.0.2 • Published 3 years ago
@sunixzs/loading_animation v1.0.2
Loading Animation
Just another loading animation - a colored background with an rotating icon in the middle.
Use with JavaScript or TypeScript.
Install
npm -i @sunixzs/loading_animation
... or ...
yarn add @sunixzs/loading_animation
Use
const la = require("@sunixzs/loading_animation/dist");
const loadingAnimation = new la.LoadingAnimation(document.body);
loadingAnimation.show(); // let the show begin
loadingAnimation.hide(); // hide the loader but keeps the markup in place
loadingAnimation.remove(); // removes the loader
loadingAnimation.fadeOut(); // fade out the loader and remove() it
API
/**
* @param element HTMLElement to add the loading animation
* @param mode Either 'append' or 'replace' the content of element
* @param show Show loading animation while constructing (call show() after init)?
* @param styles Override some styles
* @param iconHtml Either '' to use the default icon or SVG-markup. Maybe import one of the SVG in ./icons/.
*/
constructor(
element: HTMLElement,
mode: string = "append",
show: boolean = false,
styles: any = {},
iconHtml: string = ""
)
Example with some options
const la = require("@sunixzs/loading_animation/dist");
const spinner = require("@sunixzs/loading_animation/icons/spinner");
const loadingAnimation = new la.LoadingAnimation(
document.body
"append",
true,
{
container: {
position: "fixed",
zIndex: 1066,
},
background: {
backgroundColor: "rgba(51,127,137,0.97)",
},
loader: {
backgroundColor: "#f5ead9",
},
animation: {
color: "#327f89",
},
},
spinner.ICON
);
window.setTimeout(function () {
loadingAnimation.fadeOut();
}, 1000);