Dynamic Semi Circle Progress Bar CSS

Dynamic Semi Circle Progress Bar CSS
Code Snippet:Half Circle Progress Bar
Author: groovc
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 2,243
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a dynamic semi-circle progress bar using HTML, CSS, and JavaScript. It visually represents progress as a filled semi-circle and displays points earned within a specified range. This is helpful for tracking and displaying progress or achievements on websites or applications.

You can use this code on your website or app to showcase progress or achievements, engaging users visually. It offers a dynamic and eye-catching way to display point-based milestones, enhancing user experience. Additionally, its customizable CSS allows seamless integration with your website’s design.

How to Create Dynamic Semi-Circle Progress Bar Css

1. Begin by adding the necessary HTML structure to your webpage. You can place this code wherever you want the progress bar to appear.

<div class="widget">
  <div class="progress-container">
    <div class="progress-bar" id="loyalty">
      <div class="points">points</div>
    </div>
  </div>
</div>

2. Next, apply the CSS styles to make the progress bar visually appealing and fit your website’s design. Customize colors, sizes, and fonts to match your preferences.

.progress-container {
  position: relative;
}

.progress-bar {
}

.progress-bar:before {
  content: "0";
  position: absolute;
  left: 2px;
  bottom: 60px;
  font-size: 12px;
  color: rgba(98, 107, 114, 1);
}

.progress-bar:after {
  content: "600";
  position: absolute;
  right: -6px;
  bottom: 60px;
  font-size: 12px;
  color: rgba(98, 107, 114, 1);
}

.widget {
  padding: 25px;
  margin: 0 auto;
  width: 150px;
  margin-top: 25px;
  background-color: #fff;
  -background-color: #222d3a;
  border-radius: 5px;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  position: relative;
}

.points {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 60px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(98, 107, 114, 1);
  font-size: 12px;
}

3. Load the D3 JS (charting library) by adding the following CDN link before closing the body tag:

<script src='//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>

4. Finally, include the JavaScript code to make the progress bar dynamic. This code calculates and animates the progress based on your specified values.

var points = 450;
var maxPoints = 600;
var percent = points / maxPoints * 100;
var ratio = percent / 100;
var pie = d3.layout
  .pie()
  .value(function(d) {
    return d;
  })
  .sort(null);
var w = 150,
  h = 150;
var outerRadius = w / 2 - 10;
var innerRadius = 75;
var color = ["#ececec", "rgba(156,78,176,1)", "#888888"];
var colorOld = "#F00";
var colorNew = "#0F0";
var arc = d3.svg
  .arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius)
  .startAngle(0)
  .endAngle(Math.PI);

var arcLine = d3.svg
  .arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius)
  .startAngle(0);

var svg = d3
  .select("#loyalty")
  .append("svg")
  .attr({
    width: w,
    height: h,
    class: "shadow"
  })
  .append("g")
  .attr({
    transform: "translate(" + w / 2 + "," + h / 2 + ")"
  });

var path = svg
  .append("path")
  .attr({
    d: arc,
    transform: "rotate(-90)"
  })
  .style({
    fill: color[0]
  });

var pathForeground = svg
  .append("path")
  .datum({ endAngle: 0 })
  .attr({
    d: arcLine,
    transform: "rotate(-90)"
  })
  .style({
    fill: function(d, i) {
      return color[1];
    }
  });

var middleCount = svg
  .append("text")
  .datum(0)
  .text(function(d) {
    return d;
  })
  .attr({
    class: "middleText",
    "text-anchor": "middle",
    dy: 0,
    dx: 5
  })
  .style({
    fill: d3.rgb("#000000"),
    "font-size": "36px"
  });

var oldValue = 0;
var arcTween = function(transition, newValue, oldValue) {
  
  transition.attrTween("d", function(d) {
    var interpolate = d3.interpolate(d.endAngle, Math.PI * (newValue / 100));
    var interpolateCount = d3.interpolate(oldValue, newValue);

    return function(t) {
      d.endAngle = interpolate(t);
      // change percentage to points before rendering text
      middleCount.text(Math.floor(interpolateCount(t)/100*maxPoints));

      return arcLine(d);
    };
  });
};

pathForeground
  .transition()
  .duration(750)
  .ease("cubic")
  .call(arcTween, percent, oldValue, points);

You can adjust the points and maxPoints variables to set your desired point values. Customize the CSS to change the appearance of the progress bar to match your website’s style.

That’s all! hopefully, you have successfully created a Semi Circle Progress Bar. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X