Minimal Busy Indicator With JavaScript And CSS3

Category: Javascript , Loading | August 12, 2016
Views Total:7,306 views
Official Page:Go to website
Last Update:August 12, 2016


Minimal Busy Indicator With JavaScript And CSS3


A vanilla JavaScript library that uses CSS3 to create an animated loading spinner / busy indicator while loading something into your webpage.

How to use it:

Load the following JS and CSS files into the webpage.

<link rel="stylesheet" href="busy_indicator.css">
<script src="busy_indicator.js" type="text/javascript">

The html structure for the busy indicator.

<div id="busybox" class="bg">

Style the background overlay when the busy indicator is active.

.bg {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 100;
  background-color: rgba(30, 30, 30, 0.5);

Initialize the busy indicator.

busyi = new busy_indicator(document.getElementById("busybox"),
document.querySelector("#busybox div"));

Show the busy indicator.;

Hide the busy indicator.


You Might Be Interested In:

Leave a Reply