msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Added animations

Browse Source
pull/229/head
mayank-0103 6 months ago
parent 66fa8ad6d1
commit 45b1577793
3 changed files with 80 additions and 54 deletions
Show Stats Download Patch File Download Diff File

41
progress-steps/index.html
Unescape View File

@ -1,24 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Progress Steps</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" disabled>Prev</button> <head>
<button class="btn" id="next">Next</button> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title>Progress Steps</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div> </div>
<script src="script.js"></script>
</body> <button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
<script src="script.js"></script>
</body>
</html> </html>

53
progress-steps/script.js
Unescape View File

@ -1,49 +1,44 @@
const progress = document.getElementById('progress') const progress = document.getElementById('progress');
const prev = document.getElementById('prev') const prev = document.getElementById('prev');
const next = document.getElementById('next') const next = document.getElementById('next');
const circles = document.querySelectorAll('.circle') const circles = document.querySelectorAll('.circle');
let currentActive = 1 let currentActive = 1;
next.addEventListener('click', () => { next.addEventListener('click', () => {
currentActive++ currentActive++;
if (currentActive > circles.length) {
if(currentActive > circles.length) { currentActive = circles.length;
currentActive = circles.length
} }
update();
update()
}) })
prev.addEventListener('click', () => { prev.addEventListener('click', () => {
currentActive-- currentActive--;
if (currentActive < 1) {
if(currentActive < 1) { currentActive = 1;
currentActive = 1
} }
update();
update()
}) })
function update() { function update() {
circles.forEach((circle, idx) => { circles.forEach((circle, idx) => {
if(idx < currentActive) { if (idx < currentActive) {
circle.classList.add('active') circle.classList.add('active');
} else { } else {
circle.classList.remove('active') circle.classList.remove('active');
} }
}) })
const actives = document.querySelectorAll('.active') const actives = document.querySelectorAll('.active');
progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + '%';
progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'
if(currentActive === 1) { if (currentActive === 1) {
prev.disabled = true prev.disabled = true;
} else if(currentActive === circles.length) { } else if (currentActive === circles.length) {
next.disabled = true next.disabled = true;
} else { } else {
prev.disabled = false prev.disabled = false;
next.disabled = false next.disabled = false;
} }
} }

38
progress-steps/style.css
Unescape View File

@ -3,7 +3,6 @@
:root { :root {
--line-border-fill: #3498db; --line-border-fill: #3498db;
--line-border-empty: #383838; --line-border-empty: #383838;
} }
* { * {
@ -29,7 +28,7 @@ body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
margin-bottom: 30px; margin-bottom: 20px;
max-width: 100%; max-width: 100%;
width: 350px; width: 350px;
} }
@ -59,20 +58,34 @@ body {
} }
.circle { .circle {
position: relative;
z-index: 1;
background-color: #f1f1f1; background-color: #f1f1f1;
color:#e2e2e2; color: #000000;
border-radius: 50%; border-radius: 50%;
height: 30px; height: 40px;
width: 30px; width: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 3px solid var(--line-border-empty); border: 3px solid var(--line-border-empty);
transition: 0.4s ease; transition: 0.4s ease;
/* Add this to ensure the background is solid */
box-shadow: 0 0 0 4px #f1f1f1;
} }
.circle.active { .circle.active {
border-color: var(--line-border-fill); border-color: var(--line-border-fill);
background-color: #f1f1f1;
animation-name: pop;
animation-timing-function: ease-in-out;
animation-duration: 0.5s;
}
.circle:not(.active) {
transform: scale(0.9);
opacity: 1;
transition: transform 0.3s ease-in-out, opacity 0.3s ease;
} }
.btn { .btn {
@ -98,4 +111,19 @@ body {
.btn:disabled { .btn:disabled {
background-color: var(--line-border-empty); background-color: var(--line-border-empty);
cursor: not-allowed; cursor: not-allowed;
transform: scale(1);
}
@keyframes pop {
0% {
transform: scale(0.8);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
} }
Write Preview
Loading…
Cancel
Save