Loading.html

<link rel="stylesheet" href="Loading.css" />

<script>
    require(['jquery', 'EasyWebApp'],  function ($, EWA) {

        EWA.component(function () {

            var VM = this, fallback;

            var Load_Cover = this.$_View.children('div').on(
                    'transitionend webkitTransitionEnd',  hide
                )[0];

            function hide() {

                if (! VM.count)  Load_Cover.style.display = 'none';

                if (fallback != null)  clearTimeout( fallback );
            }

            var duration = parseFloat(
                    $( Load_Cover ).css('transition-duration')
                );

            $( document ).on('ajaxSend',  function () {

                if (! VM.count)  Load_Cover.style.display = '';

                VM.count++ ;

            }).on('ajaxSuccess',  function () {

                if ((VM.count > 0)  &&  (--VM.count === 0))
                    fallback = $.wait(duration, hide);
            });

            return  {count: 0};
        });
    });
</script>

<div class="loading ${view.count ? 'active' : ''}">
    <div class="loader">
        <div class="ball-spin-fade-loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="ball-scale-multiple">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="loading_content">loading...</div>
    </div>
</div>