"Loading bar like YouTube (New Layout)"
Bootstrap 4.1.1 Snippet by nirav.mandli

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <div id="progress" class="waiting"> <dt></dt> <dd></dd> </div> <div class="text-center"> <div class="form-group"></div> <h1>Loading bar like Youtube</h1> </div> </div>
#progress { position: fixed; z-index: 2147483647; top: 0; left: -6px; width: 0%; height: 2px; background: #b91f1f; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; -moz-transition: width 500ms ease-out,opacity 400ms linear; -ms-transition: width 500ms ease-out,opacity 400ms linear; -o-transition: width 500ms ease-out,opacity 400ms linear; -webkit-transition: width 500ms ease-out,opacity 400ms linear; transition: width 500ms ease-out,opacity 400ms linear; } #progress.done { opacity: 0; } #progress dd,#progress dt { position: absolute; top: 0; height: 2px; -moz-box-shadow: #b91f1f 1px 0 6px 1px; -ms-box-shadow: #b91f1f 1px 0 6px 1px; -webkit-box-shadow: #b91f1f 1px 0 6px 1px; box-shadow: #b91f1f 1px 0 6px 1px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } #progress dd { opacity: 1; width: 20px; right: 0; clip: rect(-6px,22px,14px,10px); } #progress dt { opacity: 1; width: 180px; right: -80px; clip: rect(-6px,90px,14px,-6px); } @-moz-keyframes pulse { 30% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes pulse { 30% { opacity: .6; } 60% { opacity: 0; } 100% { opacity: .6; } } @-o-keyframes pulse { 30% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes pulse { 30% { opacity: .6; } 60% { opacity: 0; } 100% { opacity: .6; } } @keyframes pulse { 30% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } #progress.waiting dd,#progress.waiting dt { -moz-animation: pulse 2s ease-out 0s infinite; -ms-animation: pulse 2s ease-out 0s infinite; -o-animation: pulse 2s ease-out 0s infinite; -webkit-animation: pulse 2s ease-out 0s infinite; animation: pulse 2s ease-out 0s infinite; }
$(document).ready(function() { $({ property: 0 }).animate({ property: 105 }, { duration: 4000, step: function() { var _percent = Math.round(this.property); $('#progress').css('width', _percent + "%"); if (_percent == 105) { $("#progress").addClass("done"); } }, complete: function() {} }); });

Related: See More


Questions / Comments: