sass - CSS: Circular progress bar adding second color

Question

Here is a jsfiddle: https://jsfiddle.net/pgckezw7/3/

Basically, it works fine with 1 color, but not with 2 colors.

With 2 colors, the problem is if the first percentage is <= 50, then the second percentage will not go past 50 even if the sum of the two colors is > 50. (shown in the 1st circle in jsfiddle)

But with 2 colors, if the first percentage is > 50, it works just as expected (shown in the 2nd and 3rd circles in the jsfiddle)

To show the 2nd color I added the class left-side-2.

$progress(percentage1) and $snapSize(percentage2) are the two percentages that need to be in different colors.

The main logic is inside of draw-progress mixin, at the bottom of the jsfiddle, I looped over the class names for progress-(percentage1)-(percentage2)

Any help or hint is appreciated, maybe the approach I've taken is wrong? Thanks in advance.

Here is the code: HTML:

progress-45-50, doesn't work because percentage1(45) less than 50, which will only add up to 50 total. 45 <= 50 && 45 + 50 > 50, which will only render 45-5.

progress-51-20, works, because percentage1(51) greater than 50.

<div class="pie-wrapper progress-45-50 style-2">
    <span class="label">45<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side-2 half-circle"></div>
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
    <div class="shadow"></div>
  </div>

SCSS:

@mixin draw-progress($progress, $color, $snapSize, $snapColor) {
  .pie {
    .half-circle {
      border-color: $color;
    }
    
    .left-side-2 {
      transform: rotate(($progress + $snapSize) * 3.6deg);
      border-color: $snapColor;
    }

    .left-side {
      transform: rotate($progress * 3.6deg);
    }
    @if $progress + $snapSize > 50 and $progress <= 50 {
      .right-side {
        display: none;
      }
    }
    @if $progress <= 50 {
      .right-side {
        display: none;
      }
    } @else {
      clip: rect(auto, auto, auto, auto);

      .right-side {
        transform: rotate(180deg);
      }
    }
  }
}

I hope to get some help with my draw-progress in scss, this part

@if $progress + $snapSize > 50 and $progress <= 50 {
      .right-side {
        display: none;
      }
    }

question from:https://stackoverflow.com/questions/65856733/css-circular-progress-bar-adding-second-color

Answer 1

I would suggest using easier method like conic-gradient which is well supported now and combine it with CSS variables:

html,
body {
  background: #ecf0f1;
  color: #444;
  font-family: 'Lato', Tahoma, Geneva, sans-serif;
  font-size: 16px;
  padding: 10px;
}

.box {
  font-size: 3em;
  width: 160px;
  height: 160px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position:relative;
  z-index:0;
}

.box::after {
  content: "%";
  font-size: .45em;
}

.box::before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding:16px;
  background:
    linear-gradient(#f3f3f3, #f3f3f3) content-box, /* this background will be shown if mask is no supported */
    conic-gradient(#3498db 0 var(--p1),red calc(var(--p1) + 0.5%) calc(var(--p1) + var(--p2)),grey 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#fff calc(100% - 15px));
}

<div class="box" style="--p1:40%;--p2:50%;">
  45
</div>

<div class="box" style="--p1:75%;--p2:25%;">
  75
</div>

<div class="box" style="--p1:90%;--p2:5%;">
  90
</div>