Create a semicircle progress bar with rounded edges and a shadow using JavaScript and CSS

Question

Create a semicircle progress bar with rounded edges and a shadow using JavaScript and CSS

Despite my extensive search efforts, I have been unable to find a solution. My goal is to create a progress bar with rounded corners that includes a shadow. So far, this is what I have managed:

$(".progress-bar").each(function(){
  
  var bar = $(this).find(".bar");
  var val = $(this).find("span");
  var per = parseInt( val.text(), 10);

  $({p:0}).animate({p:per}, {
    duration: 3000,
    easing: "swing",
    step: function(p) {
      bar.css({
        transform: "rotate("+ (45+(p*1.8)) +"deg)"
      });
      val.text(p|0);
    }
  });
});

body{
  background-color:#3F63D3;  
}

.progress-bar{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ 
  position: relative;
  overflow: hidden; 
  width: 150px; height: 70px; 
  margin-bottom: -14px;
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 150px; height: 150px; 
  border-radius: 50%;
  box-sizing: border-box;
  border: 15px solid gray;       
  border-bottom-color: white; 
  border-right-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>100</span>% 
</div>

I am aiming to achieve rounded corners and incorporate a shadow effect as shown in the accompanying image below. Unfortunately, I lack the expertise in creating the shadow element:

https://i.sstatic.net/ay1op.png

Although I have experimented with Progressbar.js, my understanding of SVG is limited. Any guidance or solution on this matter would be greatly appreciated.

javascript jquery html css progress-bar

Answer 1

Answer №1

@jaromanda for suggesting learning SVG.

It seems quite challenging to achieve with border-radius. Therefore, I delved into SVG and found it to be quite useful. Here is the code snippet that I came up with:

// Using the ProgressBar.js library
// Documentation: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 10,
  color: 'red',
  trailColor: '#eee',
  trailWidth: 10,
  easing: 'easeInOut',
  duration: 1400,
  svgStyle: null,
  text: {
    value: '',
    alignToBottom: false
  },
  
  // Set default step function for all animate calls
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
    var value = Math.round(bar.value() * 100);
    if (value === 0) {
      bar.setText('');
    } else {
      bar.setText(value+"%");
    }

    bar.text.style.color = state.color;
  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(0.45);  // Number ranges from 0.0 to 1.0

#container {
  width: 200px;
  height: 100px;
}

svg {
  height: 120px;
  width: 200px;
  fill: none;
  stroke: red;
  stroke-width: 10;
  stroke-linecap: round;
  -webkit-filter: drop-shadow( -3px -2px 5px gray );
  filter: drop-shadow( -3px -2px 5px gray );
  }

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>

Answer 2

@jaromanda for suggesting learning SVG.

It seems quite challenging to achieve with border-radius. Therefore, I delved into SVG and found it to be quite useful. Here is the code snippet that I came up with:

// Using the ProgressBar.js library
// Documentation: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 10,
  color: 'red',
  trailColor: '#eee',
  trailWidth: 10,
  easing: 'easeInOut',
  duration: 1400,
  svgStyle: null,
  text: {
    value: '',
    alignToBottom: false
  },
  
  // Set default step function for all animate calls
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
    var value = Math.round(bar.value() * 100);
    if (value === 0) {
      bar.setText('');
    } else {
      bar.setText(value+"%");
    }

    bar.text.style.color = state.color;
  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(0.45);  // Number ranges from 0.0 to 1.0

#container {
  width: 200px;
  height: 100px;
}

svg {
  height: 120px;
  width: 200px;
  fill: none;
  stroke: red;
  stroke-width: 10;
  stroke-linecap: round;
  -webkit-filter: drop-shadow( -3px -2px 5px gray );
  filter: drop-shadow( -3px -2px 5px gray );
  }

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>

Answer 3

Answer №2

One unconventional yet efficient suggestion for your current use of position: absolute is to incorporate a background color change in the circles during the animation initiation.

Incorporating this into your code:

