Skip to main content

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
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

fast-progress-ring#

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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...`,});

Additional resources#