A portable ES6 class for an attractive SVG loading element.
Here’s how to quickly get up and running with a JSephus element on your webpage.
Besides downloading the minified or standard library from the releases and serving it yourself, you can also make use of the jsDelivr CDN. For this,
add the following to the <head> in your html:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vankesteren/JSephus/JSephus.min.js"></script>
The parent element should be an SVG element. This can either be static on the page, generated by your own code, or by the static method JSephus.createSVG(). The result should look somewhat like this:
<div class="jsph-container">
<svg id="jsph-svg" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>
The element can then be loaded by instantiating a new class and calling the init() method. The class constructor asks for two parameters: the parent element or its html id and the desired number of circles.
var jsph = new JSephus("jsph-svg", 12);
jsph.init();
The result: a JSephus loading element!
Using the method setProperty() it’s possible to style the element to your heart’s content. Want to know which properties are available? Refer to the documentation.
JSephus is designed to interact with other code, so the variable jsph we created is directly linked to the element on the page. To update the loader, simply call the method setProgress(), with as its argument the proportion of progress obtained. JSephus does the rest. In fact, you can try the following code in the developer console right now and see the element we created earlier change!
jsph.setProgress(0.8);