I am currently working on a CRM that will be including a feature to display statistics on a large screen.
A feature I proposed was a nice animated timer to display when each module would update.
This timer should be dynamic and should have the ability to have easy set parameters; update time, color, etc...
So anyways, this is what I came up with: SVG-Preloader GitHub Repo.
Basic usage is quite simple:
<script> window.onload = function() { pieLoader.init(document.getElementById('target')); }; </script> <div class="container"> <div id="target"></div> </div>
The program inherits width and height of the id="target" tag
To change the color:
window.onload = function() { pieLoader.init(document.getElementById('target'),10,{'fill':'#ff0000'}); };
It's possible to have multiple loaders running with different timeouts using the same class:
<script> window.onload = function() { let x = 10; let ts = document.getElementsByClassName('target'); for(let t in ts) { if (ts.hasOwnProperty(t)) { pieLoader.init(ts[t],x); x+=10; } } }; </script> <ul> <li> <div class="container"> <div class="target"> </div> <span>10 sec</span> </div> </li> <li> <div class="container"> <div class="target"> </div> <span>20 sec</span> </div> </li> <li> <div class="container"> <div class="target"> </div> <span>30 sec</span> </div> </li> <li> <div class="container"> <div class="target"> </div> <span>40 sec</span> </div> </li> <li> <div class="container"> <div class="target"> </div> <span>50 sec</span> </div> </li> <li> <div class="container"> <div class="target"> </div> <span>60 sec</span> </div> </li> </ul>
It's also possible to run a callback when the operation is complete. This is more or less the whole point of this project. Otherwise, I would likely just use a simple GIF.
Here an example of how this might be implemented.
/** * gathers input from the form, validates, then calls the timer and subsequent callback * @returns {Boolean} */ function runTimer() { let s = parseInt(document.getElementById('howlong').value); if (isNaN(s)) { alert("Please select a time range from 10 - 60 seconds"); return false; } if (s < 10 || s > 60) { alert("Please select a time range from 10 - 60 seconds"); return false; } let n = document.getElementById('yourname').value; if (n.trim() == '') { alert("please enter your name"); return false; } /** * Here is where the program is called * */ pieLoader.init(document.getElementById('target'),s,{},callBack,{name:n}); return true; } /** * this is the function that is acalled by the program after the timer has looped once (the callback) * @param {Object} * @returns {Void} */ function callBack(args) { document.getElementById('target').innerHTML = ''; alert('Hello '+args.name+'. The timer has finished'); }
To see the callback in action fill the form below and click "Run Timer"