atom-spinner-loader v1.0.2

• 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
• ➤ 0. Installation
• ➤ 1. Switch it on and off
• ➤ 2. Customize styling
• ➤ License

➤ 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.