Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE>
- <html>
- <header>
- <style>
- #progress {
- position: fixed;
- z-index: 2147483647;
- top: 0;
- left: -6px;
- width: 1%;
- height: 2px;
- background: #0088CC;
- -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 dd, #progress dt {
- position: absolute;
- top: 0;
- height: 2px;
- -moz-box-shadow: #0088CC 1px 0 6px 1px;
- -ms-box-shadow: #0088CC 1px 0 6px 1px;
- -webkit-box-shadow: #0088CC 1px 0 6px 1px;
- box-shadow: #0088CC 1px 0 6px 1px;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- border-radius: 100%;
- }
- #progress dt {
- opacity: .6;
- width: 180px;
- right: -80px;
- clip: rect(-6px,90px,14px,-6px);
- }
- #progress dd {
- opacity: .6;
- width: 20px;
- right: 0;
- clip: rect(-6px,22px,14px,10px);
- }
- </style>
- <script>
- function show () {
- document.body.innerHTML+="<div id=\"progress\"><dt></dt><dd></dd></div>";
- var pr=document.querySelector("#progress");
- setTimeout(function(){
- pr.style.width="60%";
- },300);
- setTimeout(function(){
- pr.style.width="101%";
- },800);
- setTimeout(function(){
- pr.parentNode.removeChild(pr);
- },1600);
- return false;
- }
- $(document).ajaxStart(function() {
- //only add progress bar if added yet.
- if ($("#progress").length === 0) {
- $("body").append($("<div><dt/><dd/></div>").attr("id", "progress"));
- $("#progress").width((50 + Math.random() * 30) + "%");
- }
- });
- $(document).ajaxComplete(function() {
- //End loading animation
- $("#progress").width("101%").delay(200).fadeOut(400, function() {
- $(this).remove();
- });
- });
- </script>
- </header>
- <body>
- <div>
- <a onclick='show();' href='#' class='btn'>Show Demo</a>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement