加载器

Vue 组件
Linear Progress 线性进度
Vue 组件
Circular Progress 环形进度
Vue 组件
Skeleton 骨架屏
Vue 组件
Inner Loading 加载
Quasar 插件
Loading 加载
Quasar 插件
Loading Bar 加载条

QSpinner 用于向用户显示当前正在进行的流程。这是一个重要的用户体验特性，它给用户一种系统正在加载一项长期活动的感觉，比如从服务器获取数据或进行一些繁重的计算。

QSpinner API

QSpinner API
size
: String
说明
CSS 单位的尺寸，包括单位名称或标准尺寸名称（xs|sm|md|lg|xl）
color
: String
说明
来自 Quasar 颜色调色板的组件颜色名称
thickness
: Number
说明
覆盖使用的描边宽度值

Other Spinners API

TIP

以下 API 也适用于除 QSpinner 之外的所有加载器。以 QSpinnerCube 为例。

QSpinnerCube API
size
: String
说明
CSS 单位的尺寸，包括单位名称或标准尺寸名称（xs|sm|md|lg|xl）
color
: String
说明
来自 Quasar 颜色调色板的组件颜色名称

用法

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">
      <q-spinner
        color="primary"
        size="3em"
      />

      <q-spinner
        color="primary"
        size="3em"
        :thickness="2"
      />

      <q-spinner
        color="primary"
        size="3em"
        :thickness="10"
      />
    </div>
  </div>
</template>

在下面的示例中，将鼠标悬停在加载器上以查看其名称

<template>
  <div class="q-pa-md q-gutter-xs">
    <div class="q-gutter-md row justify-center">
      <div>
        <q-spinner-audio
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerAudio</q-tooltip>
      </div>
      <div>
        <q-spinner-ball
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerBall</q-tooltip>
      </div>
      <div>
        <q-spinner-bars
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerBars</q-tooltip>
      </div>
      <div>
        <q-spinner-box
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerBox</q-tooltip>
      </div>
      <div>
        <q-spinner-clock
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerClock</q-tooltip>
      </div>
      <div>
        <q-spinner-comment
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerComment</q-tooltip>
      </div>
      <div>
        <q-spinner-cube
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerCube</q-tooltip>
      </div>
      <div>
        <q-spinner-dots
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerDots</q-tooltip>
      </div>
      <div>
        <q-spinner-facebook
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerFacebook</q-tooltip>
      </div>
      <div>
        <q-spinner-gears
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerGears</q-tooltip>
      </div>
      <div>
        <q-spinner-grid
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerGrid</q-tooltip>
      </div>
      <div>
        <q-spinner-hearts
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerHearts</q-tooltip>
      </div>
      <div>
        <q-spinner-hourglass
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerHourglass</q-tooltip>
      </div>
      <div>
        <q-spinner-infinity
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerInfinity</q-tooltip>
      </div>
      <div>
        <q-spinner-ios
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerIos</q-tooltip>
      </div>
      <div>
        <q-spinner-orbit
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerOrbit</q-tooltip>
      </div>
      <div>
        <q-spinner-oval
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerOval</q-tooltip>
      </div>
      <div>
        <q-spinner-pie
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerPie</q-tooltip>
      </div>
      <div>
        <q-spinner-puff
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerPuff</q-tooltip>
      </div>
      <div>
        <q-spinner-radio
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerRadio</q-tooltip>
      </div>
      <div>
        <q-spinner-rings
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerRings</q-tooltip>
      </div>
      <div>
        <q-spinner-tail
          color="primary"
          size="2em"
        />
        <q-tooltip :offset="[0, 8]">QSpinnerTail</q-tooltip>
      </div>
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md q-gutter-xs">
    <div class="q-gutter-md row justify-center" style="font-size: 2em">
      <q-spinner-audio color="secondary" />
      <q-spinner-ball color="red" />
      <q-spinner-bars color="purple" />
      <q-spinner-box color="deep-orange" />
      <q-spinner-clock color="brown" />
      <q-spinner-comment color="deep-purple" />
      <q-spinner-cube color="indigo" />
      <q-spinner-dots color="blue" />
      <q-spinner-facebook color="light-blue" />
      <q-spinner-gears color="cyan" />
      <q-spinner-grid color="teal" />
      <q-spinner-hearts color="green" />
      <q-spinner-hourglass color="light-green" />
      <q-spinner-infinity color="lime" />
      <q-spinner-ios color="yellow" />
      <q-spinner-orbit color="blue" />
      <q-spinner-oval color="amber" />
      <q-spinner-pie color="orange" />
      <q-spinner-puff color="deep-orange" />
      <q-spinner-radio color="brown" />
      <q-spinner-rings color="grey" />
      <q-spinner-tail color="blue-grey" />
    </div>
  </div>
</template>

请注意，默认情况下，QSpinner 和所有其他加载器继承父级的字体大小，并将其应用为其大小。

<template>
  <div class="q-pa-md q-gutter-xs">
    <div class="q-gutter-md row items-center">
      <q-spinner-comment
        color="secondary"
        size="2em"
      />

      <q-spinner-radio
        color="red"
        size="3em"
      />

      <q-spinner-hourglass
        color="purple"
        size="4em"
      />

      <q-spinner-cube
        color="orange"
        size="5.5em"
      />
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-center">
      <q-spinner-cube
        v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']"
        :key="size"
        :size="size"
        color="primary"
      />
    </div>
  </div>
</template>
查看更多？
Vue 组件
Space 留白
Vue 组件
Splitter 切分窗口
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。