How I can animate circular progress bar from left to right?

Question

I have a circle progress bar, only with HTML and CSS, I used keyframes for loading (animation). But the loading is from right to left I wanna reverse it. I edit my CSS keyframes but nothing at all. I try also animation reverse again nothing.

Fiddle: https://jsfiddle.net/d20wu8e4/

My Result (image): https://ibb.co/0KCSsZY

What I want: https://ibb.co/MGCpHqS

* {
 box-sizing:border-box;
}
.progress {
  width: 150px;
  height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}

.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}

.progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress .progress-left {
  left: 0;
}

.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 2px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress .progress-right {
  right: 0;
}

.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading 1.8s linear forwards;
}

.progress .progress-value {
  width: 79%;
  height: 79%;
  border-radius: 50%;
  background: none;
  font-size: 24px;
  color: black;
  line-height: 135px;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 5%;
}

.progress.one .progress-bar {
  border-color: black;
}

.progress.one .progress-left .progress-bar {
  animation: loading-1 1s linear forwards 1.8s;
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

<div class="container bg-danger">
  <div class="row mt-5">
    <div class="progress one">
      <span class="progress-left">
                <span class="progress-bar"></span>
      </span>
      <span class="progress-right ">
                <span class="progress-bar"></span>
      </span>
      <div class="progress-value">73%</div>
    </div>
  </div>
</div>

better use SVG or you will have headaches trying to animate this to different percentage values. — Temani Afif, Jun 23 '19 at 20:05
Try this tutorial - [Radial Progress Meters (CSS/SVG)](https://codepen.io/xgad/post/svg-radial-progress-meters) — Ori Drori, Jun 23 '19 at 20:29
a trivial solution is to rotate the whole animation like this: https://jsfiddle.net/4wby1j2e/ — Temani Afif, Jun 23 '19 at 20:36
@TemaniAfif: Is that just through adding `transform: scaleX(-1)`? How exactly does that reverse? I did it by negating transform values and putting delay on the right side not the left: https://jsfiddle.net/1bu8790f/1/ — Adrift, Jun 23 '19 at 20:41
@Adrift yes, scaling the whole container without touching the animation is easier. Negating the value of transfom won't be enough because you have to also adjust the position of the elements — Temani Afif, Jun 23 '19 at 20:44
@Adrift it's like you create a mirror of what we have without bothering about how it works — Temani Afif, Jun 23 '19 at 20:44
Thank you @TemaniAfif, you are awesome. Everything is excellent now. — Carolyn Meete, Jun 23 '19 at 21:11
@CarolynMeete I added my comment as an answer and also added another alternative, you may consider accepting it ;) — Temani Afif, Jun 29 '19 at 20:17

Temani Afif · Answer 1 · 2019-06-24T07:48:32.387

As I commented, the trivial solution is to rotate the whole animation:

* {
 box-sizing:border-box;
}
.progress {
  width: 150px;
  height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
  transform: scaleX(-1);
}

.progress-value {
  transform: scaleX(-1);
}

.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}

.progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress .progress-left {
  left: 0;
}

.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 2px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress .progress-right {
  right: 0;
}

.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading 1.8s linear forwards;
}

.progress .progress-value {
  width: 79%;
  height: 79%;
  border-radius: 50%;
  background: none;
  font-size: 24px;
  color: black;
  line-height: 135px;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 5%;
}

.progress.one .progress-bar {
  border-color: black;
}

.progress.one .progress-left .progress-bar {
  animation: loading-1 1s linear forwards 1.8s;
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

<div class="progress one">
  <span class="progress-left">
                <span class="progress-bar"></span>
  </span>
  <span class="progress-right ">
                <span class="progress-bar"></span>
  </span>
  <div class="progress-value">73%</div>
</div>

By the way here is another idea that rely on less code. The trick is to consider clip-path where you will adjust the position of the different points in order to create the needed animation

.box {
  width:150px;
  height:150px;
  margin:20px;
  box-sizing:border-box;
  
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:5px solid #000;
  border-radius:50%;
  transform:rotate(45deg);
  clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
  animation:change 2s linear forwards;
}

@keyframes change {
  25% {
    clip-path:polygon(50% 50%,0 0,   0 100%,0 100%,0 100%,0 100%);
  }
  50% {
    clip-path:polygon(50% 50%,0 0,0 100%,   100% 100%, 100% 100%,100% 100%);
  }
  75% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%,    100% 0,100% 0);
  }
  100% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,     0% 0%);
  }
}

body {
 background:pink;
}

<div class="box">
  73%
</div>

To better understand the animation, add background and remove the radius. We basically have 6 points in the polygon where 2 are fixed (the center (50% 50%) and top one (0 0)) then we move the 4 others to put them in the corners. The trick is to move them together and we leave one at each corner (each state of the animation).

.box {
  width:100px;
  height:100px;
  margin:50px;
  box-sizing:border-box;
  
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:0;
  background:rgba(0,0,0,0.5);
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:5px solid #000;
  background:red;
  transform:rotate(45deg);
  clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
  animation:change 5s linear forwards;
}

@keyframes change {
  25% {
    clip-path:polygon(50% 50%,0 0,   0 100%,0 100%,0 100%,0 100%);
  }
  50% {
    clip-path:polygon(50% 50%,0 0,0 100%,   100% 100%, 100% 100%,100% 100%);
  }
  75% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%,    100% 0,100% 0);
  }
  100% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,     0% 0%);
  }

}

