1 | # Vue Spinners [![forthebadge](https://forthebadge.com/images/badges/uses-js.svg)](https://forthebadge.com)[![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)](https://forthebadge.com)[![forthebadge](https://forthebadge.com/images/badges/uses-css.svg)](https://forthebadge.com)
|
2 |
|
3 | [![npm](https://img.shields.io/npm/v/vue-spinners.svg) ![npm](https://img.shields.io/npm/dm/vue-spinners.svg)](https://www.npmjs.com/package/vue-spinners)
|
4 | [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
|
5 |
|
6 | A vue js component library which contains multiple spinners from [SpinKit](http://tobiasahlin.com/spinkit/) . Vue components built by Adib Mohsin. Please take a look at the [live example](https://pacifio.github.io/vue-spinners/docs/docs.html)
|
7 |
|
8 | ## Table of contents
|
9 |
|
10 | - [Installation](#installation)
|
11 | - [Usage](#usage)
|
12 | - [Example](#example)
|
13 |
|
14 | # Installation
|
15 |
|
16 | ```bash
|
17 | npm install --save vue-spinners
|
18 | ```
|
19 |
|
20 | ## You could use it in the browser
|
21 | ```html
|
22 | <!-- Add these two line -->
|
23 | <link rel="stylesheet" href="https://unpkg.com/vue-spinners@1.0.0/dist/vue-spinners.css">
|
24 | <script src="https://unpkg.com/vue-spinners@1.0.0/dist/vue-spinners.browser.js"></script>
|
25 |
|
26 | <!-- Import vue.js -->
|
27 | <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
|
28 | ```
|
29 |
|
30 | ## Default import
|
31 |
|
32 | Install all the components:
|
33 |
|
34 | ```javascript
|
35 | import Vue from 'vue'
|
36 | import VueSpinners from 'vue-spinners'
|
37 |
|
38 | Vue.use(VueSpinners)
|
39 | ```
|
40 |
|
41 | Use specific components:
|
42 |
|
43 | ```javascript
|
44 | import Vue from 'vue'
|
45 | import { SquareSpinner } from 'vue-spinners'
|
46 |
|
47 | Vue.component('square', SquareSpinner)
|
48 | ```
|
49 |
|
50 | **⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**
|
51 |
|
52 | ## Distribution import
|
53 |
|
54 | Install all the components:
|
55 |
|
56 | ```javascript
|
57 | import 'vue-spinners/dist/vue-spinners.css'
|
58 | import VueSpinners from 'vue-spinners/dist/vue-spinners.common'
|
59 |
|
60 | Vue.use(VueSpinners)
|
61 | ```
|
62 |
|
63 | Use specific components:
|
64 |
|
65 | ```javascript
|
66 | import 'vue-spinners/dist/vue-spinners.css'
|
67 | import { SquareSpinner } from 'vue-spinners/dist/vue-spinners.common'
|
68 |
|
69 | Vue.component('square', SquareSpinner)
|
70 | ```
|
71 |
|
72 | **⚠️ You may have to setup your bundler to embed the css file in your page.**
|
73 |
|
74 | ## Browser
|
75 |
|
76 | ```html
|
77 | <link rel="stylesheet" href="vue-spinners/dist/vue-spinners.css"/>
|
78 |
|
79 | <script src="vue.js"></script>
|
80 | <script src="vue-spinners/dist/vue-spinners.browser.js"></script>
|
81 | ```
|
82 |
|
83 | The plugin should be auto-installed. If not, you can install it manually with the instructions below.
|
84 |
|
85 | Install all the components:
|
86 |
|
87 | ```javascript
|
88 | Vue.use(VueSpinners)
|
89 | ```
|
90 |
|
91 | Use specific components:
|
92 |
|
93 | ```javascript
|
94 | Vue.component('square', VueSpinners.SquareSpinner)
|
95 | ```
|
96 |
|
97 | ## Source import
|
98 |
|
99 | Install all the components:
|
100 |
|
101 | ```javascript
|
102 | import Vue from 'vue'
|
103 | import VueSpinners from 'vue-spinners/src'
|
104 |
|
105 | Vue.use(VueSpinners)
|
106 | ```
|
107 |
|
108 | Use specific components:
|
109 |
|
110 | ```javascript
|
111 | import Vue from 'vue'
|
112 | import { SquareSpinner } from 'vue-spinners/src'
|
113 |
|
114 | Vue.component('square', SquareSpinner)
|
115 | ```
|
116 |
|
117 | **⚠️ You need to configure your bundler to compile `.vue` files.** More info [in the official documentation](https://vuejs.org/v2/guide/single-file-components.html).
|
118 |
|
119 | # Usage
|
120 | ## This is a simple example showing the square spinner
|
121 | ```javascript
|
122 | # main.js
|
123 | import Vue from 'vue'
|
124 | import VueSpinners from 'vue-spinners'
|
125 |
|
126 | Vue.use(VueSpinners)
|
127 | ```
|
128 | ## Then use it inside your vue component (.vue) file
|
129 | ```jsx
|
130 | <template>
|
131 | <div>
|
132 | <square></square>
|
133 | </div>
|
134 | </template>
|
135 | ```
|
136 | ## You can also pass down loading prop in order to dynamically show this spinner
|
137 | ```jsx
|
138 | <template>
|
139 | <div>
|
140 | <square v-bind:loading="isLoading"></square>
|
141 | </div>
|
142 | </template>
|
143 | <script>
|
144 | export default{
|
145 | data(){
|
146 | return {
|
147 | isLoading: true
|
148 | }
|
149 | }
|
150 | }
|
151 | </script>
|
152 | ```
|
153 |
|
154 |
|
155 | # Example
|
156 |
|
157 | ### All the live examples live in [here](https://pacifio.github.io/vue-spinners/docs/docs.html)
|
158 | ---
|
159 |
|
160 | # Plugin Development
|
161 |
|
162 | ## Installation
|
163 |
|
164 | The first time you create or clone your plugin, you need to install the default dependencies:
|
165 |
|
166 | ```
|
167 | npm install
|
168 | ```
|
169 |
|
170 | ## Watch and compile
|
171 |
|
172 | This will run webpack in watching mode and output the compiled files in the `dist` folder.
|
173 |
|
174 | ```
|
175 | npm run dev
|
176 | ```
|
177 |
|
178 | ## Use it in another project
|
179 |
|
180 | While developping, you can follow the install instructions of your plugin and link it into the project that uses it.
|
181 |
|
182 | In the plugin folder:
|
183 |
|
184 | ```
|
185 | npm link
|
186 | ```
|
187 |
|
188 | In the other project folder:
|
189 |
|
190 | ```
|
191 | npm link vue-spinners
|
192 | ```
|
193 |
|
194 | This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.
|
195 |
|
196 | ## Publish to npm
|
197 |
|
198 | You may have to login to npm before, with `npm adduser`. The plugin will be built in production mode before getting published on npm.
|
199 |
|
200 | ```
|
201 | npm publish
|
202 | ```
|
203 |
|
204 | ## Manual build
|
205 |
|
206 | This will build the plugin into the `dist` folder in production mode.
|
207 |
|
208 | ```
|
209 | npm run build
|
210 | ```
|
211 |
|
212 | ---
|
213 |
|
214 | ## License
|
215 |
|
216 | [MIT](http://opensource.org/licenses/MIT)
|