<div class="progress-bar">
    <div class="left"></div>
    <div class="right"><div class="back"></div></div>
    <div class="barOverflow">
        <div class="bar"></div>
    </div>
    <span>0</span>%
</div>

Remember to add these CSS styles:

/* Your existing CSS code goes here */
body{
    background-color:#3F63D3;  
}

.progress-bar{
    position: relative;
    margin: 4px;
    float: left;
    text-align: center;
}
.barOverflow{ 
    position: relative;
    overflow: hidden; 
    width: 150px; height: 70px; 
    margin-bottom: -14px;
}
/* Add additional classes and styles as needed */

For jQuery functionality:

$(".progress-bar").each(function(){
    // Include your animations and logic here
    // Ensure to handle different scenarios based on progress percentage

});

View the updated code on JSFiddle

Answer 4

One unconventional yet efficient suggestion for your current use of position: absolute is to incorporate a background color change in the circles during the animation initiation.

Incorporating this into your code:

<div class="progress-bar">
    <div class="left"></div>
    <div class="right"><div class="back"></div></div>
    <div class="barOverflow">
        <div class="bar"></div>
    </div>
    <span>0</span>%
</div>

Remember to add these CSS styles:

/* Your existing CSS code goes here */
body{
    background-color:#3F63D3;  
}

.progress-bar{
    position: relative;
    margin: 4px;
    float: left;
    text-align: center;
}
.barOverflow{ 
    position: relative;
    overflow: hidden; 
    width: 150px; height: 70px; 
    margin-bottom: -14px;
}
/* Add additional classes and styles as needed */

For jQuery functionality:

$(".progress-bar").each(function(){
    // Include your animations and logic here
    // Ensure to handle different scenarios based on progress percentage

});

View the updated code on JSFiddle

Answer 5

Answer №3

After experimenting with various methods, I discovered that using SVG instead of pure CSS made the implementation much simpler.

Despite my efforts, I couldn't find a straightforward solution using just HTML and CSS alone without any additional libraries, external scripts, or dependencies. The complexity of the math involved in calculating SVG transformations to represent the percentage meant that JavaScript was necessary (if there is a way to achieve this solely with HTML and CSS, I am eager to learn). However, the JavaScript script used is brief and uncomplicated, making it unnecessary to introduce another dependency to the codebase.

The calculations in the JavaScript are relatively simple once you go over them. It involves determining the coordinates for the end point of the gauge within the SVG's coordinate system, which essentially boils down to basic trigonometry.
Much of the CSS included is purely for aesthetic purposes and to enhance the visual appeal. Similar to styling any HTML shape, you can incorporate shadows or gradients as desired.
You can explore the codePen example here.

This code can be modified to create various circular gauge shapes (full circle, lower semi-circle, ellipsis, etc.) by tweaking it accordingly.

Hopefully, this information proves to be beneficial.

// # Credits to mxle for the initial rounded corner CSS-only solution: https://stackoverflow.com/a/42478006/4709712
// # Special thanks to Aniket Naik for the design inspiration and the foundational idea and implementation: https://codepen.io/naikus/pen/BzZoLL 
//     - Aniket Naik has an associated library mentioned in the codepen that might be worth exploring if custom implementation is not preferred

// The radius measurements in the meter-value remain consistent, ensuring x=y and never going below the minimum circle diameter connecting the two points (to maintain curve precision matching background path)
// To adjust gauge size and style, modify its parent element and utilize transform scale rather than directly editing SVG width and height properties
function percentageInRadians(percentage) {
  return percentage * (Math.PI / 100);
}

function setGaugeValue(gaugeElement, percentage, color) {
  const gaugeRadius = 65;
  const startingY = 70;
  const startingX = 10;

  const zeroBasedY = gaugeRadius * Math.sin(percentageInRadians(percentage));
  const y = -zeroBasedY + startingY;
  const zeroBasedX = gaugeRadius * Math.cos(percentageInRadians(percentage));
  const x = -zeroBasedX + gaugeRadius + startingX;

  gaugeElement.innerHTML = `<path d="M ${startingX} ${startingY}
           A ${gaugeRadius} ${gaugeRadius} 0 0 1 ${x} ${y}
           " stroke="${color}" stroke-width="10" stroke-linecap="round" />`;
}

