Author: | neulandagentur |
---|---|
Views Total: | 5,140 views |
Official Page: | Go to website |
Last Update: | October 3, 2019 |
License: | MIT |
Preview:

Description:
A minimal clean loader UI component to create a customizable, fullscreen, CSS3 animated indicator for any loading process.
How to use it:
1. Install and import the ui-preloader component.
# NPM $ npm install ui-preloader --save
import { init as UiPreloaderInit } from 'ui-preloader';
2. Or directly load the compiled JavaScript in the page.
<script src="js/dist/ui-preloader.js"></script>
3. Create an animated loading spinner using CSS/CSS3.
.preloader-js { display: inline-block; position: fixed; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); } .preloader-js div { box-sizing: border-box; display: block; position: absolute; width: 51px; height: 51px; margin: 10px; border: 10px solid black; border-radius: 50%; animation: preloader-js 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #00b0b9 transparent transparent transparent; } .preloader-js div:nth-child(1) { animation-delay: -0.45s; } .preloader-js div:nth-child(2) { animation-delay: -0.3s; } .preloader-js div:nth-child(3) { animation-delay: -0.15s; } @keyframes preloader-js { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
4. Style the fullscreen background overlay.
.preloader-js-container { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } .preloader-js-container .shadow { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); }
5. Initialize the UI preloader.
const uiPreloader = UiPreloader.init();
6. Show/hide the loading indicator.
uiPreloader.render(); uiPreloader.destroy();