Skip to content

Commit 3e14dc5

Browse files
JoshK2JoshK2
committed
publish first final version to npm and bit
1 parent d8f1b1b commit 3e14dc5

28 files changed

+9760
-4161
lines changed

‎.babelrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
[
4+
"@vue/app"
5+
]
6+
]
7+
}

‎.bitmap‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,149 @@
11
/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
22

33
{
4+
"joshk.vue-spinners-css/[email protected]": {
5+
"files": [
6+
{
7+
"relativePath": "src/components/CircleLoader.vue",
8+
"test": false,
9+
"name": "CircleLoader.vue"
10+
}
11+
],
12+
"mainFile": "src/components/CircleLoader.vue",
13+
"origin": "AUTHORED",
14+
"exported": true
15+
},
16+
"joshk.vue-spinners-css/[email protected]": {
17+
"files": [
18+
{
19+
"relativePath": "src/components/DefaultLoader.vue",
20+
"test": false,
21+
"name": "DefaultLoader.vue"
22+
}
23+
],
24+
"mainFile": "src/components/DefaultLoader.vue",
25+
"origin": "AUTHORED",
26+
"exported": true
27+
},
28+
"joshk.vue-spinners-css/[email protected]": {
29+
"files": [
30+
{
31+
"relativePath": "src/components/DualRingLoader.vue",
32+
"test": false,
33+
"name": "DualRingLoader.vue"
34+
}
35+
],
36+
"mainFile": "src/components/DualRingLoader.vue",
37+
"origin": "AUTHORED",
38+
"exported": true
39+
},
40+
"joshk.vue-spinners-css/[email protected]": {
41+
"files": [
42+
{
43+
"relativePath": "src/components/EllipsisLoader.vue",
44+
"test": false,
45+
"name": "EllipsisLoader.vue"
46+
}
47+
],
48+
"mainFile": "src/components/EllipsisLoader.vue",
49+
"origin": "AUTHORED",
50+
"exported": true
51+
},
52+
"joshk.vue-spinners-css/[email protected]": {
53+
"files": [
54+
{
55+
"relativePath": "src/components/FacebookLoader.vue",
56+
"test": false,
57+
"name": "FacebookLoader.vue"
58+
}
59+
],
60+
"mainFile": "src/components/FacebookLoader.vue",
61+
"origin": "AUTHORED",
62+
"exported": true
63+
},
64+
"joshk.vue-spinners-css/[email protected]": {
65+
"files": [
66+
{
67+
"relativePath": "src/components/GridLoader.vue",
68+
"test": false,
69+
"name": "GridLoader.vue"
70+
}
71+
],
72+
"mainFile": "src/components/GridLoader.vue",
73+
"origin": "AUTHORED",
74+
"exported": true
75+
},
76+
"joshk.vue-spinners-css/[email protected]": {
77+
"files": [
78+
{
79+
"relativePath": "src/components/HeartLoader.vue",
80+
"test": false,
81+
"name": "HeartLoader.vue"
82+
}
83+
],
84+
"mainFile": "src/components/HeartLoader.vue",
85+
"origin": "AUTHORED",
86+
"exported": true
87+
},
88+
"joshk.vue-spinners-css/[email protected]": {
89+
"files": [
90+
{
91+
"relativePath": "src/components/HourglassLoader.vue",
92+
"test": false,
93+
"name": "HourglassLoader.vue"
94+
}
95+
],
96+
"mainFile": "src/components/HourglassLoader.vue",
97+
"origin": "AUTHORED",
98+
"exported": true
99+
},
100+
"joshk.vue-spinners-css/[email protected]": {
101+
"files": [
102+
{
103+
"relativePath": "src/components/RingLoader.vue",
104+
"test": false,
105+
"name": "RingLoader.vue"
106+
}
107+
],
108+
"mainFile": "src/components/RingLoader.vue",
109+
"origin": "AUTHORED",
110+
"exported": true
111+
},
112+
"joshk.vue-spinners-css/[email protected]": {
113+
"files": [
114+
{
115+
"relativePath": "src/components/RippleLoader.vue",
116+
"test": false,
117+
"name": "RippleLoader.vue"
118+
}
119+
],
120+
"mainFile": "src/components/RippleLoader.vue",
121+
"origin": "AUTHORED",
122+
"exported": true
123+
},
124+
"joshk.vue-spinners-css/[email protected]": {
125+
"files": [
126+
{
127+
"relativePath": "src/components/RollerLoader.vue",
128+
"test": false,
129+
"name": "RollerLoader.vue"
130+
}
131+
],
132+
"mainFile": "src/components/RollerLoader.vue",
133+
"origin": "AUTHORED",
134+
"exported": true
135+
},
136+
"joshk.vue-spinners-css/[email protected]": {
137+
"files": [
138+
{
139+
"relativePath": "src/components/SpinnerLoader.vue",
140+
"test": false,
141+
"name": "SpinnerLoader.vue"
142+
}
143+
],
144+
"mainFile": "src/components/SpinnerLoader.vue",
145+
"origin": "AUTHORED",
146+
"exported": true
147+
},
4148
"version": "14.2.5"
5149
}

