Basic Usage

<template>
  <c-loading />
</template>

Click to open/fold code

Open Vue Repl Editor

Sizes

Directly use CSS font-size

<template>
  <c-loading style="font-size: 24px;" />
  <c-loading style="font-size: 100px;" />
  <c-loading style="font-size: 10vw;" />
</template>

Click to open/fold code

Open Vue Repl Editor

Colors

Directly use CSS color

<template>
  <div style="font-size: 6em;">
    <c-loading style="color: rgb(0, 184, 118);" />
    <c-loading style="color: orange;" />
    <c-loading style="color: #FF0080;" />
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

TIP

Because color and font-size is inheritable Can also set parent dom's color and font-size to achieve the some effect.

<template>
  <span style="color: blue;font-size: 6em;">
    <c-loading />
  </span>
</template>

Click to open/fold code

Open Vue Repl Editor

Thickness

<template>
  <div style="font-size: 6em; color: #FF0080;">
    <c-loading :thickness="2" />
    <c-loading :thickness="5" />
    <c-loading :thickness="10" />
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

Loading Animations

<template>
  <div class="o-flex c-wrap c-items-center c-gutter-md" style="font-size: 3em;">
    <c-loading style="color: #FF0080" />
    <c-loading-audio style="color: #9c27b0" />
    <c-loading-dot style="color: #ff9800" />
    <c-loading-bar style="color: #2196f3" />
    <c-loading-spin-box style="color: #f44336" />
    <c-loading-clock style="color: #00bcd4" />
    <c-loading-comment style="color: #FF0080" />
    <c-loading-cube style="color:#3f51b5" />
    <c-loading-dots style="color:blue" />
    <c-loading-bars style="color:#03a9f4" />
    <c-loading-gear style="color:#00bcd4" />
    <c-loading-lattice style="color:#009688" />
    <c-loading-heart style="color:#4caf50" />
    <c-loading-hourglass style="color:#8bc34a" />
    <c-loading-infinity style="color:#1976d2" />
    <c-loading-circle-bars style="color:#f44336" />
    <c-loading-orbit style="color:#2196f3" />
    <c-loading-oval style="color:#9c27b0" />
    <c-loading-pie style="color:#ff5722" />
    <c-loading-puff style="color:#26A69A" />
    <c-loading-wifi style="color:#795548" />
    <c-loading-rings style="color:#9e9e9e" />
    <c-loading-tail style="color:#607d8b" />
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

CLoading API

Props

thickness

number

Default  5

The thickness