Skip to main content
Version: 1.x

fast-progress

Progress and progress ring are used to display the length of time a process will take or to visualize percentage value (referred to as a determinate state) and to represent an unspecified wait time (referred to as an indeterminate state). Progress components are typically visually represented by a circular or linear animation. When the value attribute is passed the state is determinate, otherwise it is indeterminate.

For progress components which have a linear visual appearance, use fast-progress. For progress implementations which are circular, use fast-progress-ring.

Setup​

Basic Setup​

import {
    provideFASTDesignSystem,
    fastProgress,
    fastProgressRing
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastProgress(),
        fastProgressRing()
    );

Customizing Indicators​

import {
    provideFASTDesignSystem,
    fastProgress,
    fastProgressRing
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastProgress({
            indeterminateIndicator1: `...your indeterminate indicator...`,
            indeterminateIndicator2: `...your indeterminate indicator...`
        }),
        fastProgressRing({
            indeterminateIndicator: `...your indeterminate indicator...`
        })
    );

Usage​

fast-progress​

Live Editor
<fast-progress min="0" max="100" value="75"></fast-progress>
Result
Loading...

fast-progress-ring​

Live Editor
<fast-progress-ring min="0" max="100" value="75"></fast-progress-ring>
Result
Loading...

Create your own design​

Progress​

import {
    BaseProgress as Progress,
    ProgressOptions,
    progressTemplate as template,
} from "@microsoft/fast-foundation";
import { progressStyles as styles } from "./my-progress.styles";

export const myProgress = Progress.compose<ProgressOptions>({
    baseName: "progress",
    template,
    styles,
    indeterminateIndicator1: `...default indeterminate indicator...`,
    indeterminateIndicator2: `...default indeterminate indicator...`,
});

ProgressRing​

import {
    BaseProgress as ProgressRing,
    ProgressRingOptions,
    progressRingTemplate as template,
} from "@microsoft/fast-foundation";
import { progressRingStyles as styles } from "./my-progress-ring.styles";

export const myProgressRing = ProgressRing.compose<ProgressRingOptions>({
    baseName: "progress-ring",
    template,
    styles,
    indeterminateIndicator: `...default indeterminate indicator...`,
});

API​

class: BaseProgress​

Superclass​

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
valuepublicnumber or nullThe value of the progress
minpublicnumberThe minimum value
maxpublicnumberThe maximum value
pausedpublicbooleanIndicates the progress is paused
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods​

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes​

NameFieldInherited From
value
min
max
paused

CSS Parts​

NameDescription
progressRepresents the progress element
determinateThe determinate indicator
indeterminateThe indeterminate indicator

Slots​

NameDescription
indeterminateThe slot for a custom indeterminate indicator

Additional resources​