Web Components Circular Progress Overview

    The Ignite UI for Web Components Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. The circular indicator updates its appearance as its state changes.

    Web Components Circular Progress Example

    EXAMPLE
    TS
    HTML
    CircularProgressStyle.css
    index.css
    Edit in:

    Usage

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents
cmd

    You will then need to import the IgcCircularProgressComponent, its necessary CSS, and register its module, like so:

    import {defineComponents, IgcCircularProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCircularProgressComponent);
ts

    For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

    The simplest way to start using the IgcCircularProgressComponent is as follows:

    <igc-circular-progress value="100"></igc-circular-progress>
html

    Progress Types

    You can set the type of your indicator, using the variant attribute. There are five types of circular progress indicators - primary (default), error, success, info, and warning.

    <igc-circular-progress value="100" variant="success"></igc-circular-progress>
html

    Indeterminate Progress

    If you want to track a process that is not determined precisely, you can set the indeterminate property. Also, you can hide the default label of the Ignite UI for Web Components IgcCircularProgressComponent by setting the hideLabel property and customize the progress indicator default label via the exposed labelFormat property.

    <igc-circular-progress value="100" indeterminate="true"></igc-circular-progress>
html

    The following sample demonstrates the above configuration:

    EXAMPLE
    TS
    HTML
    IndeterminateCircularProgressStyle.css
    index.css
    Edit in:

    Animation Duration

    You can use the animationDuration property on the IgcCircularProgressComponent component to specify how long the animation cycle should take in milliseconds.

    <igc-circular-progress animation-duration="5000" indeterminate></igc-circular-progress>
html

    Gradient Progress

    Customizing the progress bar in order to use a color gradient instead of a solid color could be done via the exposed gradient slot and IgcCircularGradientComponent which defines the gradient stops.

    EXAMPLE
    TS
    HTML
    DynamicCircularProgressStyle.css
    index.css
    Edit in:

    For each IgcCircularGradientComponent defined as gradient slot of Ignite UI for Web Components IgcCircularProgressComponent a SVG stop element would be created. The values passed as color, offset and opacity would be set as stop-color, offset and stop-opacity of the SVG element without further validations.

    <igc-circular-progress>
    <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079"></igc-circular-gradient>
</igc-circular-progress>
html

    Styling

    The IgcCircularProgressComponent component exposes CSS parts for almost all of its inner elements:

    Name Description
    svg The progress SVG element.
    gradient_start The progress linear-gradient start color.
    gradient_end The progress linear-gradient end color.
    track The progress ring's track area.
    fill The progress indicator area.
    label The progress label.
    value The progress label value.
    indeterminate The progress indeterminate state.
    primary The progress indicator primary state.
    danger The progress indicator error state.
    warning The progress indicator warning state.
    info The progress indicator info state.
    success The progress indicator success state.

    Using this CSS parts we have almost full control over the Circular Progress styling.

    
igc-circular-progress {
  margin: 20px;
  --diameter: 50px;
}

igc-circular-progress::part(gradient_end),
igc-circular-progress::part(gradient_start) {
  stop-color: var(--ig-success-200);
}

igc-circular-progress::part(track) {
  stroke: var(--ig-gray-400);
}

css

    EXAMPLE
    TS
    HTML
    CircularProgressStyling.css
    index.css
    Edit in:

    API References

    Additional Resources