SVG Preloader with Javascript

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"