// From Boost blocks.scss in M3.5. $chart-size: 70px; $doughnut-border-size: 15px; $doughnut-dasharray: 173; $doughnut-empty-colour: $gray-lighter; $doughnut-fill-colour: $brand-warning; .progress-chart-container { height: $chart-size; width: $chart-size; .progress-doughnut { position: relative; height: $chart-size; width: $chart-size; background-clip: padding-box; border: $doughnut-border-size solid $doughnut-empty-colour; border-radius: 50%; box-sizing: border-box; .progress-text { position: absolute; top: 50%; /*rtl:ignore*/ left: 50%; transform: translate(-50%, -50%); color: $doughnut-empty-colour; &.has-percent { color: $doughnut-fill-colour; } } .progress-indicator { position: absolute; top: ($doughnut-border-size * -1); left: ($doughnut-border-size * -1); height: $chart-size; width: $chart-size; svg { position: relative; height: 100%; width: 100%; .circle { stroke-width: $doughnut-border-size; stroke: $doughnut-fill-colour; fill: none; stroke-dasharray: $doughnut-dasharray; stroke-dashoffset: $doughnut-dasharray; transform: rotate(-90deg); transform-origin: center center; @for $i from 1 through 100 { &.percent-#{$i} { stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray); } } } } } } }