JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
    http://accessibility.oit.ncsu.edu/blog/2013/09/13/the-incredible-accessible-modal-dialog/
    <div class="modal" aria-hidden="false" aria-labelledby="modalTitle modalDescription" role="dialog">
        <div id="modalDescription" class="visuallyhidden">Beginning of dialog window. It begins with a heading 1 called &quot;Progress&quot;. Escape will cancel and close the window.</div>
        <div class="modalHeader">
             <h1 id="modalTitle">Progress</h1>
        </div>
        <div class="loader">
            <div class="progress-bar">
                <div class="progress-stripes"></div>
            </div>
        </div>
        <div class="progress-status">Progress <span class="percentage"></span></div>
        
        <a href="javascript:void(0)" title="Close modal window" class="modal-close">x</a>
    </div>
</div>

CSS

body {
    font-family: helvetica, arial, sans-serif;
}
.modal {
    background: #999;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 200px;
    min-width: 300px;
    max-width: 400px;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.modal-close {
    background: #fff;
    border-radius: 15px;
    color: #000;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 10px;
}
.modalHeader {
    background: #333;
    padding: 10px;
}
#modalTitle {
    color: #fff;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
.loader {
    border: 1px solid #ccc;
    margin: 40px auto 20px;
    width: 50%;
    height: 20px;
    overflow: hidden;
}
.progress-bar {
    background: #fff;
    width: 0%;
}
.progress-stripes {
    background-color: red;
    height: 20px;
}
.progress-status {
    text-align: center;
}

JavaScript

// Hide modal window
$('.modal-close').on('click', function () {
    $('.modal').hide().attr('aria-hidden', 'true');
});


/* RANDOM LARGE IMAGES FOR DEMO PURPOSES */	
var demoImgArray = ['http://www.hdwallpapers.in/walls/halloween_2013-wide.jpg', 'http://www.hdwallpapers.in/walls/2013_print_tech_lamborghini_aventador-wide.jpg', 'http://www.hdwallpapers.in/walls/ama_dablam_himalaya_mountains-wide.jpg', 'http://www.hdwallpapers.in/walls/arrow_tv_series-wide.jpg'];

// Stripes interval
var stripesAnim;
var calcPercent;

$progress = $('.progress-bar');
$percent = $('.percentage');
$stripes = $('.progress-stripes');
$progressStatus = $('.progress-status');

// Call function to load array of images
preload(demoImgArray);

// Call function to animate stripes
stripesAnimate(); 

/* WHEN LOADED */
$(window).load(function() {
	loaded = true;
	$progress.animate({
		width: "100%"
	}, 100, function() {
		progressStatus.text('Loaded!').addClass('loaded');
		$percent.text('100%');
		clearInterval(calcPercent);
		clearInterval(stripesAnim);
	});
});

/*** FUNCTIONS ***/

/* LOADING */
function preload(imgArray) {
	var increment = Math.floor(100 / imgArray.length);
	$(imgArray).each(function() {
		$('<img>').attr("src", this).load(function() {
			$progress.animate({
				width: "+=" + increment + "%"
			}, 100);
		});
	});
	calcPercent = setInterval(function() {
		
		//loop through the items
		$percent.text(Math.floor(($progress.width() / $('.loader').width()) * 100) + '%');
		
	});
}

/* STRIPES ANIMATION */
function stripesAnimate() {
	animating();
	stripesAnim = setInterval(animating, 2500);
}

function animating() {
	$stripes.animate({
		marginLeft: "-=30px"
	}, 2500, "linear");
}