• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • 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
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • 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 Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • 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
(external link)

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>
<LdLoading />
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>
<LdLoading neutral />
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