Skip to content

Instantly share code, notes, and snippets.

@alanerzhao

alanerzhao/CSS3-progress.html

Last active December 19, 2015 11:39
Show Gist options
  • Save alanerzhao/5949391 to your computer and use it in GitHub Desktop.
Save alanerzhao/5949391 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS3-progress.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 progress</title>
<style type="text/css">
.progress{
width: 215px;
border: 1px solid #BFBFBF;
padding: 1px;
border-radius:10px;
background-color: #D3EAD8;
box-shadow: 0 1px 1px #ccc inset;
border-bottom: 1px solid #D8E5DB;
}
#meter {
height: 6px;
background-color: #37B200;
background-repeat: repeat-x;
background-position: 0 0;
background-size: 16px 8px;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12) 33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12) 33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);
background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12) 33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);
background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12) 33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);
-webkit-animation: pb 0.8s linear 0 infinite;
-moz-animation:0.8s linear 0s normal none infinite pb;
border-radius:9px;
}
@-webkit-keyframes pb {
0% { background-position:0 0; }
100% { background-position:-16px 0; }
}
@-moz-keyframes pb {
0% { background-position:0 0; }
100% { background-position:-16px 0; }
}
</style>
</head>
<body>
<div class="progress">
<div id="meter" style="width:0;"></div>
</div>
<span id="meter_numer"></span><br />
<button id="btn">go go go</button>
<script type="text/javascript">
var btn = document.getElementById('btn');
lpt = document.getElementById("meter");
meter_n = document.getElementById("meter_numer");
i = 0,
timer = null;
btn.onclick = function (){
clearInterval(timer);
timer = setInterval(function (){
i++;
meter_n.innerHTML= i+"%";
lpt.style.width = i + "%";
if(i >= 100) {
clearInterval(timer);
return false;
}
},50)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment