H5 Css3 怎么实现这样一个进度条
6个回答
展开全部
需要用到JS，代码如下（直接复制到你新建的html文件中）：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery实现进度条</title>
<style type="text/css">
#wrapper{
position: relative;
width:200px;
height:100px;
border:1px solid darkgray;
}
#progressbar{
position: absolute;
top:50%;
left:50%;
margin-left:-90px;
margin-top:-10px;
width:180px;
height:20px;
border:1px solid darkgray;
}
/*在进度条元素上调用动画*/
#fill{
animation: move 2s;
text-align: center;
background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
0%{
width:0;
}
100%{
width:100%;
}
}background: #5EC4EA;
}
</style>
</head>
<body>
<div id="wrapper">
<!--进度条容器-->
<div id="progressbar">
<!--用来模仿进度条推进效果的进度条元素-->
<div id="fill"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var progressbar={
init:function(){
var fill=document.getElementById('fill');
var count=0;
//通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
var timer=setInterval(function(e){
count++;
fill.innerHTML=count+'%';
if(count===100) clearInterval(timer);
},17);
}
};
progressbar.init();
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery实现进度条</title>
<style type="text/css">
#wrapper{
position: relative;
width:200px;
height:100px;
border:1px solid darkgray;
}
#progressbar{
position: absolute;
top:50%;
left:50%;
margin-left:-90px;
margin-top:-10px;
width:180px;
height:20px;
border:1px solid darkgray;
}
/*在进度条元素上调用动画*/
#fill{
animation: move 2s;
text-align: center;
background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
0%{
width:0;
}
100%{
width:100%;
}
}background: #5EC4EA;
}
</style>
</head>
<body>
<div id="wrapper">
<!--进度条容器-->
<div id="progressbar">
<!--用来模仿进度条推进效果的进度条元素-->
<div id="fill"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var progressbar={
init:function(){
var fill=document.getElementById('fill');
var count=0;
//通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
var timer=setInterval(function(e){
count++;
fill.innerHTML=count+'%';
if(count===100) clearInterval(timer);
},17);
}
};
progressbar.init();
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>进度条</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.pB_wrapper{
margin: 100px auto;
width: 1200px;
height: 50px;
}
.box{
float: left;
width: 1000px;
height: 50px;
background: #000;
border-radius: 15px;
background: -webkit-linear-gradient(top,#000 0px,#000 1px,#fff 1px,#fff 2px,#858585 2px,#000);
text-align: center;
position: relative;
}
.progressBarBg{
height: 30px;
width: 800px;
background: #e7e7e7;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-radius: 15px;
position: absolute;
left: 18px;
top: 8px;
overflow: hidden;
}
.progressBar{
height: 30px;
background: #77ffcc;
border-radius: 15px;
position: absolute;
left: 0;
top: 0;
background: -webkit-repeating-linear-gradient(-45deg,#68d4e8 0px,#68d4e8 10px,#4fb0e9 10px,#4fb0e9 20px);
}
.op{
width: 100%;
height: 15px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background: rgba(255,255,255,0.3);
position: absolute;
left: 0;
top: 0;
}
.pBnum{
font-size: 20px;
color: #fff;
font-weight: 900;
position: absolute;
right: 20px;
top: 15px;
}
.btn{
width: 50px;
height: 50px;
border: 0;
background: -webkit-radial-gradient(50%,red,orange,yellow,green,cyan,blue,purple,red);
border-radius: 50%;
float: left;
margin-left: 20px;
font-size: 16px;
color: #fff;
text-align: center;
font-weight: 900;
line-height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="pB_wrapper">
<div class="box">
<div class="progressBarBg">
<div class="progressBar">
<div class="op"></div>
</div>
</div>
<div class="pBnum">0%</div>
</div>
<div class="btn">action</div>
</div>
<script>
window.onload = function(){
var pB = document.querySelector('.progressBar');
var pBnum = document.querySelector('.pBnum');
var btn = document.querySelector('.btn');
var pBWidth = 0;
btn.onclick = function(){
var timer = setInterval(function(){
var num = parseInt( Math.random()*3 );
pBWidth += num;
pB.style.width = pBWidth + "%";
pBnum.innerHTML = pB.style.width;
if( parseInt(pB.style.width) >= 100 ){
pB.style.width = 100 + "%";
pBnum.innerHTML = pB.style.width;
clearInterval( timer );
}
},100);
};
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>进度条</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.pB_wrapper{
margin: 100px auto;
width: 1200px;
height: 50px;
}
.box{
float: left;
width: 1000px;
height: 50px;
background: #000;
border-radius: 15px;
background: -webkit-linear-gradient(top,#000 0px,#000 1px,#fff 1px,#fff 2px,#858585 2px,#000);
text-align: center;
position: relative;
}
.progressBarBg{
height: 30px;
width: 800px;
background: #e7e7e7;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-radius: 15px;
position: absolute;
left: 18px;
top: 8px;
overflow: hidden;
}
.progressBar{
height: 30px;
background: #77ffcc;
border-radius: 15px;
position: absolute;
left: 0;
top: 0;
background: -webkit-repeating-linear-gradient(-45deg,#68d4e8 0px,#68d4e8 10px,#4fb0e9 10px,#4fb0e9 20px);
}
.op{
width: 100%;
height: 15px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background: rgba(255,255,255,0.3);
position: absolute;
left: 0;
top: 0;
}
.pBnum{
font-size: 20px;
color: #fff;
font-weight: 900;
position: absolute;
right: 20px;
top: 15px;
}
.btn{
width: 50px;
height: 50px;
border: 0;
background: -webkit-radial-gradient(50%,red,orange,yellow,green,cyan,blue,purple,red);
border-radius: 50%;
float: left;
margin-left: 20px;
font-size: 16px;
color: #fff;
text-align: center;
font-weight: 900;
line-height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="pB_wrapper">
<div class="box">
<div class="progressBarBg">
<div class="progressBar">
<div class="op"></div>
</div>
</div>
<div class="pBnum">0%</div>
</div>
<div class="btn">action</div>
</div>
<script>
window.onload = function(){
var pB = document.querySelector('.progressBar');
var pBnum = document.querySelector('.pBnum');
var btn = document.querySelector('.btn');
var pBWidth = 0;
btn.onclick = function(){
var timer = setInterval(function(){
var num = parseInt( Math.random()*3 );
pBWidth += num;
pB.style.width = pBWidth + "%";
pBnum.innerHTML = pB.style.width;
if( parseInt(pB.style.width) >= 100 ){
pB.style.width = 100 + "%";
pBnum.innerHTML = pB.style.width;
clearInterval( timer );
}
},100);
};
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以使用Progress元素配合js，也可以自己设计用JS动态控制
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.texs{width: 300px;height: 15px;background: #ccc;border-radius: 10px;overflow: hidden;}
.texs span{display: block;height: 15px;background: #f00; animation: myfirst 5s;-webkit-animation: myfirst 5s;}
@keyframes myfirst
{
from {width: 0;}
to {width: 100%;}
}
@-webkit-keyframes
{
from {width: 0;}
to {width: 100%;}
}<div class="texs">
<span></span>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
是什么样的进度条？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
