Creating Animated Loading Spinner with Pure Javascript and CSS3 – Fast Spinner

Preview:

Description:

Fast Spinner is a simple and fast JS library for creating animated and highly customizable loading spinners for visualizing the loading progress. Animated with CSS3 animations, transforms and @keyframes.

How to use it:

Load the fast-spinner.css in the header and the fast-spinner.js in the footer.

<link rel="stylesheet" href="fast-spinner.css">
<script src="fast-spinner.js"></script>

Create an empty DIV element that will be served as the spinner container.

<div class="spinnerContainer" id="demo"></div>

The Javascript to create a basic loading spinner into the DIV container you just created.

var p1 = new fastSpinner({
    "id": "demo",
    "color": "red",
    "colorPattern": ["blue", "red", "green", "yellow"],
    "hide": false
});

Remove a loading spinner after a timeout.

setTimeout(function(){p1.remove()}, 5000);