JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Progression-Bar</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
  			<center><h1>Création d'une progression en Javascript</h1></center>
		<br />
		<img src="http://lorempixel.com/200/200/abstract">
		<img src="http://lorempixel.com/200/200">
		<img src="http://lorempixel.com/200/200/animals">
		<img src="http://lorempixel.com/200/200/business">
		<img src="http://lorempixel.com/200/200/cats">
		<img src="http://lorempixel.com/200/200/city">
		<img src="http://lorempixel.com/200/200/food">
		<img src="http://lorempixel.com/200/200/nightlize">
		<img src="http://lorempixel.com/200/200/abstract">
		<img src="http://lorempixel.com/200/200/sports">
		<img src="http://lorempixel.com/200/200/sports/1">
		<img src="http://lorempixel.com/200/200/sports/Dummy-Text">
		<img src="http://lorempixel.com/200/200/people">
		<img src="http://lorempixel.com/200/200/city">
		<img src="http://lorempixel.com/200/200/transport">
		<img src="http://lorempixel.com/200/200/food">
		<img src="http://lorempixel.com/200/200/nature">
		<img src="http://lorempixel.com/200/200/fashion">	

		<style type="text/javascript" src="js/jquery.min.js"></style>	
		<style type="text/javascript" src="js/progress-bar.js"></style>

	</div>
</body>
</html>

CSS

body{
	margin: 0px;
	color: #FFF;
	background-color: #333333;
	font-family: " Lato ,Source Code pro , sans-serif ";
}

/*	Pregress-bar	*/
#progress-bar-container{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 10px;
}

#progress-bar{
	position: relative;
	height: 100%;
	background: green;
	box-shadow: 0 0 14px rgba(0, 0, 0, .5);
	width: 0%;
}

#progress-bar-elements{
	display: none;
}

JavaScript

progressBar = {
    countElmt: 0,
    loadedElmt: 0,

    init: function () {
        var that = this;
        this.countElmt = $('img').length;

        // Construction et ajout progress bar
        var $progressBarContainer = $('<div/>').attr('id', 'progress-bar-container');
        $progressBarContainer.append($('<div/>').attr('id', 'progress-bar'));
        $progressBarContainer.appendTo($('body'));

        // Ajout container d'éléments
        var $container = $('<div/>').attr('id', 'progress-bar-elements');
        $container.appendTo($('body'));

        // Parcours des éléments à prendre en compte pour le chargement
        $('img').each(function () {
            $('<img/>')
                .attr('src', $(this).attr('src'))
                .on('load error', function () {
                that.loadedElmt++;
                that.updateProgressBar();
            })
                .appendTo($container);
        });
    },

    updateProgressBar: function () {
        $('#progress-bar').stop().animate({
            'width': (progressBar.loadedElmt / progressBar.countElmt) * 100 + '%'
        });
    }
};

progressBar.init();