‎.browserslistrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
> 1%
2+
last 2 versions

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
build/*.js

‎.eslintrc.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:vue/essential',
8+
'eslint:recommended'
9+
],
10+
rules: {
11+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13+
},
14+
parserOptions: {
15+
parser: 'babel-eslint'
16+
}
17+
}

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Josh Kuttler
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 127 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,128 @@
1-
# vue-spinners-css
1+
# Vue Spinners CSS Loaders ([React](https://github.com/JoshK2/react-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners))
2+
[![bit components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991&label=bit%20components&query=payload.totalComponents&url=https%3A%2F%2Fapi.bit.dev%2Fscope%2Fjoshk%2Fvue-spinners-css)](https://bit.dev/joshk/vue-spinners-css)
3+
[![npm version](https://badge.fury.io/js/vue-spinners-css.svg)](https://www.npmjs.com/package/vue-spinners-css)
4+
[![GitHub stars](https://img.shields.io/github/stars/joshk2/vue-spinners-css)](https://github.com/JoshK2/vue-spinners-css/stargazers)
5+
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/JoshK2/vue-spinners-css/master/LICENSE)
6+
[![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](https://twitter.com/JoshKuttler)
7+
8+
Amazing collection of pure CSS vue spinners components of css spinners for ajax or loading animation based on loading.io.
9+
[Install components and live demo](https://bit.dev/joshk/vue-spinners-css)
10+
<p align="center">
11+
<a href="https://bit.dev/joshk/vue-spinners-css"><img src="https://i.imagesup.co/images2/010e655fd10abc5621d067f8b8ad33c7cac7d840.gif"></a>
12+
</p>
13+
14+
## 🚀 List of Spinners - PropTypes and Default Props
15+
16+
Each component accepts a `color` prop, and `loading` prop.
17+
The default `color` prop is `#7f58af`.
18+
The default `loading` prop is `true`.
19+
20+
| Spinner | color: string | loading: boolean |
21+
| ---------------- | ------------ | ------------- |
22+
| Circle Spinner | `#7f58af` | `true` |
23+
| Default Spinner | `#7f58af` | `true` |
24+
| DualRing Spinner | `#7f58af` | `true` |
25+
| Ellipsis Spinner | `#7f58af` | `true` |
26+
| Facebook Spinner | `#7f58af` | `true` |
27+
| Grid Spinner | `#7f58af` | `true` |
28+
| Heart Spinner | `#7f58af` | `true` |
29+
| Hourglass Spinner| `#7f58af` | `true` |
30+
| Ring Spinner | `#7f58af` | `true` |
31+
| Ripple Spinner | `#7f58af` | `true` |
32+
| Roller Spinner | `#7f58af` | `true` |
33+
| Spinner Spinner | `#7f58af` | `true` |
34+
35+
36+
## 📦 Installation
37+
### Using [npm](https://www.npmjs.com/package/vue-spinners-css) to install vue-spinners-css:
38+
39+
```bash
40+
$ npm i --save vue-spinners-css
41+
```
42+
43+
### Play and install vue spinners with Bit
44+
45+
Install specific vue spinner component with bit, npm or yarn without having to install the whole project.
46+
Using [bit](https://bit.dev/joshk/vue-spinners-css) to play with live demo, and try the spinners before install.
47+
48+
set npm regisetry config(one time action):
49+
```bash
50+
npm config set '@bit:registry' https://node.bit.dev
51+
```
52+
and use your favorite package manager:
53+
```bash
54+
npm i @bit/joshk.vue-spinners-css.facebook-loader
55+
yarn add @bit/joshk.vue-spinners-css.facebook-loader
56+
bit import joshk.vue-spinners-css/facebook-loader
57+
```
58+
59+
## 💻 Usage Examples
60+
61+
you can use a random color from [jotils](https://bit.dev/joshk/jotils/get-random-color)
62+
63+
### Vue Global Registration
64+
```javascript
65+
import Vue from 'vue'
66+
import * as VueSpinnersCss from "vue-spinners-css";
67+
68+
Vue.use(VueSpinnersCss)
69+
70+
// Each spinner can now be used in your templates anywhere in the app!
71+
```
72+
73+
### Vue Local Registration
74+
```javascript
75+
<template>
76+
<FacebookLoader :color="randomcolor" />
77+
<FacebookLoader />
78+
</template>
79+
80+
<script>
81+
//using npm or yarn
82+
import { FacebookLoader } from 'vue-spinners-css';
83+
//using bit
84+
import FacebookLoader from '@bit/joshk.vue-spinners-css.facebook-loader';
85+
import { getRandomColor } from '@bit/joshk.jotils.get-random-color'
86+
87+
export default (
88+
{
89+
data: () => ({
90+
randomcolor: getRandomColor()
91+
}),
92+
components: {
93+
FacebookLoader,
94+
}
95+
}
96+
)
97+
</script>
98+
```
99+
100+
### Unpkg Import
101+
```html
102+
<!--Load libraries in your page's header-->
103+
<script src="https://unpkg.com/vue"></script>
104+
<script src="https://unpkg.com/vue-spinners-css"></script>
105+
106+
<!--Use a component somewhere in your app-->
107+
<div id="app">
108+
<facebook-loader color="blue" />
109+
</div>
110+
111+
<script>
112+
new Vue({ el: '#app', data: { } })
113+
</script>
114+
```
115+
116+
117+
## 👾 Development
118+
You can see the components locally by cloning this repo and doing the following steps:
119+
- Install dependencies from `package.json`, run: `npm install`.
120+
- Run the app in the development mode, run: `npm run serve`.
121+
122+
## ⌨️ Contributing
123+
- Pull requests and ⭐ stars are always welcome.
124+
- For bugs and feature requests, please create an issue.
125+
126+
## 📄 License
127+
[MIT](https://github.com/JoshK2/vue-spinners-css/blob/master/LICENSE)
2128

3-
Under developement!

‎babel.config.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)