Skip to content

Commit d12c142

Browse files
solygambassolygambas
committed
add progress bar
1 parent 5ab1401 commit d12c142

File tree

5 files changed

+161
-4
lines changed

5 files changed

+161
-4
lines changed

‎00-boilerplate/style.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
22

33
* {
4-
box-sizing: border-box; // to avoid width problems if padding
4+
box-sizing: border-box;
55
}
66

77
body {
@@ -11,6 +11,6 @@ body {
1111
align-items: center;
1212
justify-content: center;
1313
height: 100vh;
14-
overflow: hidden; // to hide scrollbars
14+
overflow: hidden;
1515
margin: 0;
1616
}

‎01-expanding cards/style.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
22

33
* {
4-
box-sizing: border-box; // to avoid width problems if padding
4+
box-sizing: border-box; /* to avoid width problems if padding */
55
}
66

77
body {
@@ -10,7 +10,7 @@ body {
1010
align-items: center;
1111
justify-content: center;
1212
height: 100vh;
13-
overflow: hidden; // to hide scrollbars
13+
overflow: hidden; /* to hide scrollbars */
1414
margin: 0;
1515
}
1616

‎02-progress steps/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Progress Steps</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="progress-container">
12+
<div class="progress" id="progress"></div>
13+
<div class="circle active">1</div>
14+
<div class="circle">2</div>
15+
<div class="circle">3</div>
16+
<div class="circle">4</div>
17+
</div>
18+
<button class="btn" id="prev" disabled>Prev</button>
19+
<button class="btn" id="next">Next</button>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎02-progress steps/script.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const progress = document.getElementById("progress");
2+
const prev = document.getElementById("prev");
3+
const next = document.getElementById("next");
4+
const circles = document.querySelectorAll(".circle");
5+
6+
let currentActive = 1;
7+
8+
next.addEventListener("click", () => {
9+
currentActive++;
10+
if (currentActive > circles.length) currentActive = circles.length;
11+
update();
12+
});
13+
14+
prev.addEventListener("click", () => {
15+
currentActive--;
16+
if (currentActive < 1) currentActive = 1;
17+
update();
18+
});
19+
20+
const update = () => {
21+
circles.forEach((circle, index) => {
22+
if (index < currentActive) circle.classList.add("active");
23+
else circle.classList.remove("active");
24+
});
25+
const actives = document.querySelectorAll(".active");
26+
progress.style.width =
27+
((actives.length - 1) / (circles.length - 1)) * 100 + "%";
28+
if (currentActive === 1) prev.disabled = true;
29+
else if (currentActive === circles.length) next.disabled = true;
30+
else {
31+
prev.disabled = false;
32+
next.disabled = false;
33+
}
34+
};

‎02-progress steps/style.css

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
2+
3+
:root {
4+
--line-border-fill: #3498db;
5+
--line-border-empty: #e0e0e0;
6+
}
7+
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
font-family: "Muli", sans-serif;
14+
background-color: #f6f7fb;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
height: 100vh;
19+
overflow: hidden;
20+
margin: 0;
21+
}
22+
23+
.container {
24+
text-align: center;
25+
}
26+
27+
.progress-container {
28+
display: flex;
29+
justify-content: space-between;
30+
position: relative;
31+
margin-bottom: 30px;
32+
max-width: 100%;
33+
width: 350px;
34+
}
35+
36+
.progress-container::before {
37+
content: ""; /* Mandatory with ::before */
38+
background-color: var(--line-border-empty);
39+
position: absolute;
40+
top: 50%;
41+
left: 0;
42+
transform: translateY(-50%);
43+
height: 4px;
44+
width: 100%;
45+
z-index: -1;
46+
}
47+
48+
.progress {
49+
background-color: var(--line-border-fill);
50+
position: absolute;
51+
top: 50%;
52+
left: 0;
53+
transform: translateY(-50%);
54+
height: 4px;
55+
width: 0%;
56+
z-index: -1;
57+
transition: 0.4s ease;
58+
}
59+
60+
.circle {
61+
background-color: #fff;
62+
color: #999;
63+
border-radius: 50%;
64+
height: 30px;
65+
width: 30px;
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
border: 3px solid var(--line-border-empty);
70+
transition: 0.4s ease;
71+
}
72+
73+
.circle.active {
74+
border-color: var(--line-border-fill);
75+
}
76+
77+
.btn {
78+
background-color: var(--line-border-fill);
79+
color: #fff;
80+
border: 0;
81+
border-radius: 6px;
82+
cursor: pointer;
83+
font-family: inherit;
84+
padding: 8px 30px;
85+
margin: 5px;
86+
font-size: 14px;
87+
}
88+
89+
.btn:active {
90+
transform: scale(0.98);
91+
}
92+
93+
.btn:focus {
94+
outline: 0;
95+
}
96+
97+
.btn:disabled {
98+
background-color: var(--line-border-empty);
99+
cursor: not-allowed;
100+
}

0 commit comments

Comments
 (0)