The final effect of the progress bar is as follows. The top is a progress bar progress, and the progress is controlled by the color of the line: blue means that the progress has been reached, and black means that the progress has not been reached; the bottom is two buttons to control the progress of the overall progress bar: click the button to reduce the Prevprogress , Nextto increase the progress;
First create an index.html to supplement the label elements in the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress step</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<div class="progress">
<div class="progress-bar"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<div class="btn-class">
<div class="pre-btn"><span>Prev</span></div>
<div class="next-btn active"><span>Next</span></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
css style
style.cssSupplement the page style and the layout of each label in , due to the convenience, most of the labels in the page adopt the flex layout method,
:root {
--line-border-fill: #3498db;
--line-border-empty: #383838;
}
body{
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vm;
}
.progress{
display: flex;
position: relative;
justify-content: space-between;
width: 350px;
}
/*
这里，通过伪元素标签，为未达到进度的线条填充背景颜色；
*/
.progress::before {
content: '';
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
/*
当达到进度的线条，进行二次填充
*/
.progress-bar {
position: absolute;
background-color: var(--line-border-fill);
width: 0;
height: 4px;
top: 50%;
left:0;
z-index: -1;
transform: translateY(-50%);
/*
设置动画效果
*/
transition: 0.3s ease;
}
.circle {
background: red;
width: 2rem;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: white;
border: 3px solid var(--line-border-empty);
transition: 0.4s ease-in;
}
.circle.active {
border: 3px solid var(--line-border-fill);
}
.btn-class {
margin-top: 2rem;
display: flex;
width: 350px;
justify-content: space-around;
}
.btn-class {
height: 2rem;
}
.btn-class div {
background-color: var(--line-border-empty);
border-radius: 0.5rem;
display: flex;
cursor: pointer;
align-items: center;
transition: 0.4s ease-in;
color: white;
cursor: not-allowed;
}
.btn-class div span {
padding-inline: 2rem;
}
# 激活后的button
.btn-class .active {
color: black;
background-color: var(--line-border-fill);
cursor: pointer;
}
Supplement js, add interactive effects
The overall color progress filling of the progress bar previs nextrealized by interactively clicking the two buttons and ,
And for some adjacent conditions, the button click effect needs to be disabled, for example
- 1. When the progress is 0,
previt cannot be clicked; - 2. When the progress is 4 (full progress),
nextit cannot be clicked;
The above functions can be realized by the following js code
const preBtn = document.querySelector('.pre-btn');
const nextBtn = document.querySelector('.next-btn');
const allCircles = document.querySelectorAll('.circle')
const progressBar = document.querySelector('.progress-bar')
// 获取 点的长度
const circleLength = allCircles.length;
// 初始索引 给按钮添加监听
let index = 0;
preBtn.addEventListener('click', () => {
console.log('next click is ')
index -=1;
updateProgressBar()
})
nextBtn.addEventListener('click', () => {
console.log('next click is ')
index +=1;
updateProgressBar()
})
// 根据当前索引，更新进度条属性 以及按钮 属性
function updateProgressBar(){
if(index <= 0){
index = 0;
// prev button 判断
if(preBtn.classList.contains('active')){
preBtn.classList.remove('active');
}
}else{
if(!preBtn.classList.contains('active')){
preBtn.classList.add('active');
}
}
if(index +1 >= circleLength){
index = circleLength-1;
// next button 判断
if(nextBtn.classList.contains('active')){
nextBtn.classList.remove('active');
}
}else{
if(!nextBtn.classList.contains('active')){
nextBtn.classList.add('active');
}
}
allCircles.forEach((circle, circleIndex) => {
if(circleIndex <= index && !circle.classList.contains('active')){
circle.classList.add('active');
}else if(circleIndex>index && circle.classList.contains('active')){
circle.classList.remove('active');
}
})
let width = index*100 /(circleLength-1)
if(width >100){
width =100
}else if(width <0){
width = 0
}
// 进度条宽度
progressBar.style.width = width + '%';
}
The complete code in the case has been placed in Github, which can be accessed at: https://github.com/Largefreedom/HTML_PRACTICE/tree/master/Pra2_progress_steps