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
      • Dots

    Dots

    The Dots loader communicates ongoing activity after a user takes an action. It tells them that something is taking place.

    Table of Contents
    • How to use it
      • Default
      • Color
      • Size
    • Configuration
    • API
      • Dots
    Used for this
    • To indicate that a single component, like a Button or Search input, is doing something
    Not for this
    • To communicate a page is loading, use a Skeleton loader or Spinner instead
    • To communicate typing status, use an Inline loader instead
    • To communicate progress, use a Progress loader instead

    How to use it

    Default

    The default application of a Dots loader includes accessibility attributes that identify it as an indeterminate progress bar.

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

    Color

    By default, color is inherited from the parent element unless specified.

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

    Size

    By default, size is inherited from font size unless specified.

    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 { Dots } from '@zendeskgarden/react-loaders'

    API

    Dots

    Extends SVGAttributes<SVGSVGElement>

    Prop nameTypeDefaultDescription
    color
    		string
    'inherit'

    Sets the fill color. Accepts a color variable key (i.e. foreground.primary) to render based on light/dark mode, or any hex value. Inherits the parent's color by default.

    delayMS
    		number
    750

    Delays displaying the loader to prevent a render flash during normal loading times *

    duration
    		number
    1250

    Sets the length of the animation cycle in milliseconds *

    size
    		string | number
    inherit

    Sets the height and width in pixels. Inherits the parent's font size by default.

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