From 45b1577793f4b07a6e09b57ca96f5c7b71ab5c2e Mon Sep 17 00:00:00 2001 From: mayank-0103 <201279422+mayank-0103@users.noreply.github.com> Date: Wed, 12 Mar 2025 14:32:42 +0530 Subject: [PATCH] Added animations --- progress-steps/index.html | 43 ++++++++++++++++--------------- progress-steps/script.js | 53 ++++++++++++++++++--------------------- progress-steps/style.css | 38 ++++++++++++++++++++++++---- 3 files changed, 80 insertions(+), 54 deletions(-) diff --git a/progress-steps/index.html b/progress-steps/index.html index 8672c0c..6f1edce 100644 --- a/progress-steps/index.html +++ b/progress-steps/index.html @@ -1,24 +1,27 @@ - - - - - Progress Steps - - -
-
-
-
1
-
2
-
3
-
4
-
- - + + + + + Progress Steps + + + +
+
+
+
1
+
2
+
3
+
4
- - - + + + +
+ + + + \ No newline at end of file diff --git a/progress-steps/script.js b/progress-steps/script.js index 58067d4..05d0924 100644 --- a/progress-steps/script.js +++ b/progress-steps/script.js @@ -1,49 +1,44 @@ -const progress = document.getElementById('progress') -const prev = document.getElementById('prev') -const next = document.getElementById('next') -const circles = document.querySelectorAll('.circle') +const progress = document.getElementById('progress'); +const prev = document.getElementById('prev'); +const next = document.getElementById('next'); +const circles = document.querySelectorAll('.circle'); -let currentActive = 1 +let currentActive = 1; next.addEventListener('click', () => { - currentActive++ - - if(currentActive > circles.length) { - currentActive = circles.length + currentActive++; + if (currentActive > circles.length) { + currentActive = circles.length; } - - update() + update(); }) prev.addEventListener('click', () => { - currentActive-- - - if(currentActive < 1) { - currentActive = 1 + currentActive--; + if (currentActive < 1) { + currentActive = 1; } - - update() + update(); }) function update() { circles.forEach((circle, idx) => { - if(idx < currentActive) { - circle.classList.add('active') + if (idx < currentActive) { + circle.classList.add('active'); } else { - circle.classList.remove('active') + circle.classList.remove('active'); } }) - const actives = document.querySelectorAll('.active') - - progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%' + const actives = document.querySelectorAll('.active'); + progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + '%'; - if(currentActive === 1) { - prev.disabled = true - } else if(currentActive === circles.length) { - next.disabled = true + if (currentActive === 1) { + prev.disabled = true; + } else if (currentActive === circles.length) { + next.disabled = true; } else { - prev.disabled = false - next.disabled = false + prev.disabled = false; + next.disabled = false; } } \ No newline at end of file diff --git a/progress-steps/style.css b/progress-steps/style.css index 0b443be..de2cb8a 100644 --- a/progress-steps/style.css +++ b/progress-steps/style.css @@ -3,7 +3,6 @@ :root { --line-border-fill: #3498db; --line-border-empty: #383838; - } * { @@ -29,7 +28,7 @@ body { display: flex; justify-content: space-between; position: relative; - margin-bottom: 30px; + margin-bottom: 20px; max-width: 100%; width: 350px; } @@ -59,20 +58,34 @@ body { } .circle { + position: relative; + z-index: 1; background-color: #f1f1f1; - color:#e2e2e2; + color: #000000; border-radius: 50%; - height: 30px; - width: 30px; + height: 40px; + width: 40px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--line-border-empty); transition: 0.4s ease; + /* Add this to ensure the background is solid */ + box-shadow: 0 0 0 4px #f1f1f1; } .circle.active { 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 { @@ -98,4 +111,19 @@ body { .btn:disabled { background-color: var(--line-border-empty); cursor: not-allowed; + transform: scale(1); } + +@keyframes pop { + 0% { + transform: scale(0.8); + } + + 60% { + transform: scale(1.1); + } + + 100% { + transform: scale(1); + } +} \ No newline at end of file