cannot make 3/4 circle and nest it with progress bar, far now only full circle and progress bar-CodePudding

i am going to do some circular charts and now i have full circle with progress bar but dont know why i cannot make it 3/4circle and progress bar.

code:

<!-- The HTML structure for the progress bar -->
<div >
  <svg  width="100%" height="100%" viewBox="0 0 42 42">
    <circle  cx="21" cy="21" r="15.91549430918954" fill="transparent"/>
    <circle  cx="21" cy="21" r="15.91549430918954" fill="transparent"/>
  </svg>
  <div >0%</div>
</div>

/* The CSS styles for the progress bar */
.progress-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
}

.progress-ring {
  stroke: #ddd;
  stroke-width: 2;
  fill: transparent;
}

.progress-value {
  stroke: #3498db;
  stroke-width: 2;
  fill: transparent;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.3s;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #3498db;
}

// The JavaScript code to update the progress bar
const progressContainer = document.querySelector('.progress-container');
const progressBar = progressContainer.querySelector('.progress-bar');
const progressValue = progressBar.querySelector('.progress-value');
const progressText = progressContainer.querySelector('.progress-text');

const updateProgress = (value) => {
  // Update the value of the progress bar
  progressValue.style.strokeDasharray = `${value} 100`;

  // Update the text inside the progress bar
  progressText.textContent = `${value}%`;
}

updateProgress(50); // Set the progress bar to 50%

This is how it looks like:

but i want it to looks some similar to:

If someone know how to rebuild my code, please help me out.

CodePudding user response：

You would need to draw the 3/4 arc segment with svg path,

<svg  width="100%" height="100%" viewBox="0 0 42 42">
  <!-- 
    <circle  cx="21" cy="21" r="15.91549430918954" fill="transparent"/>
    <circle  cx="21" cy="21" r="15.91549430918954" fill="transparent"/>
  -->
  <path  d="M21 21 m-11.254 11.254 a 15.91549430918954 15.91549430918954 135 1 1 22.508 0" fill="transparent" stroke-linecap="round"/>
  <path  d="M21 21 m-11.254 11.254 a 15.91549430918954 15.91549430918954 135 1 1 22.508 0" fill="transparent" stroke-linecap="round"/>
</svg>

and adjust the length accordingly.

//progressValue.style.strokeDasharray = `${value} 100`;
progressValue.style.strokeDasharray = `${value * 3 / 4} 75`;