基础使用

<template>
  <c-loading />
</template>
点击展开/收起代码
点击打开交互式编辑器

尺寸

通过直接设置css的font-size属性,使用不同尺寸的加载态

<template>
  <c-loading style="font-size: 24px;" />
  <c-loading style="font-size: 100px;" />
  <c-loading style="font-size: 10vw;" />
</template>
点击展开/收起代码
点击打开交互式编辑器

颜色

直接设置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>
点击展开/收起代码
点击打开交互式编辑器

提示

因为colorfont-size属性是可继承的
你也可以通过直接定义父容器的color以及font-size属性来达到相同的效果

<template>
  <span style="color: blue;font-size: 6em;">
    <c-loading />
  </span>
</template>
点击展开/收起代码
点击打开交互式编辑器

厚度

<template>
  <div style="font-size: 6em; color: #FF0080;">
    <c-loading :thickness="2" />
    <c-loading :thickness="5" />
    <c-loading :thickness="10" />
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

不同的加载动画

<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>
点击展开/收起代码
点击打开交互式编辑器

CLoading API

Props
thickness
number
默认值  5

厚度