Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

Progress-circle

A circular progress indicator.

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "size": 100px,
  "viewbox-size": 32,
  "stroke-width": 10,
  "color-track": "placeholder-background-alt",
  "color-progress": "indicator",
  "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": (
    "low": "danger",
    "incomplete": "warning",
    "complete": "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

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

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