Minimal Busy Indicator With JavaScript And CSS3

Preview:

Description:

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">
  <div></div>
</div>

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.

busyi.show();

Hide the busy indicator.

busyi.hide();