js-loading-overlay
Advanced tools
Easy and beautiful way to display loading overlay in your application.
JS loading overlay using awesome spinner from Load Awesome. It contains 52 spinner you can choose.
NPM
npm install --save js-loading-overlay
Yarn
yarn add js-loading-overlay
import 'js-loading-overlay'
JsLoadingOverlay.show({'spinnerIcon': 'triangle-skew-spin'});
or
<script src="js-loading-overlay.min.js"></script>
JsLoadingOverlay.show({'spinnerIcon': 'triangle-skew-spin'});
Ball Atom spinner. Set spinnerIcon in options to ball-atom. Name of the icon must
be lowercase and replace space with dash symbol (-).'overlayBackgroundColor': '#666666',
'overlayOpacity': 0.6,
'spinnerIcon': 'ball-circus',
'spinnerColor': '#000',
'spinnerSize': '3x',
'overlayIDName': 'overlay',
'spinnerIDName': 'spinner',
overlayBackgroundColor - overlay background color. Example: #000 or rgb(0, 0, 0)
overlayOpacity - opacity of the overlay. From 0 to 1.
spinnerColor - color of the spinner. Example: #000 or rgb(0, 0, 0)
spinnerSize - Available size: `small`, `default`, `2x`, `3x`
overlayIDName - ID of overlay div.
spinnerIDName - ID of spinner div.
ball-8bits
ball-atom
ball-beat
ball-circus
ball-climbing-dot
ball-clip-rotate
ball-clip-rotate-multiple
ball-clip-rotate-pulse
ball-elastic-dots
ball-fall
ball-fussion
ball-grid-beat
ball-grid-pulse
ball-newton-cradle
ball-pulse
ball-pulse-rise
ball-pulse-sync
ball-rotate
ball-running-dots
ball-scale
ball-scale-multiple
ball-scale-pulse
ball-scale-ripple
ball-scale-ripple-multiple
ball-spin
ball-spin-clockwise
ball-spin-clockwise-fade
ball-spin-clockwise-fade-rotating
ball-spin-fade
ball-spin-fade-rotating
ball-spin-rotate
ball-square-clockwise-spin
ball-square-spin
ball-triangle-path
ball-zig-zag
ball-zig-zag-deflect
cog
cube-transition
fire
line-scale
line-scale-party
line-scale-pulse-out
line-scale-pulse-out-rapid
line-spin-clockwise-fade
line-spin-clockwise-fade-rotating
line-spin-fade
line-spin-fade-rotating
pacman
square-jelly-box
square-loader
square-spin
timer
triangle-skew-spin
JsLoadingOverlay.show();
JsLoadingOverlay.show({
'overlayBackgroundColor': '#666666',
'overlayOpacity': 0.6,
'spinnerIcon': 'ball-atom',
'spinnerColor': '#000',
'spinnerSize': '2x',
'overlayIDName': 'overlay',
'spinnerIDName': 'spinner',
});
JsLoadingOverlay.hide();
1.0.1 - 2020-11-12
FAQs
Easy and beautiful way to display loading overlay in your application.
The npm package js-loading-overlay receives a total of 2,145 weekly downloads. As such, js-loading-overlay popularity was classified as popular.
We found that js-loading-overlay demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.