vue css点击旋转_CSS旋转器的Vue旋转器组件的惊人集合以供加载

vue css点击旋转

Vue微调器CSS加载器 (Vue Spinners CSS Loaders)

Amazing collection of pure CSS vue spinners components of css spinners for ajax or loading animation based on loading.io.

CSS旋转器的纯CSS vue旋转器组件的惊人集合，用于基于Ajax或基于loading.io加载动画。

View Demo 查看演示 View Github 查看Github

Browse components and explore their props with Bit. Install specific vue spinner component with npm, yarn, unpkg or bit without having to install the whole project. Install components and live demo

使用Bit浏览组件并探索其道具。 使用npm，yarn，unpkg或bit安装特定的vue旋转器组件，而不必安装整个项目。 安装组件并进行现场演示

Spin微调列表-道具类型和默认道具 (🚀 List of Spinners - PropTypes and Default Props)

Each component accepts a color prop, and loading prop. The default color prop is #7f58af. The default loading prop is true.

每个组件都接受一个color道具和一个loading道具。 默认color道具为#7f58af 。 默认loading属性为true 。

Spinner	color: string	loading: boolean
Circle Spinner	#7f58af	true
Default Spinner	#7f58af	true
DualRing Spinner	#7f58af	true
Ellipsis Spinner	#7f58af	true
Facebook Spinner	#7f58af	true
Grid Spinner	#7f58af	true
Heart Spinner	#7f58af	true
Hourglass Spinner	#7f58af	true
Ring Spinner	#7f58af	true
Ripple Spinner	#7f58af	true
Roller Spinner	#7f58af	true
Spinner Spinner	#7f58af	true

微调器	颜色：字符串	加载：布尔
圆形微调器	#7f58af	true
默认微调器	#7f58af	true
双环微调	#7f58af	true
省略号微调器	#7f58af	true
Facebook微调	#7f58af	true
网格微调器	#7f58af	true
心脏微调器	#7f58af	true
沙漏微调	#7f58af	true
环锭细纱机	#7f58af	true
涟漪微调器	#7f58af	true
滚筒微调	#7f58af	true
微调器微调器	#7f58af	true

📦安装 (📦 Installation)

使用npm安装vue-spinners-css： (Using npm to install vue-spinners-css:)

$ npm i --save vue-spinners-css

使用Bit播放和安装Vue微调器 (Play and install vue spinners with Bit)

Install specific vue spinner component with bit, npm or yarn without having to install the whole project. Using bit to play with live demo, and try the spinners before install.

使用钻头，npm或纱线安装特定的vue旋转器组件，而不必安装整个项目。 使用位玩现场演示，并在安装前尝试微调器。

set npm regisetry config(one time action):

设置npm注册表配置(一次操作)：

npm config set '@bit:registry' https://node.bit.dev

and use your favorite package manager:

并使用您喜欢的软件包管理器：

npm i @bit/joshk.vue-spinners-css.facebook-loader
yarn add @bit/joshk.vue-spinners-css.facebook-loader
bit import joshk.vue-spinners-css/facebook-loader

💻用法示例 (💻 Usage Examples)

you can use a random color from jotils

您可以使用Jotils中的随机颜色

Vue全球注册 (Vue Global Registration)

import Vue from 'vue'
import * as VueSpinnersCss from "vue-spinners-css";

Vue.use(VueSpinnersCss)

// Each spinner can now be used in your templates anywhere in the app!

Vue本地注册 (Vue Local Registration)

<template>
  <FacebookLoader :color="randomcolor" />
  <FacebookLoader />
</template>

<script>
  //using npm or yarn
  import { FacebookLoader } from 'vue-spinners-css';
  //using bit
  import FacebookLoader from '@bit/joshk.vue-spinners-css.facebook-loader';
  import { getRandomColor } from '@bit/joshk.jotils.get-random-color'

  export default ({
    data: () => ({
      randomcolor: getRandomColor()
    }),
    components: {
      FacebookLoader,
    }
  })
</script>

Unpkg导入 (Unpkg Import)

<!--Load libraries in your page's header-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-spinners-css"></script>

<!--Use a component somewhere in your app-->
<div id="app">
  <facebook-loader color="blue" />
</div>

<script>
  new Vue({ el: '#app', data: { } })
</script>

翻译自: https://vuejsexamples.com/amazing-collection-of-vue-spinners-components-of-css-spinners-for-loading/

vue css点击旋转