Rotating Loading Spinner In JavaScript – ZlataLoader.js

ZlataLoader.js is a minimal JavaScript library to create animated loaders that rotate a loading spinner of your choice along a circle.

How to use it:

Create a placeholder element for the loader.

<div id="loader-demo"></div>

Insert the JavaScript file ‘ZlataLoader.js’ into the document.

<script src="ZlataLoader.js"></script>

Initialize the ZlataLoader and specify the image path to the loading spinner you prefer.

new ZlataLoader({
   id: 'loader-demo',
   imgSrc: "plane.png"
});

More options to customize the loader.

new ZlataLoader({
    // border radius
    radius: 50,
    // line width
    lineWidth: 1,
    // single, double, picture
    mode: 'picture',
    // line color
    lineColor: "#fff",
    // image size
    imageWidth: 64,
    
    // speed parameter. 
    // if positive motion will be clockwise
    speed: -1
    
});