Loading progress animation

Loading progress indicator is used for displaying the loading animation (spinner) inside a target container using javascript api.
`awem.loadingAnim({ cont })` initializes a loading animation inside the given container (cont) and returns an animation api object with `start` and `stop` methods.

Loading animation inside a div

Loading animation target container

Using a div as the target container for the loading indicator.

LoadingProgress/Index.cshtml

<div class="btn-cont">
    <button id="btnStart" type="button" class="awe-btn">Start</button>
    <button id="btnStart3sec" type="button" class="awe-btn">Start for 3 seconds</button>
    <button id="btnStop" type="button" class="awe-btn">Stop</button>
</div>
<div id="loadingAnimCont1" class="o-flexf o-items-center o-justify-center" style="height: 200px; position: relative; font-size: large;">
    <p>Loading animation target container</p>
</div>
<script>
    $(function(){
        const cont = $('#loadingAnimCont1');
        let loadAnim;
        let timedAnim;

        const stop = () => {
            loadAnim?.stop();
            loadAnim = null;
        };

        const start = () => {
            if (loadAnim) return;
            loadAnim = awem.loadingAnim({ cont });
            loadAnim.start();
            return true;
        };

        $('#btnStart').on('click', start);

        $('#btnStart3sec').on('click', () => {
            if(timedAnim) return;

            timedAnim = awem.loadingAnim({cont});
            timedAnim.start();
            setTimeout(()=>{
                timedAnim.stop();
                timedAnim = null;
            }, 3000);
        });

        $('#btnStop').on('click', stop);
    });
</script>

Loading animation on the whole screen

Setting `body` as cont to cover the whole screen with the loading spinner animation.

LoadingProgress/Index.cshtml

<div class="btn-cont">
    <button class="awe-btn" type="button" id="btnStartBody5Sec">Start for 5 seconds</button>
</div>
<script>
    $(function(){
        $('#btnStartBody5Sec').on('click', () => {
            const loadAnim = awem.loadingAnim({ cont: $('body') });
            loadAnim.start();
            setTimeout(() => loadAnim.stop(), 5000);
        });
    });
</script>

Comments