percentageChangedEvent = (gauge, newPercentage, color) => {
  const percentage =
    newPercentage > 100 ? 100 : newPercentage < 0 ? 0 : newPercentage;
  setGaugeValue(gauge, percentage, color);
};

function initialGaugeSetup(gaugeElementId, inputId, meterColor, initialValue) {
  const gaugeElement = document.getElementById(gaugeElementId);
  setGaugeValue(gaugeElement, 0, meterColor);

  const inputElement = document.getElementById(inputId);

  inputElement.value = initialValue;
  setGaugeValue(gaugeElement, initialValue, meterColor);

  inputElement.addEventListener("change", (event) =>
    percentageChangedEvent(gaugeElement, event.target.value, meterColor)
  );
}

// Gauge Initial Configuration
initialGaugeSetup(
  "svg-graph-meter-value",
  "svg-gauge-percentage-2",
  "rgb(227 127 215)",
  40
);

body {
  background-color: rgba(0, 0, 0, 0.8);
  color: #999;
  font-family: Helvetica, sans-serif;
}


/* SVG Path Implementation */

.svg-container {
  margin: 20px auto 10px;
  height: 80px;
  width: 150px;
}

svg {
  fill: transparent;
}

.input-percent-container {
  text-align: center;
}

.input-percent-container>* {
  display: inline;
}

input {
  text-align: right;
  width: 40px;
  margin: auto;
  background-color: #5d5d5d;
  color: white;
  border-radius: 6px;
  border: black;
}

<div class="svg-container">
  <svg width="150" height="80" xmlns="http://www.w3.org/2000/svg">
      <path d="M 10 70
           A 65 65 0 1 1 140 70
           " stroke="grey" stroke-width="3" stroke-linecap="round" />
      <g id="svg-graph-meter-value">
      </g>
    </svg>
</div>
<div class="input-percent-container"><input id="svg-gauge-percentage-2" /><span>%<span/></div>

Answer 6

After experimenting with various methods, I discovered that using SVG instead of pure CSS made the implementation much simpler.

Despite my efforts, I couldn't find a straightforward solution using just HTML and CSS alone without any additional libraries, external scripts, or dependencies. The complexity of the math involved in calculating SVG transformations to represent the percentage meant that JavaScript was necessary (if there is a way to achieve this solely with HTML and CSS, I am eager to learn). However, the JavaScript script used is brief and uncomplicated, making it unnecessary to introduce another dependency to the codebase.

The calculations in the JavaScript are relatively simple once you go over them. It involves determining the coordinates for the end point of the gauge within the SVG's coordinate system, which essentially boils down to basic trigonometry.
Much of the CSS included is purely for aesthetic purposes and to enhance the visual appeal. Similar to styling any HTML shape, you can incorporate shadows or gradients as desired.
You can explore the codePen example here.

This code can be modified to create various circular gauge shapes (full circle, lower semi-circle, ellipsis, etc.) by tweaking it accordingly.

Hopefully, this information proves to be beneficial.

// # Credits to mxle for the initial rounded corner CSS-only solution: https://stackoverflow.com/a/42478006/4709712
// # Special thanks to Aniket Naik for the design inspiration and the foundational idea and implementation: https://codepen.io/naikus/pen/BzZoLL 
//     - Aniket Naik has an associated library mentioned in the codepen that might be worth exploring if custom implementation is not preferred

// The radius measurements in the meter-value remain consistent, ensuring x=y and never going below the minimum circle diameter connecting the two points (to maintain curve precision matching background path)
// To adjust gauge size and style, modify its parent element and utilize transform scale rather than directly editing SVG width and height properties
function percentageInRadians(percentage) {
  return percentage * (Math.PI / 100);
}

