Recents in Beach

header ads

How To Add Loading Bar To Your Website By The Use of Javascript , CSS and HTML Like Youtube

How To Add Loading Bar To Your Website By The Use of Javascript , CSS and HTML Like Youtube .

Hey everybody, In this newsletter we're going to expose you, the way to add a youtube kind loading bar to your internet site by the usage of css,HTML and javascript code, so right here is quite simple to feature youtube type loading bar, you can use simple css and javascript code to your present website , so no more dialogue and let start.
How To Add Loading Bar To Your Website By The Use of Javascript , CSS and HTML Like Youtube

HTML Code

<div id="progress" class="waiting"> <dt></dt> <dd></dd> </div>

CSS Code

#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 }

JavaScript Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> $( 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() { } }); });
So guys you can copy and add it your website to enjoy Loading Bar Like YouTube. If You Liked Our Article Please Share it to your Friends

Post a Comment

0 Comments