html 动态进度条编写例子
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div class="meter">
<span style="width: 25%"></span>
</div>
<style>.meter {
box-sizing: content-box;
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.meter > span:after,
.animate > span > span {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
@keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-image: linear-gradient(#f1a165, #f36d0a);
}
.red > span {
background-image: linear-gradient(#f0a3a3, #f42323);
}
</style>
<script>
$(".meter > span").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate(
{
width: $(this).data("origWidth")
},
1200
);
});
</script>