How can i make a circle progress bar?-CodePudding

I'd like to make a circular progress bar like this:

semi circular arc progress bar

I was trying with this code.

.circular-progress{
  width:12rem;
  height: 12rem;
  border-radius:50%;
  margin:auto;
  background: linear-gradient(
  0deg,
  black 50%,
  pink 50%);
  position:relative;
  transform: rotate(90deg);
  &:before{
    content:"Hola";
    width:12rem;
  height: 12rem;
    position:absolute;
    top:0;
    left:0;
    border-radius:50%;
      padding: .5rem;
    box-sizing:border-box;
    font-size: 2rem;
    background:#111 content-box;
    color: black;
    text-align:center;
    line-height: 8rem;
    transform: rotate(-90deg);
  }
  &:after{
    width:12rem;
  height: 12rem;
    position:absolute;
    top:0;
    left:0;
    border-radius:50%;
    background: linear-gradient(
    transparent 50%;
      #111 50%
    );
    transform: scale(1.1) rotate(-90deg);
    text-align:center;
    color:#fff;
    line-height: 13rem;
  }
}

<div class="circular-progress"></div>

CodePudding user response：

You can do it like this. Source is here: https://codepen.io/jagathish/pen/ZXzbzN

.progress{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 90px; height: 45px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 90px; height: 90px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #eee;     /* half gray, */
  border-bottom-color: #0bf;  /* half azure */
  border-right-color: #0bf;
}

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>34</span>%
</div>

CodePudding user response：

const width = document.body.offsetWidth;
const height = document.body.offsetHeight;

document.body.addEventListener('mousemove', function(e){
  const relativeWidth = e.clientX / width * 100;
  document.body.style.setProperty('--mouse-x', relativeWidth);
  
  number.dataset.number = parseInt(relativeWidth)   '%';
})

:root {
  --blue: #00bbe4;
  --dark-blue: #5D7582;
  --gray: #5e7583;
  --background: #1B252B;
  --circle-diameter: 20rem;
  --wrapper-height: calc(var(--circle-diameter) / 2)
}

* {
  padding: 0;
  margin: 0;
}

*, *:before, *:after { 
  box-sizing: inherit;
}

body {
  background-color: var(--background);
  font-family: sans-serif;
  box-sizing: border-box;
  display: grid;
  height: 100vh;
  width: 100vw;
  display: grid;
  background-color: var(--background);
}

.progress {
  position: relative;
  margin: auto auto;
  padding: 1rem;
  width: var(--circle-diameter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bar-overflow {
  position: relative;
  overflow: hidden; 
  width: var(--circle-diameter); 
  height: 10rem; 
}

.bar {
  position: absolute;
  top: 0; 
  left: 0;
  width: var(--circle-diameter); 
  height: var(--circle-diameter);
  border-radius: 50%;
  border: 0.5rem solid var(--gray);  
  border-bottom-color: var(--blue); 
  border-right-color: var(--blue);
  
  /* 100% = 180° => ° = % * 1.8 */
  --rotation: calc(45deg   calc(var(--percent) * 1.8 * 1deg));
  transform: rotate(var(--rotation));
}

.info {
  position: absolute;
  background-color: var(--blue);
  color: black;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  min-width: 7.5rem;
  font-weight: bold;
}

.info h2 {
  font-size: 2rem;
}
.info p { 
  font-size: 0.75rem;
}


/* Triangle */
.info-arrow{
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  height: 0px;
  bottom: 100%;
  left: 50%;
}
.info-arrow:after {
  content: " ";
  border-left: solid transparent 0.5rem;
  border-right: solid transparent 0.5rem;
  border-bottom: solid 0.5rem var(--blue);
  position: absolute;
  top: -0.5rem;
  margin-left: -0.5rem;
  height: 0;
  width: 0;
}


.min-max {
  color: var(--gray);
  display: flex;
  justify-content: space-between;
  width: calc(100%   4rem); 
  margin: 0 -2rem;
  margin-top: .5rem;
  padding-left: .75rem;
}

.circle {
  --diameter: 1.5rem;
  height: var(--diameter);
  width: var(--diameter);
  border-radius: 50%;
  background-color: var(--blue);
  border: 2px solid var(--background);
  position: absolute;
  top: 0.5rem;
  
  /* Magic? */
  transform-origin: 0.75rem 10.5rem;
  /* The circle's starting position is at the top in the
  center, -90deg is the position where the bar is 0%. */
  --rotation: calc(-90deg   calc(var(--percent) * 1.8 * 1deg));
  transform: rotate(var(--rotation));
}


.number{
  position: relative;
  z-index: 10;
}

.number:before {
  display: block;
  
  min-width: 5ch;
  content: attr(data-number);
}

<div class="progress" style="--percent: var(--mouse-x, 10)">
  <div class="bar-overflow">
    <div class="bar"></div>
  </div>
  <div class="circle"></div>
  <div class="info">
    <h2 class="number" id="number" data-number="10%"></h2>
    <p>Current percentage</p>
    <div class="info-arrow"></div>
  </div>
  <div class="min-max">
    <span>0%</span>
    <span>100%</span>
  </div>
</div>