文章目录
前言
一、实现方法
二、实现
1.html
2.设置背景
3.设置进度条样式
4.显示百分比
5.最终效果
前言
使用html，css和javascript 实现一个简单的进度条效果
一、实现方法
嵌套两个div，其中子div通过动画改变自身宽度来实现进度条效果。
使用JavaScript来计算其百分比来显示百分比数字。
二、实现
1.html
代码如下：
<body>
<div id="border">
<div id="progress"></div>
</div>
<div id="rop">
<input type="text" id="rate" value="0">
</div>
</body>#border用来实现进度条，#rop来实现百分比。
2.设置背景
代码如下：
body{
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 350px;
grid-template-rows: 25px 130px;
grid-template-areas: 'area1' 'area2';
justify-content: center;
align-content: center;
background: #ff9933;
}开启一个一行两列的网格布局，并将子元素居中显示
3.设置进度条样式
父div样式：
#border{
grid-area: area1;
width: 350px;
height: 25px;
border: 2px solid #666;
border-radius: 5px;
box-shadow: 0 0 10px #ccc;
display: flex;
align-items: center;
}它将作为进度条的边框部分显示。
子div样式：
#progress{
height: 23px;
border-radius: 5px;
box-shadow: 0 0 2px #ff3300;
background-image: linear-gradient(to right, #ff6600,#cc3300);
animation: move 5s infinite;
}动画：
@keyframes move{
0%{
width: 0%;
}
100%{
width: 100%;
}
}通过动画使子div在5s内改变自己的宽度从而实现了进度条效果
4.显示百分比
这里使通过将上述两个div的宽度相除来得到百分比。
css样式：
#rop{
grid-area: area2;
justify-self: center;
align-self: center;
}
#rate{
width: 60px;
height: 35px;
border: 2px solid #666;
border-radius: 5px;
box-shadow: 0 0 10px #ccc;
background-color: #ff9933;
font-size: 20px;
text-align: center;
pointer-events: none;
}JavaScript代码：
let oborder = document.querySelector('#border');
let oprogress = document.querySelector('#progress');
let orate = document.querySelector('#rate');
setInterval(() =>{
let percent = Math.floor((oprogress.clientWidth / oborder.clientWidth)*100) + '%';
orate.value = percent;
},200)直接用JavaScript相除得到的是小数所以需要取整。
5.最终效果
这里是完整的css样式
*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 350px;
grid-template-rows: 25px 130px;
grid-template-areas: 'area1' 'area2';
justify-content: center;
align-content: center;
background: #ff9933;
}
#border{
grid-area: area1;
width: 350px;
height: 25px;
border: 2px solid #666;
border-radius: 5px;
box-shadow: 0 0 10px #ccc;
display: flex;
align-items: center;
}
#progress{
height: 23px;
border-radius: 5px;
box-shadow: 0 0 2px #ff3300;
background-image: linear-gradient(to right, #ff6600,#cc3300);
animation: move 5s infinite;
}
@keyframes move{
0%{
width: 0%;
}
100%{
width: 100%;
}
}
#rop{
grid-area: area2;
justify-self: center;
align-self: center;
}
#rate{
width: 60px;
height: 35px;
border: 2px solid #666;
border-radius: 5px;
box-shadow: 0 0 10px #ccc;
background-color: #ff9933;
font-size: 20px;
text-align: center;
pointer-events: none;
}