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

    Inline

    The Inline loader is used as a typing indicator. This signals the other party is present and preparing a reply.

    Table of Contents
    • How to use it
      • Default
      • Color
      • Size
    • Configuration
    • API
      • Inline
    Used for this
    • As a typing indicator
    Not for this
    • To show a loading state, use the Dots loader instead

    How to use it

    Default

    The Inline loader is used to represent someone typing.

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

    Color

    Color can be explicitly set, but will be inherited from the parent element’s color by default.

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

    Size

    The width of the loader can be set using the size property.

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

    API

    Inline

    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.

    size
    		number
    16

    Sets the width in pixels and scales the loader proportionally

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