hightouch

UI

Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Colors

Layout

BoxColumnRow

Typography

CodeHeadingParagraphSection HeadingText

Navigation

LinkLink Button

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Overlay

Confirmation DialogDrawerFilter MenuMenuTooltip

Forms

ButtonButton GroupCheckboxCheckbox GroupClipboard ButtonComboboxEditable DescriptionEditable HeadingFile InputForm FieldIcon ButtonMulti SelectNumber InputRadioSearch InputSelectSliderSlug InputSwitchTag InputTextareaText Input

Other

AvatarCode SnippetTabs

Upsells

Upsell BadgeUpsell ButtonUpsell CardUpsell DialogUpsell HeadingUpsell Success Dialog

Progress Bar

Progress bar indicates a progress of a long-running action that can be measured or estimated.

#

import { ProgressBar } from "@hightouchio/ui";

function Example() {
const [progress, setProgress] = React.useState(10);

React.useEffect(() => {
const timer = setInterval(() => {
setProgress((previousValue) => {
return previousValue === 100 ? 0 : previousValue + 10;
});
}, 1000);

return () => {
clearInterval(timer);
};
}, []);

return <ProgressBar value={progress} />;
}

#

#

  • When action was performed in the past, prior to user loading the current page.
  • When action is expected to run for a long time and progress can be measured or estimated.

#

  • If action is expected to finish quickly, use a spinner.
  • If you need to display an indication of a progress immediately after user performs an action, use a spinner.

#

Inherits margin props.

NameDefaultDescription
value

—

number

Progress value, a number between 0 and 100.

On this page