Progress-circle

Jump To:

A circular progress indicator.

Demos

Basic Donut Chart

A circular progress indicator using an SVG donut chart structure.

65%

<div class="progress-circle">
  <div class="progress-circle__chart">
    <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
      <circle class="progress-circle__chart-track" cx="16" cy="16" r="11"></circle>
      <circle class="progress-circle__chart-pie" cx="16" cy="16" r="11" style="stroke-dasharray: 65 100;"></circle>
      <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
    </svg>
    <strong class="progress-circle__chart-value">65%</strong>
  </div>
</div>

Pie Chart Variant

Using the `progress-circle--pie` modifier to create a solid circular progress indicator.

40%

<div class="progress-circle progress-circle--pie">
  <div class="progress-circle__chart">
    <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
      <circle class="progress-circle__chart-track" cx="16" cy="16" r="16"></circle>
      <circle class="progress-circle__chart-pie" cx="16" cy="16" r="16" style="stroke-dasharray: 40 100;"></circle>
      <circle class="progress-circle__chart-mask" cx="16" cy="16" r="16"></circle>
    </svg>
    <strong class="progress-circle__chart-value" style="color: white;">40%</strong>
  </div>
</div>

Small Progress Circle

Using the `progress-circle--small` modifier for space-constrained layouts.

85% Complete

<div class="progress-circle progress-circle--small">
  <div class="progress-circle__chart">
    <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
      <circle class="progress-circle__chart-track" cx="16" cy="16" r="9.5"></circle>
      <circle class="progress-circle__chart-pie" cx="16" cy="16" r="9.5" style="stroke-dasharray: 85 100;"></circle>
      <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
    </svg>
  </div>
  <div class="progress-circle__value">85% Complete</div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "size": 100px,
  "viewbox-size": 32,
  "stroke-width": 10,
  "color-track": "placeholder-background-alt",
  "color-progress": "accent",
  "color-mask": white,
  "color-mask-pie": rgba(255, 255, 255, 0.4),
  "value-color": "type",
  "value-color-outside": "type-tertiary",
  "value-margin-outside" : (0.1em 0.35em),
  "transition-duration" : 300ms,
  "animation-duration" : 1s,
  "animation-delay" : 2s,
  "animation-timing" : ease-in,
  "status-colors": (
    "danger": "danger",
    "warning": "warning",
    "success": "success",
  ),
  "sizes": (
    "small" : (
      "size": 40px,
      "stroke-width": 13,
    )
  )
);

File Information

File: _progress-circle.scss
Group: progress-circle
Type: variable
Lines (comments): 12-29
Lines (code): 31-57

Map Properties

Name	Type	Default	Description
size	Dimension	100px	The width and height of the chart.
viewbox-size	Number	32	The size of the SVG viewbox. Used to calculate mask radius.
stroke-width	Number	10	The width of the progress circle's stroke.
color-track	Color	"placeholder-background-alt"	The color of the inactive track. Can be a theme color name or a CSS variable.
color-progress	Color	"indicator"	The color of the progress stroke in a neutral state. Can be a theme color name or a CSS variable.
color-mask	Color	white	The color of the center mask that creates the donut hole. Can be a theme color name or a CSS variable.
color-mask-pie	Color	rgba(255, 255, 255, 0.5)	The mask color when using the pie style modifier.
value-color	Color	"type"	The theme color name for the percentage text inside the circle.
value-color-outside	Color	"type-tertiary"	The theme color name for the percentage text when displayed outside the circle.
value-margin-outside	Dimension	List	(0.1em 0.35em)
transition-duration	Time	300ms	The duration for the stroke transition animation (when the component is updating already in the page)
animation-duration	Time	1s	The duration for the stroke animation (relies on template having a custom build animation per pie based on dash array). This is used for initial animations
animation-delay	Time	2s	The delay for the animation
animation-timing	Time	ease-in	Timing function for animation
status-colors	Map		A map of status names to their corresponding colors (e.g., "low": "warning").
sizes	Map		A map of size variations. Each key is a modifier name (e.g., "small") and the value is a map with `size` and `stroke-width` properties.

Mixins

set()

Mixin

Change modules $config

File Information

File: _progress-circle.scss
Group: progress-circle
Type: mixin
Lines (comments): 59-60
Lines (code): 61-63

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _progress-circle.scss
Group: progress-circle
Type: mixin
Lines (comments): 71-72
Lines (code): 73-175

Demo

View

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _progress-circle.scss
Group: progress-circle
Type: function
Lines (comments): 65-66
Lines (code): 67-69

Parameters

Name	Type	Description
$name	`String`	Name of property

Require

$config