JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<div id="loadingbar">
   
    <div id="loadingprogress">
    </div>
    
</div>

CSS

#loadingbar {
	width: 30%;
	height: 20px;
	margin: 10px auto 0 auto;
	background-color: grey;
	background-repeat: no-repeat;
	background-position: -15% center;
	border-radius: 2px;
    overflow: hidden;
    }

#loadingprogress {
    width: 0;
    height: 20px;
    background-color: green;
	-webkit-animation: loadinganimation 5s linear;
	-moz-animation: loadinganimation 5s linear;
	-ms-animation: loadinganimation 5s linear;
	-o-animation: loadinganimation 5s linear;
	animation: loadinganimation 5s linear;
}

@-webkit-keyframes loadinganimation {
	0%   {width: 0;}
	100% {width: 100%;}
	}

@-moz-keyframes loadinganimation {
	0%   {width: 0;}
	100% {width: 100%;}
	}

@-ms-keyframes loadinganimation {
	0%   {width: 0;}
	100% {width: 100%;}
	}

@-o-keyframes loadinganimation {
	0%   {width: 0;}
	100% {width: 100%;}
	}
	
@keyframes loadinganimation {
	0%   {width: 0;}
	100% {width: 100%;}
	}

JavaScript

$("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    alert("working!");
    window.location.href = "http://www.google.com";
});