function setGaugeValue(gaugeElement, percentage, color) {
  const gaugeRadius = 65;
  const startingY = 70;
  const startingX = 10;

  const zeroBasedY = gaugeRadius * Math.sin(percentageInRadians(percentage));
  const y = -zeroBasedY + startingY;
  const zeroBasedX = gaugeRadius * Math.cos(percentageInRadians(percentage));
  const x = -zeroBasedX + gaugeRadius + startingX;

  gaugeElement.innerHTML = `<path d="M ${startingX} ${startingY}
           A ${gaugeRadius} ${gaugeRadius} 0 0 1 ${x} ${y}
           " stroke="${color}" stroke-width="10" stroke-linecap="round" />`;
}

percentageChangedEvent = (gauge, newPercentage, color) => {
  const percentage =
    newPercentage > 100 ? 100 : newPercentage < 0 ? 0 : newPercentage;
  setGaugeValue(gauge, percentage, color);
};

function initialGaugeSetup(gaugeElementId, inputId, meterColor, initialValue) {
  const gaugeElement = document.getElementById(gaugeElementId);
  setGaugeValue(gaugeElement, 0, meterColor);

  const inputElement = document.getElementById(inputId);

  inputElement.value = initialValue;
  setGaugeValue(gaugeElement, initialValue, meterColor);

  inputElement.addEventListener("change", (event) =>
    percentageChangedEvent(gaugeElement, event.target.value, meterColor)
  );
}

// Gauge Initial Configuration
initialGaugeSetup(
  "svg-graph-meter-value",
  "svg-gauge-percentage-2",
  "rgb(227 127 215)",
  40
);

body {
  background-color: rgba(0, 0, 0, 0.8);
  color: #999;
  font-family: Helvetica, sans-serif;
}


/* SVG Path Implementation */

.svg-container {
  margin: 20px auto 10px;
  height: 80px;
  width: 150px;
}

svg {
  fill: transparent;
}

.input-percent-container {
  text-align: center;
}

.input-percent-container>* {
  display: inline;
}

input {
  text-align: right;
  width: 40px;
  margin: auto;
  background-color: #5d5d5d;
  color: white;
  border-radius: 6px;
  border: black;
}

<div class="svg-container">
  <svg width="150" height="80" xmlns="http://www.w3.org/2000/svg">
      <path d="M 10 70
           A 65 65 0 1 1 140 70
           " stroke="grey" stroke-width="3" stroke-linecap="round" />
      <g id="svg-graph-meter-value">
      </g>
    </svg>
</div>
<div class="input-percent-container"><input id="svg-gauge-percentage-2" /><span>%<span/></div>

Create a semicircle progress bar with rounded edges and a shadow using JavaScript and CSS

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to confirm that a SQL pool has been successfully created in an Express JS?

How can you efficiently load images as you scroll without encountering duplicates?

Video player on website experiencing issues with playing VAST ads

Creating synchronicity in your code within the useEffect hook

Mastering the art of blending images seamlessly for a captivating cross-fading effect

Exploring the world of data manipulation in AngularJS

Remove a Row from a Table by Clicking a Button with Ajax

The width of each column in this dataset is variable and unknown

Difficulty Establishing a Connection with SQL Server Using TypeORM

What is the alternative method for reading an HTML text file in JavaScript without utilizing the input type file?

Retrieving the value of onCheck from the Checkbox/ListItem

JQuery Mobile header style vanishing when applied to a page generated dynamically

Problem encountered when implementing multiple filters in Vanilla JavaScript

Interact with an external JavaScript function using a button within a web application

Encountering exception: Issue occurred post Node version upgrade, indicating "write after end" error

axios interceptor - delay the request until the cookie API call is completed, and proceed only after that

Transforming the output byte array into a Blob results in file corruption

In need of assistance with posting data on a Captive Portal using Ruckus AccessPoint Javascript

A guide on verifying if two arrays of integers are permutations using JavaScript

Ajax-powered Datatables