body {
 background:pink;
}

<div class="box">
  73%
</div>

With this code you have the full animation, simply adjust the final state or remove some states to stop it where you want.

Ex with 75% (we remove the last state)

.box {
  width:150px;
  height:150px;
  margin:20px;
  box-sizing:border-box;
  
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:5px solid #000;
  border-radius:50%;
  transform:rotate(45deg);
  clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
  animation:change 3s linear forwards;
}

@keyframes change {
  33% {
    clip-path:polygon(50% 50%,0 0,   0 100%,0 100%,0 100%,0 100%);
  }
  66% {
    clip-path:polygon(50% 50%,0 0,0 100%,   100% 100%, 100% 100%,100% 100%);
  }
  100% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%,    100% 0,100% 0);
  }
}
body {
 background:pink;
}

<div class="box">
  75%
</div>

With 66% (we remove the last state and we change the percentage of the third one)

.box {
  width:150px;
  height:150px;
  margin:20px;
  box-sizing:border-box;
  
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:5px solid #000;
  border-radius:50%;
  transform:rotate(45deg);
  clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
  animation:change 2s linear forwards;
}

@keyframes change {
  33% {
    clip-path:polygon(50% 50%,0 0,   0 100%,0 100%,0 100%,0 100%);
  }
  66% {
    clip-path:polygon(50% 50%,0 0,0 100%,   100% 100%, 100% 100%,100% 100%);
  }
  100% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%,    100% 0,100% 40%);
  }
}

<div class="box">
  75%
</div>

with 10% (only one state)

.box {
  width:150px;
  height:150px;
  margin:20px;
  box-sizing:border-box;
  
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:5px solid #000;
  border-radius:50%;
  transform:rotate(45deg);
  clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
  animation:change 1s linear forwards;
}

@keyframes change {
  100% {
    clip-path:polygon(50% 50%,0 0,   0 40%,0 40%,0 40%,0 40%);
  }
}
body {
 background:pink;
}

<div class="box">
  10%
</div>

Ori Drori · Answer 2 · 2019-06-29T16:07:12.083

This progress works in new blink/webkit browsers since it uses conic-gradient(). In addition, to change the progress we use css variables, so animation will require JS.

The idea is to create a conic gradient of black to transparent, and change the degrees according to the progress. To get a line instead of a circle, I use an inner gradient from white to white, that doesn't cover the border (background-clip: content-box) as suggested by @TemaniAfif.

Play with the values of the input box to see the progress.

const progress = document.querySelector('.circular-progress')

const updateProgress = value => {
  progress.style.setProperty('--percentage', `${value * 3.6}deg`)
  progress.innerText = `${value}%`
}

updateProgress(36)

document.querySelector('input')
  .addEventListener('input', e => {
    updateProgress(e.currentTarget.value)
  })

.circular-progress {
  display: flex;
  width: 150px;
  height: 150px;
  border:5px solid transparent;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  background:
    linear-gradient(#fff, #fff) content-box no-repeat,
    conic-gradient(black var(--percentage,0), transparent var(--percentage,0)) border-box; 
  --percentage: 0deg;
}

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

<br />

Progress value: <input type="number" min="0" max="100" value="36">

And for the other direction (added by @TemaniAfif):

const progress = document.querySelector('.circular-progress')

const updateProgress = value => {
  progress.style.setProperty('--percentage', `${value * 3.6}deg`)
  progress.innerText = `${value}%`
}

updateProgress(36)

document.querySelector('input')
  .addEventListener('input', e => {
    updateProgress(e.currentTarget.value)
  })

.circular-progress {
  display: flex;
  width: 150px;
  height: 150px;
  border:5px solid transparent;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  background:
    linear-gradient(#fff, #fff) content-box no-repeat,
    conic-gradient(from calc(-1*var(--percentage)), black var(--percentage,0), transparent var(--percentage,0)) border-box; 
  --percentage: 0deg;
}

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

<br />

Progress value: <input type="number" min="0" max="100" value="36">

A variation on the same idea, is to create progress circle with multiple colors, and then hide it using a gradient from transparent to white. Make the transparent area bigger to expose the colored line.

const progress = document.querySelector('.circular-progress')

const updateProgress = value => {
  progress.style.setProperty('--percentage', `${value * 3.6}deg`)
  progress.innerText = `${value}%`
}

updateProgress(80)

document.querySelector('input')
  .addEventListener('input', e => {
    updateProgress(e.currentTarget.value)
  })

.circular-progress {
  display: flex;
  width: 150px;
  height: 150px;
  border: 5px solid transparent;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  background: 
    linear-gradient(#fff, #fff) content-box no-repeat,
    conic-gradient(transparent var(--percentage, 0), white var(--percentage, 0)) border-box,
    conic-gradient(green 120deg, yellow 120deg 240deg, red 240deg) border-box;
  --percentage: 0deg;
}

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

<br /> Progress value: <input type="number" min="0" max="100" value="80">

You can also optimize with multiple background trick relying on background-origin/background-clip: https://jsfiddle.net/a91ebko8/1/ — Temani Afif, Jun 23 '19 at 23:39
Nice use of multiple backgrounds and clipping. I've updated all examples with the optimization. — Ori Drori, Jun 23 '19 at 23:52

How I can animate circular progress bar from left to right?

2 Answers2

Linked

Related