• Introduction
    • Why Liquid
    • Getting started
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Framework integrations
      • React bindings
      • Vue bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Basic
  2. Neutral
  3. CSS Variables
  4. Properties
Components Loading Indicator

ld-loading #

Use the ld-loading component to indicate that the user should wait for a process to complete. Combine it with textual information on what is going on for a better user experience.

Basic #

<ld-loading></ld-loading>
<svg class="ld-loading" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <title>Loading</title>
  <circle cx="50" cy="50" r="50" />
  <g>
    <circle cx="50" cy="50" r="50" />
    <circle cx="50" cy="50" r="50" />
    <circle cx="50" cy="50" r="50" />
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0 50 50"
      to="360 50 50"
      dur="0.9s"
      repeatCount="indefinite"
    />
  </g>
</svg>
Loading

Neutral #

<ld-loading neutral></ld-loading>
<svg class="ld-loading ld-loading--neutral" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <title>Loading</title>
  <circle cx="50" cy="50" r="50" />
  <g>
    <circle cx="50" cy="50" r="50" />
    <circle cx="50" cy="50" r="50" />
    <circle cx="50" cy="50" r="50" />
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0 50 50"
      to="360 50 50"
      dur="0.9s"
      repeatCount="indefinite"
    />
  </g>
</svg>
Loading

CSS Variables #

Variable Description Default
--ld-loading-col-base Base color of the loading indicator. var(--ld-thm-warning)
--ld-loading-col-primary Primary color of the loading indicator. var(--ld-thm-primary)
--ld-loading-col-secondary Secondary color of the loading indicator. var(--ld-thm-secondary)
--ld-loading-size Size of the loading indicator. var(--ld-sp-24)

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
label label Used as svg title element content. string 'Loading'
neutral neutral Uses neutral colors. boolean undefined
paused paused Pauses all animations. boolean undefined
ref ref reference to component any undefined

Built with StencilJS