Bulma Circular Progress Bars

circular-progress-bar.scss

/* Progress Bars */
$step: 1;
$loops: round(100 / $step);
$increment: 360 / $loops;
$half: round($loops / 2);
$backColor: #fafafa;

.progress-circle {
  position: relative;
  float: left;
  width: 50px;
  height: 50px;
  border: 2px solid $backColor;
  border-radius: 50%;

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    &.is-#{$name} {
      background-color: $color;
      @for $i from 0 through $loops {
        &.is-#{$i * $step} {
          @if $i < $half {
            $nextDeg: 90deg + ($increment * $i);
            background-image: linear-gradient(
                90deg,
                #ccc 50%,
                transparent 50%,
                transparent
              ),
              linear-gradient($nextDeg, $color 50%, #ccc 50%, #ccc);
          } @else {
            $nextDeg: -90deg + ($increment * ($i - $half));
            background-image: linear-gradient(
                $nextDeg,
                $color 50%,
                transparent 50%,
                transparent
              ),
              linear-gradient(270deg, $color 50%, #ccc 50%, #ccc);
          }
        }
        &[value="#{$i}"] {
          @extend .is-#{$i};
        }
      }
    }
  }
}

.progress-inner {
  position: absolute;
  margin-left: 15%;
  margin-top: 15%;
  font-size: 10px;
  font-weight: bold;
  width: 70%;
  height: 70%;
  background-color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

demo.html

<section class="section">
  <div class="container">
    <h1 class="title is-1">Circular Progress Bar</h1>
    <div class="progress-circle is-success" value="40" max="100">
      <span class="progress-inner">40%</span>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <pre>
      &lt;section class=&quot;section&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;h1 class=&quot;title is-1&quot;&gt;Circular Progress Bar&lt;/h1&gt;
          &lt;div class=&quot;progress-circle is-success&quot; value=&quot;40&quot; max=&quot;100&quot;&gt;
            &lt;span class=&quot;progress-inner&quot;&gt;40%&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    </pre>
  </div>
</section>

@alexfurr absolutely, I've updated the gist with an example!

Thats brilliant thank you for supporting the community!

Hi, where can I find the $colors var? Thanks!

Hi, where can I find the $colors var? Thanks!

They are part of the Bulma framework