https://github.com/jkchao/vue-loading

😄 vue-loading 😊
https://github.com/jkchao/vue-loading

loading vue

Last synced: 3 months ago
JSON representation

😄 vue-loading 😊

• Host: GitHub
• URL: https://github.com/jkchao/vue-loading
• Owner: jkchao
• Created: 2017-04-29T06:38:59.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-22T02:14:31.000Z (over 5 years ago)
• Last Synced: 2024-03-18T05:47:19.454Z (3 months ago)
• Topics: loading, vue
• Language: Vue
• Homepage: https://jkchao.github.io/vue-loading/
• Size: 1.7 MB
• Stars: 475
• Watchers: 11
• Forks: 66
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Lists

• awesome-vue - vue-loading - loading?style=social) - 使用SVG加载 (UI组件)
• awesome-github-vue - vue-loading - 使用SVG加载 (UI组件)
• awesome-github-vue - vue-loading - 使用SVG加载 (UI组件)
• awesome - vue-loading - 使用SVG加载 (UI组件)
• my-awesome-stars - jkchao/vue-loading - 😄 vue-loading 😊 (Vue)
• awesome-github-vue - vue-loading - 使用SVG加载 (UI组件)
• awesome - jkchao/vue-loading - 😄 vue-loading 😊 (Vue)

README

        
# vue-loading-template

--- 

Use SVG for loading.

Demo: https://jkchao.github.io/vue-loading/

## Start

```bash

npm install vue-loading-template --save

```

## Options

 

 	

    

    Prop

    Type

    Required

    Default

    Available values

    

  

	

    	

        type

        String

        false

        balls

        balls, bars, beat, bubbles, cylon, spin, spiningDubbles, barsCylon

        

        

        color

        String

        false

        #5ac1dd

        

        

        

        size

        Object

        false

        { width: '30px', height: '30px' }

        

        

    

## Example in SPA

```vue

 

    


       
bars

           

    

 

  

  import { VueLoading } from 'vue-loading-template'

  export default {

    name: 'app',

    components: {

      VueLoading

    }

  }

  

```


Or you can install it in your `main.js`

```javascript

// main.js

import Vue from 'vue'

import VueLoading from 'vue-loading-template'

Vue.use(VueLoading, /** options **/)

```

If you use it in TypeScript, you can:

```typescript

// main.ts

import Vue from 'vue'

import vueLoading, { VueLoadingOptions } from 'vue-loading-template'

Vue.use(VueLoading, /** options **/)

```

so, you will receive the tip about optional options.

![](http://ovshyp9zv.bkt.clouddn.com/WechatIMG98.jpeg)

## License

MIT