Finanzchef24 Design System
  • Design Principles
    Utilities
  • isTouchDevice
    Styles
  • Color
  • Layer
  • Link
  • Spacings
  • Text
    Layouts
  • Center
  • Inline
  • Stack
  • Switcher
    Atoms/Molecules
  • Alert
  • AutocompleteInput
  • Badge
  • BoxedCollapsible
  • Breadcrumbs
  • Button
  • Card
  • Checkbox
  • CheckboxGroup
  • Chip
  • Collapsible
  • CollapsibleStateContainer
  • Dash
  • DataSummary
  • Dialog
  • Divider
  • DropdownMenu
  • DropdownMenuItem
  • EkomiFlag
  • EkomiRating
  • ErrorSummary
  • FieldWithAffirmationMark
  • Filter
  • FooterLink
  • FooterLinks
  • FormDescription
  • FormError
  • FormField
  • FormInput
  • FormInputAffix
  • FormInputDate
  • FormInputGroup
  • FormLabel
  • FormSelect
  • FormTextarea
  • GuidanceStepper
  • IconButton
  • IconCircle
  • Icons
  • ImportanceIndicator
  • IndustryIcons
  • InfoBox
  • InputBox
  • InsuranceIcons
  • InsurerIcons
  • LabelledCheckbox
  • LabelledIconRadio
  • LabelledRadio
  • ListItem
  • Logo
  • Markdown
  • PhoneContactLink
  • PlayfulCheckbox
  • PlayfulFormDescription
  • PlayfulInput
  • PlayfulInputPhone
  • PlayfulRadio
  • PlayfulSelect
  • ProgressBar
  • Radio
  • RadioGroup
  • Rating
  • ResponsiveContainer
  • ResponsiveHelper
  • ResponsiveSwitch
  • Table
  • ThreeDotLoader
  • VerticalFlag
  • VisuallyHidden
    Molecules
  • AccountLink
  • AddressSearch
  • Calendar
  • Navigation
  • ProductTypeCard
  • TimeSlotPicker
    Organisms
  • DateTimePicker
  • Footer
  • Header

ProgressBar

This component renders a basic progress bar which works exactly the same as a usual HTML <progress />. Changing the value is also animated.

Example

<ProgressBar max="100" value="80" />

Props

The component accepts the following props:

Property nameTypeRequiredValuesDefault
valuenumber✅-
maxnumber-100