Filling a circle border by percent

Question

I tried implementing several guides to creating a circle which fills according to a percentage but i can't seem to get it to work (no animation, only a static CSS circle).

The circle border currently abides to background-image: linear-gradient which i first set to a (90+(360*0.percent))deg and a second one which is set to 90deg. It works well on the first 50% but beyond that it doesn't fill accordingly.

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #ffffff;
}

.circle-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  margin-left: 30%;
  border-radius: 100%;
  background-color: #E53B3B;
  background-image: linear-gradient(162deg, transparent 50%, #f0f0f0 50%), linear-gradient(90deg, #f0f0f0 50%, transparent 50%);
}

<div class="circle-border">
  <div class="circle">
  </div>
</div>

What values of linear-gradient should be changed when i want the circle to be filled for more than 50%?

check this : https://stackoverflow.com/a/52205730/8620333 almost the same with all the cases — Temani Afif, Dec 29 '18 at 22:59
[This](http://circle.firchow.net/) is nice pure CSS3 solution, with [source code](http://circle.firchow.net/css-circle.zip). — Laurens Deprost, Dec 29 '18 at 23:05

score 9 · Accepted Answer · answered Dec 30 '18 at 07:33

For first linear part, you can use linear-gradient:(270deg,...) for filling 50% of the circle.

For other linear part, you can increase the angle (270°+) to fill more than 50% of the circle (360° or 0° = 75% of the circle ... 90° = 100% of the circle)

For example: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%) combination creates a circle with a lightgray background, filled with seventy-five percent black color. (snippet below)

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #ffffff;
}

.circle-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  margin-left: 30%;
  border-radius: 100%;
  background-color: #E53B3B;
  background: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%)
}

<div class="circle-border">
  <div class="circle">
  </div>
</div>

Thank you, this worked exactly as needed. – Guy Ariely Dec 31 '18 at 06:02 — Guy Ariely, Dec 31 '18 at 06:02

score -3 · Answer 2 · answered Dec 29 '18 at 23:12

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #ffffff;
}

.circle-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  margin-left: 30%;
  border-radius: 100%;
  background-color: #E53B3B;
  background-image: linear-gradient(162deg, transparent 100%, #f0f0f0 100%), linear-gradient(90deg, #f0f0f0 -100%, transparent 0%);
}

<div class="circle-border">
  <div class="circle">
  </div>
</div>

Just have to play with the numbers.

with what number exactly? – Temani Afif Dec 29 '18 at 23:37 — Temani Afif, Dec 29 '18 at 23:37

Filling a circle border by percent

2 Answers2