---
examples:
    - name: base
      label: Base Progress Ring
      description: Base variant, showing progress rings with values 0, 25, 50, 75, 100.

    - name: drain
      label: Drain (Direction)
      description: By default, the direction is set to fill (clockwise completion of the ring).  Setting the direction to `drain` will cause the ring to complete counterclockwise.

    - name: large
      label: Large size
      description: A progress ring with size set to large

    - name: variantActiveStep
      label: Active Step Variant
      description: ActiveStep variant changes the color to blue

    - name: variantWarning
      label: Warning Variant
      description: Warning variant changes the color and adds the warning icon

    - name: variantExpired
      label: Expired Variant
      description: Expired variant changes the color to red and adds the no-circle icon

    - name: variantBaseAutocomplete
      label: Base Autocomplete Variant
      description: Looks like the base version, except automatically moves to the complete theme when value is 100
---

A `lightning-progress-ring` is used to show a value 0 to 100 in a compact, circular visualization with optional icons and themes.

This component inherits styling from
[progress-ring](https://www.lightningdesignsystem.com/components/progress-ring/) in the
Lightning Design System.
