Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Loading Indicator

yarn add @clayui/loading-indicator

The loading indicator shows the user that an external process, like a connection, is being executed.

  • Examples
  • Markup
  • API

Stable3.60.0View in LexiconCHANGELOGstorybook demos

  • Shapes
    • Circle
    • Squares
  • Display Types
    • Primary
    • Secondary
    • Light
  • Sizes
    • Extra Small
    • Small
    • Medium
    • Large

Shapes

The loading indicator takes on the currentColor and font-size by default.

Circle

The circle indicator is the default shape of the loading indicator. It should be used with small components such as badges, buttons, inputs, tables rows, etc.

It should be used with `size` `xs` and `sm`. The `displayType` should be `secondary` or `light`.
Copied!
Code Sample (expand to see it)

Squares

The squares indicator uses 2 square shapes taken from the Liferay logo. It helps us include some details from the brand in our product interfaces. It should be used only for bigger components such as cards, modals, sidebars, dashboards, etc. Enable the squares indicator by setting the property shape to squares.

It should be used with `size` `md` and `lg`. The `displayType` should be `primary` or `light`.
Copied!
Code Sample (expand to see it)

Display Types

The loading indicator uses the currentColor by default. You can force the state/color on the loading indicator by passing one of the three variants, primary, secondary, and light, to the displayType property.

Primary

Fix the color of the loading indicator to be the primary color by setting the displayType to primary.

Copied!
Code Sample (expand to see it)

Secondary

Fix the color of the loading indicator to be the secondary color by setting the displayType to secondary.

Copied!
Code Sample (expand to see it)

Light

Fix the color of the loading indicator to be the light color by setting the displayType to light. It allows the indicator to be more accessible in some cases.

Copied!
Code Sample (expand to see it)

Sizes

The loading indicator ships with four sizes, xs, sm, md, and lg. It inherits the parent's font-size by default.

Extra Small

Fix the loading indicator font-size to be 10px by setting the size property to xs.

Copied!
Code Sample (expand to see it)

Small

Fix the loading indicator font-size to be 16px by setting the size property to sm.

Copied!
Code Sample (expand to see it)

Medium

Fix the loading indicator font-size to be 32px by setting the size property to md.

Copied!
Code Sample (expand to see it)

Large

Fix the loading indicator font-size to be 64px by setting the size property to lg.

Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!