jalescardoso/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
    <div class="loader">
        <div class="bar"></div>
    </div>
    <your-application></your-application>
</body>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    @keyframes loader-animation {
        0% {
            width: 0%;
        }
        49% {
            width: 100%;
            left: 0%
        }
        50% {
            left: 100%;
            width: 0;
        }
        100% {
            left: 0%;
            width: 100%
        }
    }

    .loader {
        height: 5px;
        width: 100%;
        z-index: 2147483647;
        position: fixed;
    }

    .loader .bar {
        position: absolute;
        height: 5px;
        background-color: #F09E5B;
        animation-name: loader-animation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
</style>

<script>
    'use strict'
    // Logic with jquery to present and hide loading
    $(document).ajaxSend(() => $('.loader').show());
    $(document).ajaxStop(() => $('.loader').hide());
</script>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	</head>

	<body>
	<div class="loader">
	<div class="bar"></div>
	</div>
	<your-application></your-application>
	</body>
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	@keyframes loader-animation {
	0% {
	width: 0%;
	}
	49% {
	width: 100%;
	left: 0%
	}
	50% {
	left: 100%;
	width: 0;
	}
	100% {
	left: 0%;
	width: 100%
	}
	}

	.loader {
	height: 5px;
	width: 100%;
	z-index: 2147483647;
	position: fixed;
	}

	.loader .bar {
	position: absolute;
	height: 5px;
	background-color: #F09E5B;
	animation-name: loader-animation;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	}
	</style>

	<script>
	'use strict'
	// Logic with jquery to present and hide loading
	$(document).ajaxSend(() => $('.loader').show());
	$(document).ajaxStop(() => $('.loader').hide());
	</script>

	</html>