Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
        • Dots
        • Inline
        • Progress
        • Skeleton
        • Spinner
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Color
      • Size
    • Configuration
    • API
      • Progress

    Progress

    A Progress loader communicates progress when downloading or uploading content.

    Table of Contents
    • How to use it
      • Default
      • Color
      • Size
    • Configuration
    • API
      • Progress
    Used for this
    • To communicate the amount of time left when downloading or uploading content
    Not for this
    • When the loading time is unknown, use a Spinner instead
    • When loading page content, use a Skeleton loader instead

    How to use it

    Default

    A Progress loader represents the percent complete from 0 to 100.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Color

    The default foreground color of the Progress loader bar is the success color. It can be changed.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Size

    A Progress loader is medium by default. It can also be small or large.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.4.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-loaders
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Progress } from '@zendeskgarden/react-loaders'

    API

    Progress

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    color
    		string

    Sets the foreground bar's fill color. Accepts a color variable key (i.e. border.primaryEmphasis) to render based on light/dark mode, or any hex value. Defaults to the border.successEmphasis theme value.

    size
    		'small' | 'medium' | 'large'
    'medium'

    Adjusts the height

    value
    		number
    0

    Sets the progress as a value between 0 and 100

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024