Loader

cds-loader

The component that provides the user with a visual signal that the application is loading data.

Default

• size: --medium

Default loading...

Default loader

  <div class="cds-loader">
    <span class="cds-loader__spinner"></span>
    <span class="cds-loader__text">Default loading...</span>
  </div>

---

Elements

Element	Code	Parent	HTML tag	Required
Spinner	cds-loader__spinner	Block: cds-loader	<span>	required
Text	cds-loader__text	Block: cds-loader	<span>	optional

Default loading...

---

Default loader

  <div class="cds-loader">
    <div class="cds-loader__spinner"></div>
    <span class="cds-loader__text">Default loading...</span>
  </div>

  <div class="cds-loader">
    <span class="cds-loader__spinner"></span>
  </div>

---

Modifiers

Modifier	Options
Size	--small, --medium, --large

Size

Small loading...

---

Medium loading...

---

Large loading...

Example

<div class="cds-loader cds-loader--small">
    <span class="cds-loader__spinner"></span>
    <span class="cds-loader__text">Small loading...</span>
</div>