1 | # vue-fun-loading
|
2 |
|
3 | [![NPM version](https://img.shields.io/npm/v/vue-fun-loading.svg?style=flat)](https://npmjs.com/package/vue-fun-loading)
|
4 |
|
5 | A fun vue loading components.
|
6 |
|
7 | CDN: [UNPKG](https://unpkg.com/vue-fun-loading/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-fun-loading/)
|
8 |
|
9 | [DEMO](https://vue-fun-loading.netlify.com/)
|
10 |
|
11 | ## Install
|
12 |
|
13 | ```bash
|
14 | npm install vue-fun-loading --save-dev
|
15 | ```
|
16 |
|
17 | ## Usage
|
18 |
|
19 | In main.js, import and use vue-fun-loading:
|
20 | ```
|
21 | import Vue from 'vue';
|
22 | import App from './App.vue';
|
23 | import VueFunLoading From 'vue-fun-loading';
|
24 |
|
25 | Vue.use(VueFunLoading);
|
26 |
|
27 | new Vue({
|
28 | el: '#app',
|
29 | render: h => h(App)
|
30 | })
|
31 | ```
|
32 |
|
33 | Then you can use vue-fun-loading anywhere.
|
34 | ```
|
35 | <template>
|
36 | <div id="app">
|
37 | <vue-fun-loading size="small" color="#5872bc" type="circle-dot" />
|
38 | </div>
|
39 | </template>
|
40 | ```
|
41 |
|
42 | ## API
|
43 | | Property | Description | type | Default | Enum |
|
44 | | -------- | ----------- | ---- | ------- | ---- |
|
45 | | size | this property defines loading component's size | string | 'middle' | 'small', 'middle', 'large' |
|
46 | | color | loading component's color | string | '#ff69b4' | any color in 16 bit rgb format |
|
47 | | type | loading type of different style | string | 'circle-dot' | explain in demo |
|
48 |
|
49 | ## Notification
|
50 | This tool is aim for summarizing loading and learning how to build a vue components.
|
51 | It's not perfect but will update later, welcome any suggestion.
|
52 |
|
53 | ## License
|
54 |
|
55 | MIT © [ownghy](https://github.com/OwnGhy)
|