Jinsi ya Kutengeneza Animated Progress Bars kwa CSS & JavaScript

Animated progress bars hutumika kuonyesha asilimia ya completion kwenye forms, loading screens, skill levels au project tracking. CSS + JS inafanya animation iwe smooth na modern.

✅ A. Simple Animated Progress Bar (On Page Load)
HTML
<div class="progress-container">
<div class="progress-bar" data-progress="75"></div>
</div>

CSS
.progress-container {
width: 100%;
background: #e0e0e0;
border-radius: 10px;
overflow: hidden;
height: 20px;
}

.progress-bar {
width: 0;
height: 100%;
background: #4caf50;
transition: width 1.5s ease;
}

JavaScript
const bar = document.querySelector(".progress-bar");
const value = bar.getAttribute("data-progress");
bar.style.width = value + "%";

✅ B. Multiple Skill Progress Bars (Scroll Triggered)
HTML
<div class="skill">
<p>HTML</p>
<div class="skill-bar"><span data-progress="90"></span></div>
</div>

<div class="skill">
<p>CSS</p>
<div class="skill-bar"><span data-progress="80"></span></div>
</div>

<div class="skill">
<p>JavaScript</p>
<div class="skill-bar"><span data-progress="70"></span></div>
</div>

CSS
.skill { margin-bottom: 15px; }
.skill-bar {
width: 100%;
background: #ddd;
height: 18px;
border-radius: 10px;
overflow: hidden;
}
.skill-bar span {
display: block;
height: 100%;
width: 0;
background: #2196f3;
transition: width 1.2s ease-out;
}

JavaScript (Intersection Observer)
const spans = document.querySelectorAll(".skill-bar span");

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
el.style.width = el.dataset.progress + "%";
observer.unobserve(el);
}
});
});

spans.forEach(span => observer.observe(span));

✅ C. Circular Progress Bar (CSS + JS)
HTML
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
</div>
<div class="inside-circle" id="percent">75%</div>
</div>
</div>

CSS
.circle-wrap {
width: 150px;
height: 150px;
background: #e6e2e7;
border-radius: 50%;
position: relative;
}

.circle .mask,
.circle .fill {
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
}

.circle .mask {
clip: rect(0px, 150px, 150px, 75px);
}

.circle .fill {
clip: rect(0px, 75px, 150px, 0px);
background-color: #4caf50;
}

.inside-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: white;
line-height: 120px;
text-align: center;
position: absolute;
top: 15px;
left: 15px;
font-size: 24px;
font-weight: bold;
}

JavaScript
let percent = 75;
document.querySelector("#percent").innerText = percent + "%";
document.querySelector(".mask.full .fill").style.transform = "rotate(" + percent * 1.8 + "deg)";
document.querySelector(".mask.half .fill").style.transform = "rotate(" + percent * 1.8 + "deg)";


✔️ Code zote zinafanya kazi instantly
✔️ Unaweza kubadilisha colors, speed, na percentages

🔗 Links Za Kujifunza Zaidi

🌐 Faulink – Namba 1 Tanzania kwa Web Design & Programming
https://www.faulink.com/

📘 Tutorials & Mifumo Ya Kujifunza
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada
https://wa.me/255693118509