Wowdash - Bootstrap 5 Admin Dashboard HTML Template

Progress Bar

Dashboard
-
Components / Progress Bar

Default Progress

Progress with multiple color

Progress with right label

10%

30%

50%

70%

90%

Striped Progress

Animated Progress

Gradient Progress

Gradient Progress

10%

30%

50%

70%

90%

Gradient Progress

10%

30%

50%

70%

90%

Progress Circle

40 %

Users

<script> // Floating progress bar $(".progress-wrapper").each(function() { var percentage = $(this).attr("data-perc"); var floatingLabel = $(this).find(".floating-label"); // Set CSS variable to be used in keyframes floatingLabel.css("--left-percentage", percentage); // Trigger reflow to restart animation floatingLabel[0].offsetWidth; // Force reflow floatingLabel.css("animation-name", "none"); floatingLabel.css("left", percentage); // Ensure final position is correct floatingLabel.css("animation-name", "animateFloatingLabel"); }); // Semi Circle progress bar $(".progressBar").each(function() { var $bar = $(this).find(".circleBar"); var $val = $(this).find(".barNumber"); var perc = parseInt($val.text(), 10); $({ p: 0 }).animate({ p: perc }, { duration: 3000, easing: "swing", step: function(p) { $bar.css({ transform: "rotate(" + (45 + (p * 1.8)) + "deg)", // 100%=180° so: ° = % * 1.8 // 45 is to add the needed rotation to have the green borders at the bottom }); $val.text(p | 0); } }); }); </script>