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