Created
July 3, 2016 05:38
-
-
Save keenwon/f83ff2aba58ff7fd63cd1b7ff26cf686 to your computer and use it in GitHub Desktop.
loading bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="zh-CN"> | |
<head> | |
<title>Loading bar</title> | |
<meta charset="utf-8"> | |
<style type="text/css"> | |
.loadingbar { | |
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: opacity 500ms ease-in-out; | |
-ms-transition: opacity 500ms ease-in-out; | |
-o-transition: opacity 500ms ease-in-out; | |
-webkit-transition: opacity 500ms ease-in-out; | |
transition: opacity 500ms ease-in-out; | |
} | |
.loadingbar.waiting { | |
width: 0; | |
-moz-animation: move 10s linear forwards; | |
-ms-animation: move 10s linear forwards; | |
-o-animation: move 10s linear forwards; | |
-webkit-animation: move 10s linear forwards; | |
animation: move 10s linear forwards; | |
} | |
@keyframes move { | |
0% { width: 0; } | |
100% { width: 30%; } | |
} | |
@-moz-keyframes move { | |
0% { width: 0; } | |
100% { width: 30%; } | |
} | |
@-ms-keyframes move { | |
0% { width: 0; } | |
100% { width: 30%; } | |
} | |
@-webkit-keyframes move { | |
0% { width: 0; } | |
100% { width: 30%; } | |
} | |
.loadingbar.end { | |
width: 30%; | |
-moz-animation: end .5s linear forwards; | |
-ms-animation: end .5s linear forwards; | |
-o-animation: end .5s linear forwards; | |
-webkit-animation: end .5s linear forwards; | |
animation: end .5s linear forwards; | |
} | |
@keyframes end { | |
70% { width: 100%; opacity: 1 } | |
100% { width: 120%; opacity: 0; } | |
} | |
@-moz-keyframes end { | |
70% { width: 100%; opacity: 1 } | |
100% { width: 120%; opacity: 0; } | |
} | |
@-ms-keyframes end { | |
70% { width: 100%; opacity: 1 } | |
100% { width: 120%; opacity: 0; } | |
} | |
@-webkit-keyframes end { | |
70% { width: 100%; opacity: 1 } | |
100% { width: 120%; opacity: 0; } | |
} | |
.loadingbar.waiting dd, .loadingbar.waiting dt { | |
-moz-animation: pulse 1.5s ease-out 1.8s infinite; | |
-ms-animation: pulse 1.5s ease-out 1.8s infinite; | |
-o-animation: pulse 1.5s ease-out 1.8s infinite; | |
-webkit-animation: pulse 1.5s ease-out 1.8s infinite; | |
animation: pulse 1.5s ease-out 1.8s infinite; | |
} | |
.loadingbar dt { | |
opacity: .6; | |
width: 180px; | |
right: -80px; | |
clip: rect(-6px,90px,14px,-6px); | |
} | |
.loadingbar dd { | |
opacity: .6; | |
width: 20px; | |
right: 0; | |
clip: rect(-6px,22px,14px,10px); | |
} | |
.loadingbar dd, .loadingbar 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%; | |
} | |
@keyframes pulse { | |
30% { opacity: 0.6; } | |
60% { opacity: 0; } | |
100% { opacity: 0.6; } | |
} | |
@-moz-keyframes pulse { | |
30% { opacity: 0.6; } | |
60% { opacity: 0; } | |
100% { opacity: 0.6; } | |
} | |
@-ms-keyframes pulse { | |
30% { opacity: 0.6; } | |
60% { opacity: 0; } | |
100% { opacity: 0.6; } | |
} | |
@-webkit-keyframes pulse { | |
30% { opacity: 0.6; } | |
60% { opacity: 0; } | |
100% { opacity: 0.6; } | |
} | |
</style> | |
</head> | |
<body> | |
<div class="loadingbar"> | |
<dt></dt> | |
<dd></dd> | |
</div> | |
<div style="margin: 30px;"> | |
<button id="start">start</button> | |
<button id="end">end</button> | |
<button id="reset">reset</button> | |
<button id="simulate1">模拟 500ms</button> | |
<button id="simulate2">模拟 1s</button> | |
<button id="simulate3">模拟 2s</button> | |
<button id="simulate4">模拟 10s</button> | |
</div> | |
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> | |
<script type="text/javascript"> | |
$(function () { | |
var $loadingbar = $('.loadingbar'), | |
$startBtn = $('#start'), | |
$endBtn = $('#end'), | |
$resetBtn = $('#reset'), | |
$simulate1Btn = $('#simulate1'), | |
$simulate2Btn = $('#simulate2'), | |
$simulate3Btn = $('#simulate3'), | |
$simulate4Btn = $('#simulate4'), | |
timer; | |
function reset() { | |
$loadingbar.removeClass('waiting end'); | |
} | |
function start() { | |
$loadingbar.addClass('waiting'); | |
} | |
function end() { | |
$loadingbar.removeClass('waiting').addClass('end'); | |
} | |
function simulate(delay) { | |
reset(); | |
start(), | |
clearTimeout(timer); | |
timer = setTimeout(function () { | |
end(); | |
}, delay); | |
} | |
$resetBtn.on('click', reset); | |
$startBtn.on('click', start); | |
$endBtn.on('click', end); | |
$simulate1Btn.on('click', function () { | |
simulate(500); | |
}); | |
$simulate2Btn.on('click', function () { | |
simulate(1000); | |
}); | |
$simulate3Btn.on('click', function () { | |
simulate(2000); | |
}); | |
$simulate4Btn.on('click', function () { | |
simulate(10000); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment