Skip to content

Instantly share code, notes, and snippets.

@nicbet
Last active March 6, 2024 21:13
Show Gist options
  • Save nicbet/49a681d036ab8c2886e3419a6e8c6efb to your computer and use it in GitHub Desktop.
Save nicbet/49a681d036ab8c2886e3419a6e8c6efb to your computer and use it in GitHub Desktop.
Bulma Circular Progress Bars
/* 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;
}
<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
Copy link

alexfurr commented Jan 2, 2022

Thats brilliant thank you for supporting the community!

@wobsoriano
Copy link

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

@nicbet
Copy link
Author

nicbet commented Dec 8, 2022

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

They are part of the Bulma framework

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment