atom-spinner-loader
v1.0.2
Published
To be done
Downloads
5
Readme
- Atom-shaped, animated loading screen,
- Beautiful and elegant design!
- Easy to switch it on and off!
- Styling can be easily customized!
➤ Table of Contents
➤ Description
Atom spinner loader is a simple loading screen. You can implement it on your website to improve user's waiting time for response from the server.
➤ 0. Installation
Install the component...
npm install atom-spinner-loader...and import it afterwards
<script type="module" src="lib/index.js">
</script>...after that you can use it as an HTML tag
<atom-spinner-loader id="loader"></atom-spinner-loader>➤ 1. Switch it on and off
Atom spinner loader has a property "visible", which is a boolean. When it's true, the loader is visible, when it's false, it's not. Simply toggle it after you have fetched the needed data.
document.querySelector.getElementById("loader").visible = false;➤ 2. Customize styling
The color of spinning atom can be easily changed. In order to implement your own styling, all you need is to define the css variable mentioned in the example code below.
:host{
--atom-spinner-loader-color: pink;
}If you decide not to apply any styling, the module will fallback to the default styling, as in the demo.
➤ License
Licensed under MIT.