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加载动画。

Vue-Spinners-CSS-Loaders

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

Spinnercolor: stringloading: boolean
Circle Spinner#7f58aftrue
Default Spinner#7f58aftrue
DualRing Spinner#7f58aftrue
Ellipsis Spinner#7f58aftrue
Facebook Spinner#7f58aftrue
Grid Spinner#7f58aftrue
Heart Spinner#7f58aftrue
Hourglass Spinner#7f58aftrue
Ring Spinner#7f58aftrue
Ripple Spinner#7f58aftrue
Roller Spinner#7f58aftrue
Spinner Spinner#7f58aftrue
微调器 颜色:字符串 加载:布尔
圆形微调器 #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点击旋转

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值