├── .gitignore
├── webpack.build.js
├── webpack.build.min.js
├── src
    ├── index.js
    ├── app.js
    ├── ClipLoader.vue
    ├── SquareLoader.vue
    ├── BeatLoader.vue
    ├── SyncLoader.vue
    ├── RotateLoader.vue
    ├── PulseLoader.vue
    ├── BounceLoader.vue
    ├── MoonLoader.vue
    ├── SkewLoader.vue
    ├── DotLoader.vue
    ├── ScaleLoader.vue
    ├── PacmanLoader.vue
    ├── RingLoader.vue
    ├── FadeLoader.vue
    ├── RiseLoader.vue
    └── GridLoader.vue
├── LICENSE
├── package.json
├── example
    ├── app.js
    └── app.css
├── webpack.config.js
├── README.md
├── index.html
└── dist
    └── vue-spinner.min.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | build
4 | npm-debug.log


--------------------------------------------------------------------------------
/webpack.build.js:
--------------------------------------------------------------------------------
 1 | var config = require('./webpack.config.js')
 2 | 
 3 | config.entry = {
 4 |   'vue-spinner': './src/index.js',
 5 | }
 6 | 
 7 | config.output = {
 8 | 
 9 |   filename: './dist/[name].js',
10 |   library: 'VueSpinner',
11 |   libraryTarget: 'umd'
12 | }
13 | 
14 | 
15 | module.exports = config
16 | 


--------------------------------------------------------------------------------
/webpack.build.min.js:
--------------------------------------------------------------------------------
 1 | var config = require('./webpack.build.js')
 2 | var webpack = require('webpack')
 3 | 
 4 | 
 5 | config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
 6 | 
 7 | delete config.devtool
 8 | 
 9 | config.plugins = [
10 |   new webpack.optimize.UglifyJsPlugin({
11 |     sourceMap: false,
12 |     compress: {
13 |         warnings: false
14 |     }
15 |   }),
16 |   new webpack.optimize.OccurenceOrderPlugin()
17 | ]
18 | 
19 | module.exports = config


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import PulseLoader from './PulseLoader.vue'
 2 | import GridLoader from './GridLoader.vue'
 3 | import ClipLoader from './ClipLoader.vue'
 4 | import RiseLoader from './RiseLoader.vue'
 5 | import BeatLoader from './BeatLoader.vue'
 6 | import SyncLoader from './SyncLoader.vue'
 7 | import RotateLoader from './RotateLoader.vue'
 8 | import FadeLoader from './FadeLoader.vue'
 9 | import PacmanLoader from './PacmanLoader.vue'
10 | import SquareLoader from './SquareLoader.vue'
11 | import ScaleLoader from './ScaleLoader.vue'
12 | import SkewLoader from './SkewLoader.vue'
13 | import MoonLoader from './MoonLoader.vue'
14 | import RingLoader from './RingLoader.vue'
15 | import BounceLoader from './BounceLoader.vue'
16 | import DotLoader from './DotLoader.vue'
17 | 
18 | const VueSpinner = {
19 |   PulseLoader,
20 |   GridLoader,
21 |   ClipLoader,
22 |   RiseLoader,
23 |   BeatLoader,
24 |   SyncLoader,
25 |   RotateLoader,
26 |   FadeLoader,
27 |   PacmanLoader,
28 |   SquareLoader,
29 |   ScaleLoader,
30 |   SkewLoader,
31 |   MoonLoader,
32 |   RingLoader,
33 |   BounceLoader,
34 |   DotLoader
35 | }
36 | 
37 | module.exports = VueSpinner
38 | 
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 greyby
 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.
22 | 
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-spinner",
 3 |   "version": "1.0.4",
 4 |   "description": "Spinners of Vue Components",
 5 |   "keywords": [
 6 |     "spinner",
 7 |     "vuejs",
 8 |     "loading"
 9 |   ],
10 |   "main": "src/app.js",
11 |   "scripts": {
12 |     "dev": "webpack-dev-server --inline --hot --quiet",
13 |     "build": "NODE_ENV=production webpack --progress --hide-modules",
14 |     "dist": "webpack --progress --hide-modules --config  webpack.build.js && NODE_ENV=production webpack --progress --hide-modules --config  webpack.build.min.js"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/greyby/vue-spinner.git"
19 |   },
20 |   "author": "greyby",
21 |   "devDependencies": {
22 |     "vue": "^1.0.12",
23 |     "babel-core": "^6.1.21",
24 |     "babel-loader": "^6.1.0",
25 |     "babel-plugin-transform-runtime": "^6.1.18",
26 |     "babel-preset-es2015": "^6.1.18",
27 |     "babel-runtime": "^5.8.0",
28 |     "css-loader": "^0.21.0",
29 |     "style-loader": "^0.13.0",
30 |     "stylus-loader": "^1.4.0",
31 |     "vue-hot-reload-api": "^1.2.0",
32 |     "vue-html-loader": "^1.0.0",
33 |     "vue-loader": "^7.2.0",
34 |     "webpack": "^1.12.2",
35 |     "webpack-dev-server": "^1.12.0",
36 |     "extract-text-webpack-plugin": "^0.8.2"
37 |   },
38 |   "license": "MIT"
39 | }
40 | 


--------------------------------------------------------------------------------
/example/app.js:
--------------------------------------------------------------------------------
 1 | Vue.config.debug = true // turn on debugging mode
 2 | var PulseLoader = VueSpinner.PulseLoader
 3 | var GridLoader = VueSpinner.GridLoader
 4 | var ClipLoader = VueSpinner.ClipLoader
 5 | var RiseLoader = VueSpinner.RiseLoader
 6 | var BeatLoader = VueSpinner.BeatLoader
 7 | var SyncLoader = VueSpinner.SyncLoader
 8 | var RotateLoader = VueSpinner.RotateLoader
 9 | var FadeLoader = VueSpinner.FadeLoader
10 | var PacmanLoader = VueSpinner.PacmanLoader
11 | var SquareLoader = VueSpinner.SquareLoader
12 | var ScaleLoader = VueSpinner.ScaleLoader
13 | var SkewLoader = VueSpinner.SkewLoader
14 | var MoonLoader = VueSpinner.MoonLoader
15 | var RingLoader = VueSpinner.RingLoader
16 | var BounceLoader = VueSpinner.BounceLoader
17 | var DotLoader = VueSpinner.DotLoader
18 | 
19 | new Vue({
20 | 	el: '#app',
21 | 	components: {
22 | 		PulseLoader,
23 |     GridLoader,
24 |     ClipLoader,
25 |     RiseLoader,
26 |     BeatLoader,
27 |     SyncLoader,
28 |     RotateLoader,
29 |     FadeLoader,
30 |     PacmanLoader,
31 |     SquareLoader,
32 |     ScaleLoader,
33 |     SkewLoader,
34 |     MoonLoader,
35 |     RingLoader,
36 |     BounceLoader,
37 |     DotLoader
38 | 	},
39 | 	data () {
40 | 		return {
41 | 			color: '#3AB982',
42 |       height: '35px',
43 |       width: '4px',
44 |       margin: '2px',
45 |       radius: '2px'
46 | 		}
47 | 	}
48 | })


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
 1 | import PulseLoader from './PulseLoader.vue'
 2 | import GridLoader from './GridLoader.vue'
 3 | import ClipLoader from './ClipLoader.vue'
 4 | import RiseLoader from './RiseLoader.vue'
 5 | import BeatLoader from './BeatLoader.vue'
 6 | import SyncLoader from './SyncLoader.vue'
 7 | import RotateLoader from './RotateLoader.vue'
 8 | import FadeLoader from './FadeLoader.vue'
 9 | import PacmanLoader from './PacmanLoader.vue'
10 | import SquareLoader from './SquareLoader.vue'
11 | import ScaleLoader from './ScaleLoader.vue'
12 | import SkewLoader from './SkewLoader.vue'
13 | import MoonLoader from './MoonLoader.vue'
14 | import RingLoader from './RingLoader.vue'
15 | import BounceLoader from './BounceLoader.vue'
16 | import DotLoader from './DotLoader.vue'
17 | 
18 | 
19 | Vue.config.debug = true
20 | 
21 | new Vue({
22 | 	el: '#app',
23 | 	components: {
24 |     PulseLoader,
25 |     GridLoader,
26 |     ClipLoader,
27 |     RiseLoader,
28 |     BeatLoader,
29 |     SyncLoader,
30 |     RotateLoader,
31 |     FadeLoader,
32 |     PacmanLoader,
33 |     SquareLoader,
34 |     ScaleLoader,
35 |     SkewLoader,
36 |     MoonLoader,
37 |     RingLoader,
38 |     BounceLoader,
39 |     DotLoader
40 |   },
41 |   data () {
42 |     return {
43 |    		color: '#5dc596',
44 |       size: '15px',
45 |       margin: '2px',
46 |       radius: '100%'
47 |     }
48 |   }
49 | })
50 | 
51 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var vue = require('vue-loader')
 2 | var webpack = require("webpack")
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var cssLoader = ExtractTextPlugin.extract("style-loader", "css-loader")
 6 | 
 7 | module.exports = {
 8 |   entry: {
 9 |     app: './src/app.js'
10 |   },
11 |   output: {
12 |     path: './build',
13 |     publicPath: '/build/',
14 |     filename: 'bundle.js'
15 |   },
16 |   module: {
17 |     loaders: [
18 |       {
19 |         test: /\.vue$/,
20 |         loader: 'vue'
21 |       },
22 |       {
23 |         test: /\.js$/,
24 |         // excluding some local linked packages.
25 |         // for normal use cases only node_modules is needed.
26 |         exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
27 |         loader: 'babel'
28 |       },
29 |       { test: /\.css$/, loader: cssLoader }
30 |     ]
31 |   },
32 |   // vue: {
33 |   //   loaders: {
34 |   //     css: ExtractTextPlugin.extract("css"),
35 |   //     stylus: ExtractTextPlugin.extract("css!stylus")
36 |   //   }
37 |   // },
38 |   devtool: "#source-map",
39 |   babel: {
40 |     presets: ['es2015'],
41 |     plugins: ['transform-runtime']
42 |   }
43 | }
44 | 
45 | if (process.env.NODE_ENV === 'production') {
46 |   
47 |   delete module.exports.devtool
48 |   module.exports.plugins = [
49 |     new webpack.DefinePlugin({
50 |       'process.env': {
51 |         NODE_ENV: '"production"'
52 |       }
53 |     }),
54 |     new webpack.optimize.UglifyJsPlugin({
55 |       compress: {
56 |         warnings: false
57 |       }
58 |     }),
59 |     new webpack.optimize.OccurenceOrderPlugin()
60 |     // new ExtractTextPlugin("build.css")
61 |   ]
62 | } else {
63 |   // module.exports.plugins = [
64 |   //   new ExtractTextPlugin("build.css")
65 |   // ]
66 |   // module.exports.devtool = '#source-map'
67 | }


--------------------------------------------------------------------------------
/src/ClipLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-clip" v-bind:style="spinnerStyle">
  4 |     </div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | export default {
 10 |   
 11 |   name: 'ClipLoader',
 12 | 
 13 |   props: {
 14 |     loading: {
 15 |       type: Boolean,
 16 |       default: true
 17 |     },
 18 |   	color: { 
 19 |       type: String,
 20 |       default: '#5dc596'
 21 |     },
 22 |   	size: {
 23 |       type: String,
 24 |       default: '35px'
 25 |     },
 26 |     radius: {
 27 |       type: String,
 28 |       default: '100%'
 29 |     }
 30 |   },
 31 |   computed: {
 32 |     spinnerStyle () {
 33 |       return {
 34 |         height: this.size,
 35 |         width: this.size,
 36 |         borderWidth: '2px',
 37 |         borderStyle: 'solid',
 38 |         borderColor: this.color + ' ' + this.color + ' transparent',
 39 |         borderRadius: this.radius,
 40 |         background: 'transparent'
 41 |       }
 42 |     }
 43 |   }
 44 | }
 45 | </script>
 46 | 
 47 | <style>
 48 | .v-spinner
 49 | {
 50 | /*	  font-size: 10px; 
 51 | 
 52 |     width: 60px;
 53 |     height: 40px;*/
 54 |     /*margin: 25px auto;*/
 55 |     text-align: center;
 56 |  
 57 | }
 58 | 
 59 | .v-spinner .v-clip
 60 | {
 61 |     -webkit-animation: v-clipDelay 0.75s 0s infinite linear;
 62 |             animation: v-clipDelay 0.75s 0s infinite linear;
 63 |     -webkit-animation-fill-mode: both;
 64 | 	          animation-fill-mode: both;
 65 | 
 66 |     display: inline-block;
 67 | }
 68 | 
 69 | @-webkit-keyframes v-clipDelay
 70 | {
 71 |     0%
 72 |     {
 73 |         -webkit-transform: rotate(0deg) scale(1);
 74 |                 transform: rotate(0deg) scale(1);
 75 |     }
 76 |     50%
 77 |     {
 78 |         -webkit-transform: rotate(180deg) scale(0.8);
 79 |                 transform: rotate(180deg) scale(0.8);
 80 |     }
 81 |     100%
 82 |     {
 83 |         -webkit-transform: rotate(360deg) scale(1);
 84 |                 transform: rotate(360deg) scale(1);
 85 |     }
 86 | }
 87 | 
 88 | @keyframes v-clipDelay
 89 | {
 90 |     0%
 91 |     {
 92 |         -webkit-transform: rotate(0deg) scale(1);
 93 |                 transform: rotate(0deg) scale(1);
 94 |     }
 95 |     50%
 96 |     {
 97 |         -webkit-transform: rotate(180deg) scale(0.8);
 98 |                 transform: rotate(180deg) scale(0.8);
 99 |     }
100 |     100%
101 |     {
102 |         -webkit-transform: rotate(360deg) scale(1);
103 |                 transform: rotate(360deg) scale(1);
104 |     }
105 | }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/SquareLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-square" v-bind:style="spinnerStyle">
  4 |     </div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | export default {
 10 |   
 11 |   name: 'SquareLoader',
 12 | 
 13 |   props: {
 14 |     loading: {
 15 |       type: Boolean,
 16 |       default: true
 17 |     },
 18 |   	color: { 
 19 |       type: String,
 20 |       default: '#5dc596'
 21 |     },
 22 |   	size: {
 23 |       type: String,
 24 |       default: '50px'
 25 |     }
 26 |   },
 27 |   data () {
 28 |     return {
 29 |       spinnerStyle: {
 30 |       	backgroundColor: this.color,
 31 |       	height: this.size,
 32 |      	  width: this.size
 33 |       }
 34 |     }
 35 |   }
 36 | 
 37 | }
 38 | </script>
 39 | 
 40 | <style>
 41 | .v-spinner
 42 | {
 43 |     text-align: center;
 44 | }
 45 | 
 46 | .v-spinner .v-square
 47 | {
 48 |     -webkit-animation: v-squareDelay 3s 0s infinite cubic-bezier(.09,.57,.49,.9);
 49 |             animation: v-squareDelay 3s 0s infinite cubic-bezier(.09,.57,.49,.9);
 50 |     -webkit-animation-fill-mode: both;
 51 | 	          animation-fill-mode: both;
 52 |     perspective: 100px;
 53 |     display: inline-block;
 54 | }
 55 | 
 56 | @-webkit-keyframes v-squareDelay
 57 | {
 58 |     25%
 59 |     {
 60 |         -webkit-transform: rotateX(180deg) rotateY(0);
 61 |                 transform: rotateX(180deg) rotateY(0);
 62 |     }
 63 |     50%
 64 |     {
 65 |         -webkit-transform: rotateX(180deg) rotateY(180deg);
 66 |                 transform: rotateX(180deg) rotateY(180deg);
 67 |     }
 68 |     75%
 69 |     {
 70 |         -webkit-transform: rotateX(0) rotateY(180deg);
 71 |                 transform: rotateX(0) rotateY(180deg);
 72 |     }
 73 |     100%
 74 |     {
 75 |         -webkit-transform: rotateX(0) rotateY(0);
 76 |                 transform: rotateX(0) rotateY(0);
 77 |     }
 78 | }
 79 | 
 80 | @keyframes v-squareDelay
 81 | {
 82 |     25%
 83 |     {
 84 |         -webkit-transform: rotateX(180deg) rotateY(0);
 85 |                 transform: rotateX(180deg) rotateY(0);
 86 |     }
 87 |     50%
 88 |     {
 89 |         -webkit-transform: rotateX(180deg) rotateY(180deg);
 90 |                 transform: rotateX(180deg) rotateY(180deg);
 91 |     }
 92 |     75%
 93 |     {
 94 |         -webkit-transform: rotateX(0) rotateY(180deg);
 95 |                 transform: rotateX(0) rotateY(180deg);
 96 |     }
 97 |     100%
 98 |     {
 99 |         -webkit-transform: rotateX(0) rotateY(0);
100 |                 transform: rotateX(0) rotateY(0);
101 |     }
102 | }
103 | </style>


--------------------------------------------------------------------------------
/src/BeatLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-beat v-beat-odd" v-bind:style="spinnerStyle">
  4 |     </div><div class="v-beat v-beat-even" v-bind:style="spinnerStyle">
  5 |     </div><div class="v-beat v-beat-odd" v-bind:style="spinnerStyle">
  6 |     </div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | export default {
 12 |   
 13 |   name: 'BeatLoader',
 14 | 
 15 |   props: {
 16 |     loading: {
 17 |       type: Boolean,
 18 |       default: true
 19 |     },
 20 |     color: { 
 21 |       type: String,
 22 |       default: '#5dc596'
 23 |     },
 24 |     size: {
 25 |       type: String,
 26 |       default: '15px'
 27 |     },
 28 |     margin: {
 29 |       type: String,
 30 |       default: '2px'
 31 |     },
 32 |     radius: {
 33 |       type: String,
 34 |       default: '100%'
 35 |     }
 36 |   },
 37 |   data () {
 38 |     return {
 39 |       spinnerStyle: {
 40 |       	backgroundColor: this.color,
 41 |       	height: this.size,
 42 |      		width: this.size,
 43 |       	margin: this.margin,
 44 |       	borderRadius: this.radius
 45 |       }
 46 |     }
 47 |   }
 48 | 
 49 | }
 50 | </script>
 51 | 
 52 | <style>
 53 | 
 54 | .v-spinner .v-beat
 55 | {
 56 |     -webkit-animation: v-beatStretchDelay 0.7s infinite linear;
 57 |             animation: v-beatStretchDelay 0.7s infinite linear;
 58 |     -webkit-animation-fill-mode: both;
 59 | 	          animation-fill-mode: both;
 60 |     display: inline-block;         
 61 | }
 62 | 
 63 | .v-spinner .v-beat-odd
 64 | {
 65 |   animation-delay: 0s;
 66 | }
 67 | .v-spinner .v-beat-even
 68 | {
 69 |   animation-delay: 0.35s;
 70 | }
 71 | 
 72 | @-webkit-keyframes v-beatStretchDelay
 73 | {
 74 |     50%
 75 |     {
 76 |         -webkit-transform: scale(0.75);
 77 |                 transform: scale(0.75);
 78 |         -webkit-opacity: 0.2;             
 79 |                 opacity: 0.2;
 80 |     }
 81 |     100%
 82 |     {
 83 |         -webkit-transform: scale(1);
 84 |                 transform: scale(1);
 85 |         -webkit-opacity: 1;             
 86 |                 opacity: 1;
 87 |     }
 88 | }
 89 | 
 90 | @keyframes v-beatStretchDelay
 91 | {
 92 |     50%
 93 |     {
 94 |         -webkit-transform: scale(0.75);
 95 |                 transform: scale(0.75);
 96 |         -webkit-opacity: 0.2;             
 97 |                 opacity: 0.2;
 98 |     }
 99 |     100%
100 |     {
101 |         -webkit-transform: scale(1);
102 |                 transform: scale(1);
103 |         -webkit-opacity: 1;             
104 |                 opacity: 1;
105 |     }
106 | }
107 | </style>


--------------------------------------------------------------------------------
/src/SyncLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-sync v-sync1" v-bind:style="[spinnerStyle,spinnerDelay1]">
  4 |     </div><div class="v-sync v-sync2" v-bind:style="[spinnerStyle,spinnerDelay2]">
  5 |     </div><div class="v-sync v-sync3" v-bind:style="[spinnerStyle,spinnerDelay3]">
  6 |     </div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | export default {
 12 |   
 13 |   name: 'SyncLoader',
 14 | 
 15 |   props: {
 16 |     loading: {
 17 |       type: Boolean,
 18 |       default: true
 19 |     },
 20 |     color: { 
 21 |       type: String,
 22 |       default: '#5dc596'
 23 |     },
 24 |     size: {
 25 |       type: String,
 26 |       default: '15px'
 27 |     },
 28 |     margin: {
 29 |       type: String,
 30 |       default: '2px'
 31 |     },
 32 |     radius: {
 33 |       type: String,
 34 |       default: '100%'
 35 |     }
 36 |   },
 37 |   data () {
 38 |     return {
 39 |       spinnerStyle: {
 40 |       	backgroundColor: this.color,
 41 |       	height: this.size,
 42 |      		width: this.size,
 43 |       	margin: this.margin,
 44 |       	borderRadius: this.radius,
 45 |         display: 'inline-block',
 46 |         animationName: 'v-syncStretchDelay',
 47 |         animationDuration: '0.6s',
 48 |         animationIterationCount: 'infinite',
 49 |         animationTimingFunction: 'ease-in-out',
 50 |         animationFillMode: 'both'
 51 |       },
 52 |       spinnerDelay1: {
 53 |         animationDelay: '0.07s'
 54 |       },
 55 |       spinnerDelay2: {
 56 |         animationDelay: '0.14s'
 57 |       },
 58 |       spinnerDelay3: {
 59 |         animationDelay: '0.21s'
 60 |       }
 61 |     }
 62 |   }
 63 | 
 64 | }
 65 | </script>
 66 | 
 67 | <style>
 68 | 
 69 | @-webkit-keyframes v-syncStretchDelay
 70 | {
 71 |     33%
 72 |     {
 73 |         -webkit-transform: translateY(10px);
 74 |                 transform: translateY(10px);
 75 |     }
 76 |     66%
 77 |     {
 78 |         -webkit-transform: translateY(-10px);
 79 |                 transform: translateY(-10px);
 80 |     }
 81 |     100%
 82 |     {
 83 |         -webkit-transform: translateY(0);
 84 |                 transform: translateY(0);
 85 |     }
 86 | }
 87 | 
 88 | @keyframes v-syncStretchDelay
 89 | {
 90 |     33%
 91 |     {
 92 |         -webkit-transform: translateY(10px);
 93 |                 transform: translateY(10px);
 94 |     }
 95 |     66%
 96 |     {
 97 |         -webkit-transform: translateY(-10px);
 98 |                 transform: translateY(-10px);
 99 |     }
100 |     100%
101 |     {
102 |         -webkit-transform: translateY(0);
103 |                 transform: translateY(0);
104 |     }
105 | }
106 | </style>


--------------------------------------------------------------------------------
/src/RotateLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-rotate v-rotate1" v-bind:style="spinnerStyle">
  4 |     <div class="v-rotate v-rotate2" v-bind:style="spinnerStyle">
  5 |     </div><div class="v-rotate v-rotate3" v-bind:style="spinnerStyle">
  6 |     </div></div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | export default {
 12 |   
 13 |   name: 'RotateLoader',
 14 | 
 15 |   props: {
 16 |     loading: {
 17 |       type: Boolean,
 18 |       default: true
 19 |     },
 20 |     color: { 
 21 |       type: String,
 22 |       default: '#5dc596'
 23 |     },
 24 |     size: {
 25 |       type: String,
 26 |       default: '15px'
 27 |     },
 28 |     margin: {
 29 |       type: String,
 30 |       default: '2px'
 31 |     },
 32 |     radius: {
 33 |       type: String,
 34 |       default: '100%'
 35 |     }
 36 |   },
 37 |   data () {
 38 |     return {
 39 |       spinnerStyle: {
 40 |       	backgroundColor: this.color,
 41 |       	height: this.size,
 42 |      		width: this.size,
 43 |       	margin: this.margin,
 44 |       	borderRadius: this.radius
 45 |       }
 46 |     }
 47 |   }
 48 | 
 49 | }
 50 | </script>
 51 | 
 52 | <style>
 53 | 
 54 | .v-spinner .v-rotate1
 55 | {
 56 |     -webkit-animation: v-rotateStretchDelay 1s 0s infinite cubic-bezier(.7,-.13,.22,.86);
 57 |             animation: v-rotateStretchDelay 1s 0s infinite cubic-bezier(.7,-.13,.22,.86);
 58 |     -webkit-animation-fill-mode: both;
 59 |             animation-fill-mode: both;
 60 |     display: inline-block;
 61 |     position: relative;
 62 | }
 63 | 
 64 | .v-spinner .v-rotate2
 65 | {
 66 |   opacity: 0.8;
 67 |   position: absolute;
 68 |   top: 0;
 69 |   left: -28px;
 70 | }
 71 | 
 72 | .v-spinner .v-rotate3
 73 | {
 74 |   opacity: 0.8;
 75 |   position: absolute;
 76 |   top: 0;
 77 |   left: 25px;
 78 | }
 79 | 
 80 | @-webkit-keyframes v-rotateStretchDelay
 81 | {
 82 |     0%
 83 |     {
 84 |         -webkit-transform: rotate(0deg);
 85 |                 transform: rotate(0deg);
 86 |     }
 87 |     50%
 88 |     {
 89 |         -webkit-transform: rotate(180deg);
 90 |                 transform: rotate(180deg);
 91 |     }
 92 |     100%
 93 |     {
 94 |         -webkit-transform: rotate(360deg);
 95 |                 transform: rotate(360deg);
 96 |     }
 97 | }
 98 | 
 99 | @keyframes v-rotateStretchDelay
100 | {
101 |     0%
102 |     {
103 |         -webkit-transform: rotate(0deg);
104 |                 transform: rotate(0deg);
105 |     }
106 |     50%
107 |     {
108 |         -webkit-transform: rotate(180deg);
109 |                 transform: rotate(180deg);
110 |     }
111 |     100%
112 |     {
113 |         -webkit-transform: rotate(360deg);
114 |                 transform: rotate(360deg);
115 |     }
116 | }
117 | </style>


--------------------------------------------------------------------------------
/src/PulseLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-pulse v-pulse1" v-bind:style="[spinnerStyle,spinnerDelay1]">
  4 |     </div><div class="v-pulse v-pulse2" v-bind:style="[spinnerStyle,spinnerDelay2]">
  5 |     </div><div class="v-pulse v-pulse3" v-bind:style="[spinnerStyle,spinnerDelay3]">
  6 |     </div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | export default {
 12 |   
 13 |   name: 'PulseLoader',
 14 | 
 15 |   props: {
 16 |     loading: {
 17 |       type: Boolean,
 18 |       default: true
 19 |     },
 20 |     color: { 
 21 |       type: String,
 22 |       default: '#5dc596'
 23 |     },
 24 |     size: {
 25 |       type: String,
 26 |       default: '15px'
 27 |     },
 28 |     margin: {
 29 |       type: String,
 30 |       default: '2px'
 31 |     },
 32 |     radius: {
 33 |       type: String,
 34 |       default: '100%'
 35 |     }
 36 |   },
 37 |   data () {
 38 |     return {
 39 |       spinnerStyle: {
 40 |       	backgroundColor: this.color,
 41 |       	width: this.size,
 42 |         height: this.size,
 43 |       	margin: this.margin,
 44 |       	borderRadius: this.radius,
 45 |         display: 'inline-block',
 46 |         animationName: 'v-pulseStretchDelay',
 47 |         animationDuration: '0.75s',
 48 |         animationIterationCount: 'infinite',
 49 |         animationTimingFunction: 'cubic-bezier(.2,.68,.18,1.08)',
 50 |         animationFillMode: 'both'
 51 |       },
 52 |       spinnerDelay1: {
 53 |         animationDelay: '0.12s'
 54 |       },
 55 |       spinnerDelay2: {
 56 |         animationDelay: '0.24s'
 57 |       },
 58 |       spinnerDelay3: {
 59 |         animationDelay: '0.36s'
 60 |       }
 61 |     }
 62 |   }
 63 | 
 64 | }
 65 | </script>
 66 | 
 67 | <style>
 68 | /*.v-spinner
 69 | {
 70 |     margin: 100px auto;
 71 |     text-align: center;
 72 | }
 73 | */
 74 | 
 75 | @-webkit-keyframes v-pulseStretchDelay
 76 | {
 77 |     0%,
 78 |     80%
 79 |     {
 80 |         -webkit-transform: scale(1);
 81 |                 transform: scale(1);
 82 |         -webkit-opacity: 1;             
 83 |                 opacity: 1;
 84 |     }
 85 |     45%
 86 |     {
 87 |         -webkit-transform: scale(0.1);
 88 |                 transform: scale(0.1);
 89 |         -webkit-opacity: 0.7;             
 90 |                 opacity: 0.7;
 91 |     }
 92 | }
 93 | 
 94 | @keyframes v-pulseStretchDelay
 95 | {
 96 |     0%,
 97 |     80%
 98 |     {
 99 |         -webkit-transform: scale(1);
100 |                 transform: scale(1);
101 |         -webkit-opacity: 1;             
102 |                 opacity: 1;
103 |     }
104 |     45%
105 |     {
106 |         -webkit-transform: scale(0.1);
107 |                 transform: scale(0.1);
108 |         -webkit-opacity: 0.7;             
109 |                 opacity: 0.7;
110 |     }
111 | }
112 | </style>


--------------------------------------------------------------------------------
/src/BounceLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-bounce v-bounce1" v-bind:style="spinnerBasicStyle">
  4 |     <div class="v-bounce v-bounce2" v-bind:style="spinnerStyle">
  5 |     </div><div class="v-bounce v-bounce3" v-bind:style="spinnerStyle">
  6 |     </div></div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | export default {
 12 |   
 13 |   name: 'BounceLoader',
 14 | 
 15 |   props: {
 16 |     loading: {
 17 |       type: Boolean,
 18 |       default: true
 19 |     },
 20 |     color: { 
 21 |       type: String,
 22 |       default: '#5dc596'
 23 |     },
 24 |     size: {
 25 |       type: String,
 26 |       default: '60px'
 27 |     },
 28 |     margin: {
 29 |       type: String,
 30 |       default: '2px'
 31 |     },
 32 |     radius: {
 33 |       type: String,
 34 |       default: '100%'
 35 |     }
 36 |   },
 37 |   data () {
 38 |     return {
 39 |       spinnerStyle: {
 40 |         backgroundColor: this.color,
 41 |         height: this.size,
 42 |         width: this.size,
 43 |         borderRadius: this.radius,
 44 |         opacity: 0.6,
 45 |         position: 'absolute',
 46 |         top: 0,
 47 |         left: 0
 48 |       }
 49 |     }
 50 |   },
 51 |   computed: {
 52 |     spinnerBasicStyle () {
 53 |       return {
 54 |         height: this.size,
 55 |         width: this.size,
 56 |         position: 'relative'
 57 |       }
 58 |     }
 59 |   }
 60 | 
 61 | }
 62 | </script>
 63 | 
 64 | <style>
 65 | 
 66 | .v-spinner .v-bounce
 67 | {
 68 |           
 69 | }
 70 | 
 71 | .v-spinner .v-bounce1
 72 | {
 73 | }
 74 | 
 75 | .v-spinner .v-bounce2
 76 | {
 77 | 
 78 |     -webkit-animation: v-bounceStretchDelay 2s 1s infinite ease-in-out;
 79 |             animation: v-bounceStretchDelay 2s 1s infinite ease-in-out;
 80 |     -webkit-animation-fill-mode: both;
 81 |             animation-fill-mode: both;
 82 | }
 83 | 
 84 | .v-spinner .v-bounce3
 85 | {
 86 |     -webkit-animation: v-bounceStretchDelay 2s 0s infinite ease-in-out;
 87 |             animation: v-bounceStretchDelay 2s 0s infinite ease-in-out;
 88 |     -webkit-animation-fill-mode: both;
 89 |             animation-fill-mode: both;
 90 | }
 91 | 
 92 | @-webkit-keyframes v-bounceStretchDelay
 93 | {
 94 |     0%,
 95 |     100%
 96 |     {
 97 |         -webkit-transform: scale(0);
 98 |                 transform: scale(0);
 99 |     }
100 |     50%
101 |     { 
102 |         -webkit-transform: scale(1.0);
103 |                 transform: scale(1.0);
104 |     
105 |     }
106 | }
107 | 
108 | @keyframes v-bounceStretchDelay
109 | {
110 |     0%,
111 |     100%
112 |     {
113 |         -webkit-transform: scale(0);
114 |                 transform: scale(0);
115 |     }
116 |     50%
117 |     { 
118 |         -webkit-transform: scale(1.0);
119 |                 transform: scale(1.0);
120 |     
121 |     }
122 | }
123 | </style>


--------------------------------------------------------------------------------
/src/MoonLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-moon v-moon1" v-bind:style="spinnerStyle">
  4 |     <div class="v-moon v-moon2" v-bind:style="[spinnerMoonStyle,animationStyle2]">
  5 |     </div><div class="v-moon v-moon3" v-bind:style="[spinnerStyle,animationStyle3]">
  6 |     </div></div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | export default {
 12 |   
 13 |   name: 'MoonLoader',
 14 | 
 15 |   props: {
 16 |     loading: {
 17 |       type: Boolean,
 18 |       default: true
 19 |     },
 20 |     color: { 
 21 |       type: String,
 22 |       default: '#5dc596'
 23 |     },
 24 |     size: {
 25 |       type: String,
 26 |       default: '60px'
 27 |     },
 28 |     margin: {
 29 |       type: String,
 30 |       default: '2px'
 31 |     },
 32 |     radius: {
 33 |       type: String,
 34 |       default: '100%'
 35 |     }
 36 |   },
 37 |   data () {
 38 |     return {
 39 |       spinnerStyle: {
 40 |         height: this.size,
 41 |         width: this.size,
 42 |         borderRadius: this.radius
 43 |       }
 44 |     }
 45 |   },
 46 |   computed: {
 47 |     moonSize() {
 48 |       return parseFloat(this.size)/7
 49 |     },
 50 |     spinnerMoonStyle () {
 51 |       return {
 52 |         height: this.moonSize  + 'px',
 53 |         width: this.moonSize  + 'px',
 54 |         borderRadius: this.radius
 55 |       }
 56 |     },
 57 |     animationStyle2 () {
 58 |       return {
 59 |         top: parseFloat(this.size)/2 - this.moonSize/2 + 'px',
 60 |         backgroundColor: this.color
 61 |       }
 62 |     },
 63 |     animationStyle3 () {
 64 |       return {
 65 |         border: this.moonSize + 'px solid ' + this.color
 66 |       }
 67 |     }
 68 |   }
 69 | 
 70 | }
 71 | </script>
 72 | 
 73 | <style>
 74 | 
 75 | .v-spinner .v-moon1
 76 | {
 77 | 
 78 |     -webkit-animation: v-moonStretchDelay 0.6s 0s infinite linear;
 79 |             animation: v-moonStretchDelay 0.6s 0s infinite linear;
 80 |     -webkit-animation-fill-mode: forwards;
 81 |             animation-fill-mode: forwards;
 82 |     position: relative;
 83 | }
 84 | 
 85 | .v-spinner .v-moon2
 86 | {
 87 |     -webkit-animation: v-moonStretchDelay 0.6s 0s infinite linear;
 88 |             animation: v-moonStretchDelay 0.6s 0s infinite linear;
 89 |     -webkit-animation-fill-mode: forwards;
 90 |             animation-fill-mode: forwards;
 91 |     opacity: 0.8;
 92 |     position: absolute;
 93 | }
 94 | 
 95 | .v-spinner .v-moon3
 96 | {
 97 |     opacity: 0.1;
 98 | }
 99 | 
100 | @-webkit-keyframes v-moonStretchDelay
101 | {
102 |     100%
103 |     {
104 |         -webkit-transform: rotate(360deg);
105 |                 transform: rotate(360deg);
106 |     }
107 | }
108 | 
109 | @keyframes v-moonStretchDelay
110 | {
111 |     100%
112 |     {
113 |         -webkit-transform: rotate(360deg);
114 |                 transform: rotate(360deg);
115 |     }
116 | }
117 | </style>


--------------------------------------------------------------------------------
/src/SkewLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-skew" v-bind:style="spinnerStyle">
  4 |     </div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | export default {
 10 |   
 11 |   name: 'SkewLoader',
 12 | 
 13 |   props: {
 14 |     loading: {
 15 |       type: Boolean,
 16 |       default: true
 17 |     },
 18 |   	color: { 
 19 |       type: String,
 20 |       default: '#5dc596'
 21 |     },
 22 |   	size: {
 23 |       type: String,
 24 |       default: '20px'
 25 |     }
 26 |   },
 27 |   data () {
 28 |     return {
 29 |       spinnerStyle: {
 30 |       	height: 0,
 31 |      	  width: 0,
 32 |         borderLeft: this.size + ' solid transparent',
 33 |         borderRight: this.size + ' solid transparent',
 34 |         borderBottom: this.size + ' solid ' + this.color
 35 |       }
 36 |     }
 37 |   }
 38 | 
 39 | }
 40 | </script>
 41 | 
 42 | <style>
 43 | .v-spinner
 44 | {
 45 |     text-align: center;
 46 | }
 47 | 
 48 | .v-spinner .v-skew
 49 | {
 50 |     -webkit-animation: v-skewDelay 3s 0s infinite cubic-bezier(.09,.57,.49,.9);
 51 |             animation: v-skewDelay 3s 0s infinite cubic-bezier(.09,.57,.49,.9);
 52 |     -webkit-animation-fill-mode: both;
 53 | 	          animation-fill-mode: both;
 54 |     display: inline-block;
 55 | }
 56 | 
 57 | @-webkit-keyframes v-skewDelay
 58 | {
 59 |     25%
 60 |     {
 61 |         -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
 62 |                 transform: perspective(100px) rotateX(180deg) rotateY(0);
 63 |     }
 64 |     50%
 65 |     {
 66 |         -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
 67 |                 transform: perspective(100px) rotateX(180deg) rotateY(180deg);
 68 |     }
 69 |     75%
 70 |     {
 71 |         -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
 72 |                 transform: perspective(100px) rotateX(0) rotateY(180deg);
 73 |     }
 74 |     100%
 75 |     {
 76 |         -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
 77 |                 transform: perspective(100px) rotateX(0) rotateY(0);
 78 |     }
 79 | }
 80 | 
 81 | @keyframes v-skewDelay
 82 | {
 83 |     25%
 84 |     {
 85 |         -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
 86 |                 transform: perspective(100px) rotateX(180deg) rotateY(0);
 87 |     }
 88 |     50%
 89 |     {
 90 |         -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
 91 |                 transform: perspective(100px) rotateX(180deg) rotateY(180deg);
 92 |     }
 93 |     75%
 94 |     {
 95 |         -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
 96 |                 transform: perspective(100px) rotateX(0) rotateY(180deg);
 97 |     }
 98 |     100%
 99 |     {
100 |         -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
101 |                 transform: perspective(100px) rotateX(0) rotateY(0);
102 |     }
103 | }
104 | </style>


--------------------------------------------------------------------------------
/src/DotLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-dot v-dot1" v-bind:style="spinnerBasicStyle">
  4 |     <div class="v-dot v-dot2" v-bind:style="spinnerStyle">
  5 |     </div><div class="v-dot v-dot3" v-bind:style="spinnerStyle">
  6 |     </div></div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | export default {
 12 |   
 13 |   name: 'DotLoader',
 14 | 
 15 |   props: {
 16 |     loading: {
 17 |       type: Boolean,
 18 |       default: true
 19 |     },
 20 |     color: { 
 21 |       type: String,
 22 |       default: '#5dc596'
 23 |     },
 24 |     size: {
 25 |       type: String,
 26 |       default: '60px'
 27 |     },
 28 |     margin: {
 29 |       type: String,
 30 |       default: '2px'
 31 |     },
 32 |     radius: {
 33 |       type: String,
 34 |       default: '100%'
 35 |     }
 36 |   },
 37 |   computed: {
 38 |     spinnerStyle () {
 39 |       return {
 40 |         backgroundColor: this.color,
 41 |         height: parseFloat(this.size)/2 + 'px',
 42 |         width: parseFloat(this.size)/2 + 'px',
 43 |         borderRadius: this.radius
 44 |       }
 45 |     },
 46 |     spinnerBasicStyle () {
 47 |       return {
 48 |         height: this.size,
 49 |         width: this.size,
 50 |         position: 'relative'
 51 |       }
 52 |     }
 53 |   }
 54 | 
 55 | }
 56 | </script>
 57 | 
 58 | <style>
 59 | 
 60 | .v-spinner .v-dot
 61 | {
 62 |           
 63 | }
 64 | 
 65 | .v-spinner .v-dot1
 66 | {
 67 | 
 68 |     -webkit-animation: v-dotRotate 2s 0s infinite linear;
 69 |             animation: v-dotRotate 2s 0s infinite linear;
 70 |     -webkit-animation-fill-mode: forwards;
 71 |             animation-fill-mode: forwards;
 72 | }
 73 | 
 74 | .v-spinner .v-dot2
 75 | {
 76 | 
 77 |     -webkit-animation: v-dotBounce 2s 0s infinite linear;
 78 |             animation: v-dotBounce 2s 0s infinite linear;
 79 |     -webkit-animation-fill-mode: forwards;
 80 |             animation-fill-mode: forwards;
 81 |     position: 'absolute';
 82 |     top: 0;
 83 |     bottom: auto;
 84 | }
 85 | 
 86 | .v-spinner .v-dot3
 87 | {
 88 |     -webkit-animation: v-dotBounce 2s -1s infinite linear;
 89 |             animation: v-dotBounce 2s -1s infinite linear;
 90 |     -webkit-animation-fill-mode: forwards;
 91 |             animation-fill-mode: forwards;
 92 |     position: 'absolute';
 93 |     top: auto;
 94 |     bottom: 0;            
 95 | }
 96 | 
 97 | @-webkit-keyframes v-dotRotate
 98 | {
 99 |     100%
100 |     {
101 |         -webkit-transform: rotate(360deg);
102 |                 transform: rotate(360deg);
103 |     }
104 | }
105 | 
106 | @keyframes v-dotRotate
107 | {
108 |     100%
109 |     {
110 |         -webkit-transform: rotate(360deg);
111 |                 transform: rotate(360deg);
112 |     }
113 | }
114 | 
115 | @-webkit-keyframes v-dotBounce
116 | {
117 |     0%,
118 |     100%
119 |     {
120 |         -webkit-transform: scale(0);
121 |                 transform: scale(0);
122 |     }
123 |     50%
124 |     {
125 |         -webkit-transform: scale(1.0);
126 |                 transform: scale(1.0);
127 |     }
128 | }
129 | 
130 | @keyframes v-dotBounce
131 | {
132 |     0%,
133 |     100%
134 |     {
135 |         -webkit-transform: scale(0);
136 |                 transform: scale(0);
137 |     }
138 |     50%
139 |     {
140 |         -webkit-transform: scale(1.0);
141 |                 transform: scale(1.0);
142 |     }
143 | }
144 | </style>


--------------------------------------------------------------------------------
/example/app.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   -ms-text-size-adjust: 100%;
  3 |   -webkit-text-size-adjust: 100%;
  4 |   overflow-x: hidden;
  5 | }
  6 | 
  7 | *,
  8 | *:before,
  9 | *:after {
 10 |   -webkit-box-sizing: inherit;
 11 |   -moz-box-sizing: inherit;
 12 |   box-sizing: inherit;
 13 | }
 14 | 
 15 | body {
 16 |     font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 17 |     font-size: 15px;
 18 |     -webkit-font-smoothing: antialiased;
 19 |     -moz-osx-font-smoothing: grayscale;
 20 |     color: #34495e;
 21 |     margin: 0;
 22 |     border-top: 2px solid #4fc08d;
 23 |     background-color: #f8f8f8;
 24 |     -webkit-box-sizing: border-box;
 25 |     -moz-box-sizing: border-box;
 26 |     box-sizing: border-box;
 27 | }
 28 | 
 29 | h1 {
 30 |     font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 31 |     font-weight: 300;
 32 |     font-size: 4em;
 33 |     color: #2c3e50;
 34 | }
 35 | 
 36 | h4, a {
 37 |     font-weight: 400;
 38 |     font-size: 15px;
 39 |     color: #7f8c8d;
 40 | }
 41 | 
 42 | p {
 43 |     word-spacing: 0.05em;
 44 | }
 45 | 
 46 | a {
 47 |     text-decoration: none;
 48 |     color: #34495e;
 49 | }
 50 | 
 51 | 
 52 | a.button {
 53 |     display: inline-block;
 54 |     width: 280px;
 55 |     margin: 0.5em;
 56 |     font-family: 'Roboto Mono', Monaco, courier, monospace;
 57 |     font-weight: 700;
 58 |     color: #fff;
 59 |     background-color: #4fc08d;
 60 |     border-bottom: 2px solid #3aa373;
 61 |     padding: 12px 14px;
 62 |     border-radius: 4px;
 63 |     transition: all 0.15s ease;
 64 | }
 65 | 
 66 | a.button:hover {
 67 |     background-color: #5dc596;
 68 |     -webkit-transform: translate(0, -2px);
 69 |             transform: translate(0, -2px);
 70 | }
 71 | 
 72 | #social {
 73 |     text-align: center;
 74 |     list-style-type: none;
 75 |     margin: 0 auto;
 76 |     padding: 0;
 77 |     margin: 1.5em auto;
 78 | }
 79 | 
 80 | #social li {
 81 |     display: inline-block;
 82 |     margin: 0 5px;
 83 |     vertical-align: middle;
 84 | }
 85 | 
 86 | ul {
 87 |   list-style-type: none;
 88 |   padding: 0;
 89 |   margin: 60px 0;
 90 | }
 91 | 
 92 | #wrapper {
 93 |     width: 960px;
 94 |     margin: 0 auto;
 95 |     min-height: 80px;
 96 |     text-align: center;
 97 | }
 98 | 
 99 | .list-container {
100 | 
101 |   border: 1px solid #eee;
102 |   border-radius: 2px;
103 |   background: #fff;
104 | 
105 |   display: -webkit-flex;
106 |   display: flex;
107 | 
108 |   -webkit-flex-flow: row wrap;
109 |           flex-flow: row wrap;
110 | 
111 |   -webkit-align-items: center;
112 |           align-items: center;  
113 | 
114 |   -webkit-justify-content: space-around;
115 |           justify-content: space-around;
116 | 
117 | }
118 | 
119 | 
120 | .spinner-list {
121 | 
122 | /*  width: 200px;
123 |   height: 150px;
124 |   line-height: 150px;
125 |   color: white;
126 |   font-weight: bold;
127 |   font-size: 3em;
128 |   text-align: center;*/
129 | 
130 | 
131 | 
132 |   display: -webkit-flex;
133 |   display: flex;
134 | 
135 |   webkit-flex: 0 1 auto;
136 |          flex: 0 1 auto;
137 | 
138 |   -webkit-flex-flow: row wrap;
139 |           flex-flow: row wrap;
140 |   
141 |   width: 200px;
142 |   height: 200px;
143 |   webkit-align-items: center;
144 |          align-items: center;
145 |   webkit-justify-content: center;
146 |          justify-content: center;          
147 |  
148 | }
149 | 
150 | @media screen and(max-width: 700px) {
151 |     html,
152 |     body {
153 |         margin: 0;
154 |     }
155 |     #wrapper {
156 |         width: 100%;
157 |     }
158 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-spinner
  2 | 
  3 | > Not support Vue 2.0.
  4 | 
  5 | A collection of loading spinners with Vue.js. Just convert yuanyan's React.js project [Halogen](https://github.com/yuanyan/halogen) to Vue.js components. Special thanks to [yuanyan](https://github.com/yuanyan) for the wonderful project.
  6 | 
  7 | ## [Live demo](http://greyby.github.io/vue-spinner/)
  8 | 
  9 | ## Installation
 10 | 
 11 | ### NPM
 12 | ```bash
 13 | $ npm install vue-spinner
 14 | ```
 15 | 
 16 | ### CommonJS
 17 | ```js
 18 | var PulseLoader = require('vue-spinner/src/PulseLoader.vue');
 19 | 
 20 | new Vue({
 21 |   components: {
 22 |     'PulseLoader': PulseLoader
 23 |   }
 24 | })
 25 | ```
 26 | 
 27 | ### ES6
 28 | ```js
 29 | import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
 30 | 
 31 | new Vue({
 32 |   components: {
 33 |     PulseLoader
 34 |   }
 35 | })
 36 | ```
 37 | Or: 
 38 | ```js
 39 | Vue.component('pulse-loader', require('vue-spinner/src/PulseLoader.vue'));
 40 | ```
 41 | 
 42 | ### For browserify
 43 | If you use browserify + vueify, you may need to import vue-spinner like this:
 44 | 
 45 | ```js
 46 | var PulseLoader= require('vue-spinner/dist/vue-spinner.min').PulseLoader;
 47 | ```
 48 | 
 49 | ```js
 50 | import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js'
 51 | ```
 52 | 
 53 | [explain here](https://github.com/greyby/vue-spinner/issues/2)
 54 | 
 55 | ### Browser globals
 56 | The `dist` folder contains `vue-spinner.js` and `vue-spinner.min.js` with all components exported in the <code>window.VueSpinner</code> object. These bundles are also available on NPM packages.
 57 | 
 58 | ```html
 59 | <script src="path/to/vue.js"></script>
 60 | <script src="path/to/vue-spinner.js"></script>
 61 | <script>
 62 |   var PulseLoader = VueSpinner.PulseLoader
 63 | </script>
 64 | ```
 65 | 
 66 | ## Local setup
 67 | 
 68 | ```
 69 | npm install
 70 | npm run dev
 71 | ```
 72 | 
 73 | ## Usage
 74 | 
 75 | ```html
 76 | <pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
 77 | <grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
 78 | <clip-loader :loading="loading" :color="color" :size="size"></clip-loader>
 79 | <rise-loader :loading="loading" :color="color" :size="size"></rise-loader>
 80 | <beat-loader :loading="loading" :color="color" :size="size"></beat-loader>
 81 | <sync-loader :loading="loading" :color="color" :size="size"></sync-loader>
 82 | <rotate-loader :loading="loading" :color="color" :size="size"></rotate-loader>
 83 | <fade-loader :loading="loading" :color="color" :height="height" :width="width"></fade-loader>
 84 | <pacman-loader :loading="loading" :color="color" :size="size"></pacman-loader>
 85 | <square-loader :loading="loading" :color="color" :size="size"></square-loader>
 86 | <scale-loader :loading="loading" :color="color" :height="height" :width="width"></scale-loader>
 87 | <skew-loader :loading="loading" :color="color" :size="size"></skew-loader>
 88 | <moon-loader :loading="loading" :color="color" :size="size"></moon-loader>
 89 | <ring-loader :loading="loading" :color="color" :size="size"></ring-loader>
 90 | <bounce-loader :loading="loading" :color="color" :size="size"></bounce-loader>          
 91 | <dot-loader :loading="loading" :color="color" :size="size"></dot-loader>
 92 | ```
 93 | 
 94 | You can customize the color and size with setting the props. All props have default value. You can control the spinner show/hidden with setting the loading prop.
 95 | 
 96 | ## TODO
 97 | 
 98 | 
 99 | 
100 | ## License
101 | 
102 |  vue-spinner is licensed under [The MIT License](LICENSE).
103 | 


--------------------------------------------------------------------------------
/src/ScaleLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-scale v-scale1" v-bind:style="[spinnerStyle,spinnerDelay1]">
  4 |     </div><div class="v-scale v-scale2" v-bind:style="[spinnerStyle,spinnerDelay2]">
  5 |     </div><div class="v-scale v-scale3" v-bind:style="[spinnerStyle,spinnerDelay3]">
  6 |     </div><div class="v-scale v-scale4" v-bind:style="[spinnerStyle,spinnerDelay4]">
  7 |     </div><div class="v-scale v-scale5" v-bind:style="[spinnerStyle,spinnerDelay5]">
  8 |     </div>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | export default {
 14 |   
 15 |   name: 'ScaleLoader',
 16 | 
 17 |   props: {
 18 |     loading: {
 19 |       type: Boolean,
 20 |       default: true
 21 |     },
 22 |   	color: { 
 23 |       type: String,
 24 |       default: '#5dc596'
 25 |     },
 26 |   	height: {
 27 |       type: String,
 28 |       default: '35px'
 29 |     },
 30 |   	width: {
 31 |       type: String,
 32 |       default: '4px'
 33 |     },
 34 |   	margin: {
 35 |       type: String,
 36 |       default: '2px'
 37 |     },
 38 |     radius: {
 39 |       type: String,
 40 |       default: '2px'
 41 |     }
 42 |   },
 43 |   data () {
 44 |     return {
 45 |       spinnerStyle: {
 46 |       	backgroundColor: this.color,
 47 |       	height: this.height,
 48 |      		width: this.width,
 49 |       	margin: this.margin,
 50 |       	borderRadius: this.radius,
 51 |         display: 'inline-block',
 52 |         animationName: 'v-scaleStretchDelay',
 53 |         animationDuration: '1s',
 54 |         animationIterationCount: 'infinite',
 55 |         animationTimingFunction: 'cubic-bezier(.2,.68,.18,1.08)',
 56 |         animationFillMode: 'both'
 57 |       	// TODO 
 58 |       	// animation: ['sk-waveStretchDelay', '1s', 'infinite', 'cubic-bezier(.2,.68,.18,1.08)'].join(' '),
 59 |       	// animationFillMode: "both"
 60 |       },
 61 |       spinnerDelay1: {
 62 |         animationDelay: '0.1s'
 63 |       },
 64 |       spinnerDelay2: {
 65 |         animationDelay: '0.2s'
 66 |       },
 67 |       spinnerDelay3: {
 68 |         animationDelay: '0.3s'
 69 |       },
 70 |       spinnerDelay4: {
 71 |         animationDelay: '0.4s'
 72 |       },
 73 |       spinnerDelay5: {
 74 |         animationDelay: '0.5s'
 75 |       }
 76 |     }
 77 |   }
 78 | }
 79 | </script>
 80 | 
 81 | <style>
 82 | .v-spinner
 83 | {
 84 | /*	  font-size: 10px; 
 85 | 
 86 |     width: 60px;
 87 |     height: 40px;*/
 88 |     /*margin: 25px auto;*/
 89 |     text-align: center;
 90 | }
 91 | 
 92 | @-webkit-keyframes v-scaleStretchDelay
 93 | {
 94 |     0%
 95 |     {
 96 |        -webkit-animation-name: inherit;
 97 |        -webkit-animation-duration: inherit;
 98 |        -webkit-animation-iteration-count: inherit;
 99 |        -webkit-animation-direction: inherit;
100 |     },
101 |     100%
102 |     {
103 |         -webkit-transform: scaleY(1);
104 |                 transform: scaleY(1);
105 |     }
106 |     50%
107 |     {
108 |         -webkit-transform: scaleY(0.4);
109 |                 transform: scaleY(0.4);
110 |     }
111 | }
112 | 
113 | @keyframes v-scaleStretchDelay
114 | {
115 |     0%
116 |     {
117 |        -webkit-animation-name: inherit;
118 |        -webkit-animation-duration: inherit;
119 |        -webkit-animation-iteration-count: inherit;
120 |        -webkit-animation-direction: inherit;
121 |     },
122 |     100%
123 |     {
124 |         -webkit-transform: scaleY(1);
125 |                 transform: scaleY(1);
126 |     }
127 |     50%
128 |     {
129 |         -webkit-transform: scaleY(0.4);
130 |                 transform: scaleY(0.4);
131 |     }
132 | }
133 | </style>


--------------------------------------------------------------------------------
/src/PacmanLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-bind:style="{position: 'relative', fontSize: 0}" v-show="loading">
  3 |     <div class="v-pacman v-pacman1" v-bind:style="spinnerStyle1">
  4 |     </div><div class="v-pacman v-pacman2" v-bind:style="[spinnerStyle,animationStyle,spinnerDelay2]">
  5 |     </div><div class="v-pacman v-pacman3" v-bind:style="[spinnerStyle,animationStyle,spinnerDelay3]">
  6 |     </div><div class="v-pacman v-pacman4" v-bind:style="[spinnerStyle,animationStyle,spinnerDelay4]">
  7 |     </div><div class="v-pacman v-pacman5" v-bind:style="[spinnerStyle,animationStyle,spinnerDelay5]">
  8 |     </div>
  9 | </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | export default {
 14 |   
 15 |   name: 'PacmanLoader',
 16 | 
 17 |   props: {
 18 |     loading: {
 19 |       type: Boolean,
 20 |       default: true
 21 |     },
 22 |     color: { 
 23 |       type: String,
 24 |       default: '#5dc596'
 25 |     },
 26 |     size: {
 27 |       type: String,
 28 |       default: '25px'
 29 |     },
 30 |     margin: {
 31 |       type: String,
 32 |       default: '2px'
 33 |     },
 34 |     radius: {
 35 |       type: String,
 36 |       default: '100%'
 37 |     }
 38 |   },
 39 |   data () {
 40 |     return {
 41 |       spinnerDelay2: {
 42 |         animationDelay: '0.25s'
 43 |       },
 44 |       spinnerDelay3: {
 45 |         animationDelay: '0.50s'
 46 |       },
 47 |       spinnerDelay4: {
 48 |         animationDelay: '0.75s'
 49 |       },
 50 |       spinnerDelay5: {
 51 |         animationDelay: '1s'
 52 |       }
 53 |     }
 54 |   },
 55 |   computed: {
 56 |     spinnerStyle () {
 57 |       return {
 58 |         backgroundColor: this.color,
 59 |         width: this.size,
 60 |         height: this.size,
 61 |         margin: this.margin,
 62 |         borderRadius: this.radius,
 63 |       }
 64 |     },
 65 |     border1 () {
 66 |       return this.size + ' solid transparent'
 67 |     },
 68 |     border2 () {
 69 |       return this.size + ' solid ' + this.color
 70 |     },
 71 |     spinnerStyle1 () {
 72 |       return {
 73 |         width: 0,
 74 |         height: 0,
 75 |         borderTop: this.border2,
 76 |         borderRight: this.border1,
 77 |         borderBottom: this.border2,
 78 |         borderLeft: this.border2,
 79 |         borderRadius: this.size
 80 |       }
 81 |     },
 82 |     animationStyle () {
 83 |       return {
 84 |         width: '10px',
 85 |         height: '10px',
 86 |         transform: 'translate(0, '+ -parseFloat(this.size)/4 + 'px)',
 87 |         position: 'absolute',
 88 |         top: '25px',
 89 |         left: '100px',
 90 |         animationName: 'v-pacmanStretchDelay',
 91 |         animationDuration: '1s',
 92 |         animationIterationCount: 'infinite',
 93 |         animationTimingFunction: 'linear',
 94 |         animationFillMode: 'both'
 95 |       }
 96 |     }
 97 |   }
 98 | 
 99 | }
100 | </script>
101 | 
102 | <style>
103 | .v-spinner
104 | {
105 |     text-align: center;
106 | }
107 | 
108 | /*TODO computed transform */
109 | @-webkit-keyframes v-pacmanStretchDelay
110 | {
111 |     75%
112 |     {
113 |         -webkit-opacity: 0.7;             
114 |         opacity: 0.7;
115 |     }
116 |     100%
117 |     {
118 |         -webkit-transform: translate(-100px, -6.25px);
119 |                 transform: translate(-100px, -6.25px);
120 |     }
121 | }
122 | 
123 | @keyframes v-pacmanStretchDelay
124 | {
125 |     75%
126 |     {
127 |         -webkit-opacity: 0.7;             
128 |         opacity: 0.7;
129 |     }
130 |     100%
131 |     {
132 |         -webkit-transform: translate(-100px, -6.25px);
133 |                 transform: translate(-100px, -6.25px);
134 |     }
135 | }
136 | </style>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-spinner</title>
 6 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 7 |     <link rel="stylesheet" href="example/app.css">
 8 |   </head>
 9 |   <body>
10 |     <div id="app">
11 |       <div id="wrapper">
12 |         <h1>vue-spinner</h1>
13 |         <h4>vue-spinner</h4>
14 | 
15 |         <p class="buttons">
16 |           <a href="https://github.com/greyby/vue-spinner" class="button">Source on GitHub</a>
17 |         </p>
18 |         <div id="social">
19 |          <!--  <li><a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="https://github.com/greyby/vue-spinner" data-via="greyby" data-related="vuejs" data-hashtags="vuejs">Tweet</a>
20 | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li> -->
21 |           <li><iframe src="http://ghbtns.com/github-btn.html?user=greyby&repo=vue-spinner&type=watch&count=true"
22 |             allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>
23 |         </div>
24 |         <ul class="list-container">
25 |           <li class="spinner-list" title="pulse loader">
26 |             <pulse-loader :color="color" :size="size" :margin="margin" :radius="radius"></pulse-loader>
27 |           </li>
28 |           <li class="spinner-list" title="grid loader">
29 |             <grid-loader></grid-loader>
30 |           </li>
31 |           <li class="spinner-list" title="clip loader">
32 |             <clip-loader></clip-loader>
33 |           </li>
34 |           <li class="spinner-list" title="rise loader">
35 |             <rise-loader></rise-loader>
36 |           </li>
37 |           <li class="spinner-list" title="beat loader">
38 |             <beat-loader></beat-loader>
39 |           </li>
40 |           <li class="spinner-list" title="sync loader">
41 |             <sync-loader></sync-loader>
42 |           </li>
43 |           <li class="spinner-list" title="rotate loader">
44 |             <rotate-loader></rotate-loader>
45 |           </li>
46 |           <li class="spinner-list"  title="fade loader">
47 |             <fade-loader></fade-loader>
48 |           </li>
49 |           <li class="spinner-list" title="paceman loader">
50 |             <pacman-loader></pacman-loader>
51 |           </li>
52 |           <li class="spinner-list" title="square loader">
53 |             <square-loader></square-loader>
54 |           </li>
55 |           <li class="spinner-list" title="scale loader">
56 |             <scale-loader></scale-loader>
57 |           </li>
58 |           <li class="spinner-list" title="skew loader">
59 |             <skew-loader></skew-loader>
60 |           </li>
61 |           <li class="spinner-list" title="moon loader">
62 |             <moon-loader></moon-loader>
63 |           </li>
64 |           <li class="spinner-list" title="ring loader">
65 |             <ring-loader></ring-loader>
66 |           </li>
67 |           <li class="spinner-list" title="bounce loader">
68 |             <bounce-loader></bounce-loader>
69 |           </li>
70 |           <li class="spinner-list" title="dot loader">
71 |             <dot-loader></dot-loader>
72 |           </li>
73 |         </ul>
74 |       </div>
75 |     </div>
76 |     <script src="node_modules/vue/dist/vue.js"></script>
77 |     <script src="build/bundle.js"></script>
78 |     <!--<script src="dist/vue-spinner.js"></script>
79 |     <script src="example/app.js"></script>-->
80 |   </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/src/RingLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-ring v-ring1" v-bind:style="spinnerBasicStyle">
  4 |     <div class="v-ring v-ring2" v-bind:style="spinnerStyle">
  5 |     </div><div class="v-ring v-ring3" v-bind:style="spinnerStyle">
  6 |     </div></div>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | export default {
 12 |   
 13 |   name: 'RingLoader',
 14 | 
 15 |   props: {
 16 |     loading: {
 17 |       type: Boolean,
 18 |       default: true
 19 |     },
 20 |     color: { 
 21 |       type: String,
 22 |       default: '#5dc596'
 23 |     },
 24 |     size: {
 25 |       type: String,
 26 |       default: '60px'
 27 |     },
 28 |     margin: {
 29 |       type: String,
 30 |       default: '2px'
 31 |     },
 32 |     radius: {
 33 |       type: String,
 34 |       default: '100%'
 35 |     }
 36 |   },
 37 |   computed: {
 38 |     spinnerStyle () {
 39 |       return {
 40 |         height: this.size,
 41 |         width: this.size,
 42 |         border: parseFloat(this.size)/10 + 'px solid' + this.color,
 43 |         opacity: 0.4,
 44 |         borderRadius: this.radius
 45 |       }
 46 |     },
 47 |     spinnerBasicStyle () {
 48 |       return {
 49 |         height: this.size,
 50 |         width: this.size,
 51 |         position: 'relative'
 52 |       }
 53 |     }
 54 |   }
 55 | 
 56 | }
 57 | </script>
 58 | 
 59 | <style>
 60 | 
 61 | .v-spinner .v-ring
 62 | {         
 63 | }
 64 | 
 65 | .v-spinner .v-ring1
 66 | {      
 67 | }
 68 | 
 69 | .v-spinner .v-ring2
 70 | {
 71 | 
 72 |     -webkit-animation: v-ringRightRotate 2s 0s infinite linear;
 73 |             animation: v-ringRightRotate 2s 0s infinite linear;
 74 |     -webkit-animation-fill-mode: forwards;
 75 |             animation-fill-mode: forwards;
 76 |     perspective: 800px;  
 77 |     position: absolute;          
 78 |     top: 0;
 79 |     left: 0;
 80 | }
 81 | 
 82 | .v-spinner .v-ring3
 83 | {
 84 | 
 85 |     -webkit-animation: v-ringLeftRotate 2s 0s infinite linear;
 86 |             animation: v-ringLeftRotate 2s 0s infinite linear;
 87 |     -webkit-animation-fill-mode: forwards;
 88 |             animation-fill-mode: forwards;
 89 |     perspective: 800px;            
 90 |     position: absolute;
 91 |     top: 0;
 92 |     left: 0;
 93 | }
 94 | 
 95 | @-webkit-keyframes v-ringRightRotate
 96 | {
 97 |     0%
 98 |     {
 99 |         -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
100 |                 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
101 |     }
102 |     100%
103 |     { 
104 |         -webkit-transform: rotateX(180deg) rotateY(360deg) rotateZ(360deg);
105 |                 transform: rotateX(180deg) rotateY(360deg) rotateZ(360deg);
106 |     
107 |     }
108 | }
109 | 
110 | @keyframes v-ringRightRotate
111 | {
112 |     0%
113 |     {
114 |         -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
115 |                 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
116 |     }
117 |     100%
118 |     { 
119 |         -webkit-transform: rotateX(180deg) rotateY(360deg) rotateZ(360deg);
120 |                 transform: rotateX(180deg) rotateY(360deg) rotateZ(360deg);
121 |     
122 |     }
123 | }
124 | 
125 | @-webkit-keyframes v-ringLeftRotate
126 | {
127 |     0%
128 |     {
129 |         -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
130 |                 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
131 |     }
132 |     100%
133 |     { 
134 |         -webkit-transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
135 |                 transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
136 |     
137 |     }
138 | }
139 | 
140 | @keyframes v-ringLeftRotate
141 | {
142 |     0%
143 |     {
144 |         -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
145 |                 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
146 |     }
147 |     100%
148 |     { 
149 |         -webkit-transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
150 |                 transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
151 |     
152 |     }
153 | }
154 | </style>


--------------------------------------------------------------------------------
/src/FadeLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="v-spinner" v-bind:style="{position: 'relative', fontSize: 0}" v-show="loading">
  3 |   <!-- <div class="v-spinner" v-bind:style="containerStyle"> -->
  4 |     <div class="v-fade v-fade1" v-bind:style="[spinnerStyle,animationStyle1]">
  5 |     </div><div class="v-fade v-fade2" v-bind:style="[spinnerStyle,animationStyle2]">
  6 |     </div><div class="v-fade v-fade3" v-bind:style="[spinnerStyle,animationStyle3]">
  7 |     </div><div class="v-fade v-fade4" v-bind:style="[spinnerStyle,animationStyle4]">
  8 |     </div><div class="v-fade v-fade5" v-bind:style="[spinnerStyle,animationStyle5]">
  9 |     </div><div class="v-fade v-fade6" v-bind:style="[spinnerStyle,animationStyle6]">
 10 |     </div><div class="v-fade v-fade7" v-bind:style="[spinnerStyle,animationStyle7]">
 11 |     </div><div class="v-fade v-fade8" v-bind:style="[spinnerStyle,animationStyle8]">
 12 |     </div>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script>
 17 | export default {
 18 |   
 19 |   name: 'FadeLoader',
 20 | 
 21 |   props: {
 22 |     loading: {
 23 |       type: Boolean,
 24 |       default: true
 25 |     },
 26 |     color: { 
 27 |       type: String,
 28 |       default: '#5dc596'
 29 |     },
 30 |     height: {
 31 |       type: String,
 32 |       default: '15px'
 33 |     },
 34 |     width: {
 35 |       type: String,
 36 |       default: '5px'
 37 |     },
 38 |     margin: {
 39 |       type: String,
 40 |       default: '2px'
 41 |     },
 42 |     radius: {
 43 |       type: String,
 44 |       default: '20px'
 45 |     }
 46 |   },
 47 |   data () {
 48 |     return {
 49 |       spinnerStyle: {
 50 |       	backgroundColor: this.color,
 51 |       	height: this.height,
 52 |      		width: this.width,
 53 |       	margin: this.margin,
 54 |       	borderRadius: this.radius
 55 |       }
 56 |     }
 57 |   },
 58 |   computed: {
 59 |     ngRadius () {
 60 |       return '-' + this.radius
 61 |     },
 62 |     quarter () {
 63 |       return (parseFloat(this.radius)/2 + parseFloat(this.radius)/5.5) + 'px'
 64 |     },
 65 |     ngQuarter () {
 66 |       return '-' + this.quarter
 67 |     },
 68 |     animationStyle1 () {
 69 |       return {
 70 |         top: this.radius,
 71 |         left: 0,
 72 |         animationDelay: '0.12s'
 73 |       }
 74 |     },
 75 |     animationStyle2 () {
 76 |       return {
 77 |         top: this.quarter,
 78 |         left: this.quarter,
 79 |         animationDelay: '0.24s',
 80 |         transform: 'rotate(-45deg)'
 81 |       }
 82 |     },
 83 |     animationStyle3 () {
 84 |       return {
 85 |         top: 0,
 86 |         left: this.radius,
 87 |         animationDelay: '0.36s',
 88 |         transform: 'rotate(90deg)'
 89 |       }
 90 |     },
 91 |     animationStyle4 () {
 92 |       return {
 93 |         top: this.ngQuarter,
 94 |         left: this.quarter,
 95 |         animationDelay: '0.48s',
 96 |         transform: 'rotate(45deg)'
 97 |       }
 98 |     },
 99 |     animationStyle5 () {
100 |       return {
101 |         top: this.ngRadius,
102 |         left: 0,
103 |         animationDelay: '0.60s'
104 |       }
105 |     },
106 |     animationStyle6 () {
107 |       return {
108 |         top: this.ngQuarter,
109 |         left: this.ngQuarter,
110 |         animationDelay: '0.72s',
111 |         transform: 'rotate(-45deg)'
112 |       }
113 |     },
114 |     animationStyle7 () {
115 |       return {
116 |         top: 0,
117 |         left: this.ngRadius,
118 |         animationDelay: '0.84s',
119 |         transform: 'rotate(90deg)'
120 |       }
121 |     },
122 |     animationStyle8 () {
123 |       return {
124 |         top: this.quarter,
125 |         left: this.ngQuarter,
126 |         animationDelay: '0.96s',
127 |         transform: 'rotate(45deg)'
128 |       }
129 |     }
130 |   }
131 | 
132 | }
133 | </script>
134 | 
135 | <style>
136 | 
137 | .v-spinner .v-fade
138 | {
139 |     -webkit-animation: v-fadeStretchDelay 1.2s infinite ease-in-out;
140 |             animation: v-fadeStretchDelay 1.2s infinite ease-in-out;
141 |     -webkit-animation-fill-mode: both;
142 | 	          animation-fill-mode: both;
143 |     position: absolute;               
144 | }
145 | 
146 | @-webkit-keyframes v-fadeStretchDelay
147 | {
148 |     50%
149 |     {
150 |         -webkit-opacity: 0.3;             
151 |                 opacity: 0.3;
152 |     }
153 |     100%
154 |     {
155 |         -webkit-opacity: 1;             
156 |                 opacity: 1;
157 |     }
158 | }
159 | 
160 | @keyframes v-fadeStretchDelay
161 | {
162 |     50%
163 |     {
164 |         -webkit-opacity: 0.3;             
165 |                 opacity: 0.3;
166 |     }
167 |     100%
168 |     {
169 |         -webkit-opacity: 1;             
170 |                 opacity: 1;
171 |     }
172 | }
173 | </style>


--------------------------------------------------------------------------------
/src/RiseLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="v-spinner" v-show="loading">
  3 |     <div class="v-rise v-rise-odd" v-bind:style="spinnerStyle">
  4 |     </div><div class="v-rise v-rise-even" v-bind:style="spinnerStyle">
  5 |     </div><div class="v-rise v-rise-odd" v-bind:style="spinnerStyle">
  6 |     </div><div class="v-rise v-rise-even" v-bind:style="spinnerStyle">
  7 |     </div><div class="v-rise v-rise-odd" v-bind:style="spinnerStyle">
  8 |     </div>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | export default {
 14 |   
 15 |   name: 'RiseLoader',
 16 | 
 17 |   props: {
 18 |     loading: {
 19 |       type: Boolean,
 20 |       default: true
 21 |     },
 22 |   	color: { 
 23 |       type: String,
 24 |       default: '#5dc596'
 25 |     },
 26 |   	size: {
 27 |       type: String,
 28 |       default: '15px'
 29 |     },
 30 |   	margin: {
 31 |       type: String,
 32 |       default: '2px'
 33 |     },
 34 |     radius: {
 35 |       type: String,
 36 |       default: '100%'
 37 |     }
 38 |   },
 39 |   data () {
 40 |     return {
 41 |       spinnerStyle: {
 42 |       	backgroundColor: this.color,
 43 |       	height: this.size,
 44 |      	width: this.size,
 45 |       	margin: this.margin,
 46 |       	borderRadius: this.radius
 47 |       }
 48 |     }
 49 |   }
 50 | 
 51 | }
 52 | </script>
 53 | 
 54 | <style>
 55 | .v-spinner
 56 | {
 57 | /*	  font-size: 10px; 
 58 | 
 59 |     width: 60px;
 60 |     height: 40px;*/
 61 |     /*margin: 25px auto;*/
 62 |     text-align: center;
 63 |  
 64 | }
 65 | 
 66 | .v-spinner .v-rise-odd
 67 | {
 68 |     -webkit-animation: v-riseOddDelay 1s 0s infinite cubic-bezier(.15,.46,.9,.6);
 69 |             animation: v-riseOddDelay 1s 0s infinite cubic-bezier(.15,.46,.9,.6);
 70 |     -webkit-animation-fill-mode: both;
 71 | 	        animation-fill-mode: both;
 72 | 
 73 |     display: inline-block;
 74 | }
 75 | 
 76 | .v-spinner .v-rise-even
 77 | {
 78 |     -webkit-animation: v-riseEvenDelay 1s 0s infinite cubic-bezier(.15,.46,.9,.6);
 79 |             animation: v-riseEvenDelay 1s 0s infinite cubic-bezier(.15,.46,.9,.6);
 80 |     -webkit-animation-fill-mode: both;
 81 |             animation-fill-mode: both;
 82 | 
 83 |     display: inline-block;
 84 | }
 85 | 
 86 | @-webkit-keyframes v-riseOddDelay
 87 | {
 88 |     25
 89 |     {
 90 |         -webkit-transform: translateY(30px);
 91 |                 transform: translateY(30px);
 92 |     }
 93 |     0%
 94 |     {
 95 |         -webkit-transform: scale(0.4);
 96 |                 transform: scale(0.4);
 97 |     }
 98 |     50%
 99 |     {
100 |         -webkit-transform: scale(1.1);
101 |                 transform: scale(1.1);
102 |     }
103 |     75%
104 |     {
105 |         -webkit-transform: translateY(-30px);
106 |                 transform: translateY(-30px);
107 |     }
108 |     100%
109 |     {
110 |         -webkit-transform: translateY(0) scale(0.75);
111 |                 transform: translateY(0) scale(0.75);
112 |     }
113 | }
114 | 
115 | @keyframes v-riseOddDelay
116 | {
117 |     25
118 |     {
119 |         -webkit-transform: translateY(30px);
120 |                 transform: translateY(30px);
121 |     }
122 |     0%
123 |     {
124 |         -webkit-transform: scale(0.4);
125 |                 transform: scale(0.4);
126 |     }
127 |     50%
128 |     {
129 |         -webkit-transform: scale(1.1);
130 |                 transform: scale(1.1);
131 |     }
132 |     75%
133 |     {
134 |         -webkit-transform: translateY(-30px);
135 |                 transform: translateY(-30px);
136 |     }
137 |     100%
138 |     {
139 |         -webkit-transform: translateY(0) scale(0.75);
140 |                 transform: translateY(0) scale(0.75);
141 |     }
142 | }
143 | 
144 | @-webkit-keyframes v-riseEvenDelay
145 | {
146 |     25
147 |     {
148 |         -webkit-transform: translateY(-30px);
149 |                 transform: translateY(-30px);
150 |     }
151 |     0%
152 |     {
153 |         -webkit-transform: scale(1.1);
154 |                 transform: scale(1.1);
155 |     }
156 |     50%
157 |     {
158 |         -webkit-transform: scale(0.4);
159 |                 transform: scale(0.4);
160 |     }
161 |     75%
162 |     {
163 |         -webkit-transform: translateY(30px);
164 |                 transform: translateY(30px);
165 |     }
166 |     100%
167 |     {
168 |         -webkit-transform: translateY(0) scale(1.0);
169 |                 transform: translateY(0) scale(1.0);
170 |     }
171 | }
172 | 
173 | @keyframes v-riseEvenDelay
174 | {
175 |     25
176 |     {
177 |         -webkit-transform: translateY(-30px);
178 |                 transform: translateY(-30px);
179 |     }
180 |     0%
181 |     {
182 |         -webkit-transform: scale(1.1);
183 |                 transform: scale(1.1);
184 |     }
185 |     50%
186 |     {
187 |         -webkit-transform: scale(0.4);
188 |                 transform: scale(0.4);
189 |     }
190 |     75%
191 |     {
192 |         -webkit-transform: translateY(30px);
193 |                 transform: translateY(30px);
194 |     }
195 |     100%
196 |     {
197 |         -webkit-transform: translateY(0) scale(1.0);
198 |                 transform: translateY(0) scale(1.0);
199 |     }
200 | }
201 | </style>


--------------------------------------------------------------------------------
/src/GridLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="v-spinner" v-bind:style="containerStyle" v-show="loading">
  3 |     <div class="v-grid v-grid1" v-bind:style="[spinnerStyle,animationStyle,animationStyle1]">
  4 |     </div><div class="v-grid v-grid2" v-bind:style="[spinnerStyle,animationStyle,animationStyle2]">
  5 |     </div><div class="v-grid v-grid3" v-bind:style="[spinnerStyle,animationStyle,animationStyle3]">
  6 |     </div><div class="v-grid v-grid4" v-bind:style="[spinnerStyle,animationStyle,animationStyle4]">
  7 |     </div><div class="v-grid v-grid5" v-bind:style="[spinnerStyle,animationStyle,animationStyle5]">
  8 |     </div><div class="v-grid v-grid6" v-bind:style="[spinnerStyle,animationStyle,animationStyle6]">
  9 |     </div><div class="v-grid v-grid7" v-bind:style="[spinnerStyle,animationStyle,animationStyle7]">
 10 |     </div><div class="v-grid v-grid8" v-bind:style="[spinnerStyle,animationStyle,animationStyle8]">
 11 |     </div><div class="v-grid v-grid9" v-bind:style="[spinnerStyle,animationStyle,animationStyle9]">
 12 |     </div>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script>
 17 | export default {
 18 |   
 19 |   name: 'GridLoader',
 20 | 
 21 |   props: {
 22 |     loading: {
 23 |       type: Boolean,
 24 |       default: true
 25 |     },
 26 |     color: { 
 27 |       type: String,
 28 |       default: '#5dc596'
 29 |     },
 30 |     size: {
 31 |       type: String,
 32 |       default: '15px'
 33 |     },
 34 |     margin: {
 35 |       type: String,
 36 |       default: '2px'
 37 |     },
 38 |     radius: {
 39 |       type: String,
 40 |       default: '100%'
 41 |     }
 42 |   },
 43 |   data () {
 44 |     return {
 45 |       spinnerStyle: {
 46 |         backgroundColor: this.color,
 47 |         width: this.size,
 48 |         height: this.size,
 49 |         margin: this.margin,
 50 |         borderRadius: this.radius
 51 |       }
 52 |     }
 53 |   },
 54 |   computed: {
 55 |     animationStyle () {
 56 |       return {
 57 |         animationName: 'v-gridStretchDelay',
 58 |         animationIterationCount: 'infinite',
 59 |         animationTimingFunction: 'ease',
 60 |         animationFillMode: 'both',
 61 |         display: 'inline-block'
 62 |       }
 63 |     },
 64 |     animationStyle1 () {
 65 |       return {
 66 |         animationDelay: this.delay(),
 67 |         animationDuration: this.duration()
 68 |       }
 69 |     },
 70 |     animationStyle2 () {
 71 |       return {
 72 |         animationDelay: this.delay(),
 73 |         animationDuration: this.duration()
 74 |       }
 75 |     },
 76 |     animationStyle3 () {
 77 |       return {
 78 |         animationDelay: this.delay(),
 79 |         animationDuration: this.duration()
 80 |       }
 81 |     },
 82 |     animationStyle4 () {
 83 |       return {
 84 |         animationDelay: this.delay(),
 85 |         animationDuration: this.duration()
 86 |       }
 87 |     },
 88 |     animationStyle5 () {
 89 |       return {
 90 |         animationDelay: this.delay(),
 91 |         animationDuration: this.duration()
 92 |       }
 93 |     },
 94 |     animationStyle6 () {
 95 |       return {
 96 |         animationDelay: this.delay(),
 97 |         animationDuration: this.duration()
 98 |       }
 99 |     },
100 |     animationStyle7 () {
101 |       return {
102 |         animationDelay: this.delay(),
103 |         animationDuration: this.duration()
104 |       }
105 |     },
106 |     animationStyle8 () {
107 |       return {
108 |         animationDelay: this.delay(),
109 |         animationDuration: this.duration()
110 |       }
111 |     },
112 |     animationStyle9 () {
113 |       return {
114 |         animationDelay: this.delay(),
115 |         animationDuration: this.duration()
116 |       }
117 |     },
118 |     containerStyle () {
119 |       return {
120 |         width: parseFloat(this.size) * 3 + parseFloat(this.margin) * 6 + 'px',
121 |         fontSize: 0
122 |       }
123 |     }
124 |   },
125 |   methods: {
126 |     random (value) {
127 |       return Math.random() * value
128 |     },
129 |     delay () {
130 |       return ((this.random(100) / 100) - 0.2) + 's'
131 |     },
132 |     duration () {
133 |       return ((this.random(100) / 100) + 0.6) + 's'
134 |     },
135 |   }
136 | }
137 | </script>
138 | 
139 | <style>
140 | @-webkit-keyframes v-gridStretchDelay
141 | {
142 |     0%
143 |     {
144 |         -webkit-transform: scale(1);
145 |                 transform: scale(1);
146 |     }
147 |     50%
148 |     {
149 |         -webkit-transform: scale(0.5);
150 |                 transform: scale(0.5);
151 |         -webkit-opacity: 0.7;             
152 |                 opacity: 0.7;
153 |     }
154 |     100%
155 |     {
156 |         -webkit-transform: scale(1);
157 |                 transform: scale(1);
158 |         -webkit-opacity: 1;             
159 |                 opacity: 1;
160 |     }
161 | }
162 | 
163 | @keyframes v-gridStretchDelay
164 | {
165 |     0%
166 |     {
167 |         -webkit-transform: scale(1);
168 |                 transform: scale(1);
169 |     }
170 |     50%
171 |     {
172 |         -webkit-transform: scale(0.5);
173 |                 transform: scale(0.5);
174 |         -webkit-opacity: 0.7;             
175 |                 opacity: 0.7;
176 |     }
177 |     100%
178 |     {
179 |         -webkit-transform: scale(1);
180 |                 transform: scale(1);
181 |         -webkit-opacity: 1;             
182 |                 opacity: 1;
183 |     }
184 | }
185 | </style>


--------------------------------------------------------------------------------
/dist/vue-spinner.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSpinner=e():t.VueSpinner=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}var a=i(75),r=n(a),o=i(72),s=n(o),l=i(69),d=n(l),p=i(77),f=n(p),c=i(67),u=n(c),v=i(82),m=n(v),y=i(78),b=n(y),h=i(71),g=n(h),x=i(74),S=n(x),k=i(81),w=n(k),D=i(79),Y=n(D),z=i(80),_=n(z),R=i(73),L=n(R),M=i(76),X=n(M),B=i(68),C=n(B),j=i(70),O=n(j),F={PulseLoader:r.default,GridLoader:s.default,ClipLoader:d.default,RiseLoader:f.default,BeatLoader:u.default,SyncLoader:m.default,RotateLoader:b.default,FadeLoader:g.default,PacmanLoader:S.default,SquareLoader:w.default,ScaleLoader:Y.default,SkewLoader:_.default,MoonLoader:L.default,RingLoader:X.default,BounceLoader:C.default,DotLoader:O.default};t.exports=F},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},a=0;a<this.length;a++){var r=this[a][0];"number"==typeof r&&(n[r]=!0)}for(a=0;a<e.length;a++){var o=e[a];"number"==typeof o[0]&&n[o[0]]||(i&&!o[2]?o[2]=i:i&&(o[2]="("+o[2]+") and ("+i+")"),t.push(o))}},t}},function(t,e,i){function n(t,e){for(var i=0;i<t.length;i++){var n=t[i],a=u[n.id];if(a){a.refs++;for(var r=0;r<a.parts.length;r++)a.parts[r](n.parts[r]);for(;r<n.parts.length;r++)a.parts.push(d(n.parts[r],e))}else{for(var o=[],r=0;r<n.parts.length;r++)o.push(d(n.parts[r],e));u[n.id]={id:n.id,refs:1,parts:o}}}}function a(t){for(var e=[],i={},n=0;n<t.length;n++){var a=t[n],r=a[0],o=a[1],s=a[2],l=a[3],d={css:o,media:s,sourceMap:l};i[r]?i[r].parts.push(d):e.push(i[r]={id:r,parts:[d]})}return e}function r(t,e){var i=y(),n=g[g.length-1];if("top"===t.insertAt)n?n.nextSibling?i.insertBefore(e,n.nextSibling):i.appendChild(e):i.insertBefore(e,i.firstChild),g.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");i.appendChild(e)}}function o(t){t.parentNode.removeChild(t);var e=g.indexOf(t);e>=0&&g.splice(e,1)}function s(t){var e=document.createElement("style");return e.type="text/css",r(t,e),e}function l(t){var e=document.createElement("link");return e.rel="stylesheet",r(t,e),e}function d(t,e){var i,n,a;if(e.singleton){var r=h++;i=b||(b=s(e)),n=p.bind(null,i,r,!1),a=p.bind(null,i,r,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=l(e),n=c.bind(null,i),a=function(){o(i),i.href&&URL.revokeObjectURL(i.href)}):(i=s(e),n=f.bind(null,i),a=function(){o(i)});return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else a()}}function p(t,e,i,n){var a=i?"":n.css;if(t.styleSheet)t.styleSheet.cssText=x(e,a);else{var r=document.createTextNode(a),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(r,o[e]):t.appendChild(r)}}function f(t,e){var i=e.css,n=e.media;if(n&&t.setAttribute("media",n),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}function c(t,e){var i=e.css,n=e.sourceMap;n&&(i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var a=new Blob([i],{type:"text/css"}),r=t.href;t.href=URL.createObjectURL(a),r&&URL.revokeObjectURL(r)}var u={},v=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},m=v(function(){return/msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase())}),y=v(function(){return document.head||document.getElementsByTagName("head")[0]}),b=null,h=0,g=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=m()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var i=a(t);return n(i,e),function(t){for(var r=[],o=0;o<i.length;o++){var s=i[o],l=u[s.id];l.refs--,r.push(l)}if(t){var d=a(t);n(d,e)}for(var o=0;o<r.length;o++){var l=r[o];if(0===l.refs){for(var p=0;p<l.parts.length;p++)l.parts[p]();delete u[l.id]}}}};var x=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"BeatLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"15px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,height:this.size,width:this.size,margin:this.margin,borderRadius:this.radius}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"BounceLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"60px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,height:this.size,width:this.size,borderRadius:this.radius,opacity:.6,position:"absolute",top:0,left:0}}},computed:{spinnerBasicStyle:function(){return{height:this.size,width:this.size,position:"relative"}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"ClipLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"35px"},radius:{type:String,default:"100%"}},computed:{spinnerStyle:function(){return{height:this.size,width:this.size,borderWidth:"2px",borderStyle:"solid",borderColor:this.color+" "+this.color+" transparent",borderRadius:this.radius,background:"transparent"}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"DotLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"60px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},computed:{spinnerStyle:function(){return{backgroundColor:this.color,height:parseFloat(this.size)/2+"px",width:parseFloat(this.size)/2+"px",borderRadius:this.radius}},spinnerBasicStyle:function(){return{height:this.size,width:this.size,position:"relative"}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"FadeLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},height:{type:String,default:"15px"},width:{type:String,default:"5px"},margin:{type:String,default:"2px"},radius:{type:String,default:"20px"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,height:this.height,width:this.width,margin:this.margin,borderRadius:this.radius}}},computed:{ngRadius:function(){return"-"+this.radius},quarter:function(){return parseFloat(this.radius)/2+parseFloat(this.radius)/5.5+"px"},ngQuarter:function(){return"-"+this.quarter},animationStyle1:function(){return{top:this.radius,left:0,animationDelay:"0.12s"}},animationStyle2:function(){return{top:this.quarter,left:this.quarter,animationDelay:"0.24s",transform:"rotate(-45deg)"}},animationStyle3:function(){return{top:0,left:this.radius,animationDelay:"0.36s",transform:"rotate(90deg)"}},animationStyle4:function(){return{top:this.ngQuarter,left:this.quarter,animationDelay:"0.48s",transform:"rotate(45deg)"}},animationStyle5:function(){return{top:this.ngRadius,left:0,animationDelay:"0.60s"}},animationStyle6:function(){return{top:this.ngQuarter,left:this.ngQuarter,animationDelay:"0.72s",transform:"rotate(-45deg)"}},animationStyle7:function(){return{top:0,left:this.ngRadius,animationDelay:"0.84s",transform:"rotate(90deg)"}},animationStyle8:function(){return{top:this.quarter,left:this.ngQuarter,animationDelay:"0.96s",transform:"rotate(45deg)"}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"GridLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"15px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,width:this.size,height:this.size,margin:this.margin,borderRadius:this.radius}}},computed:{animationStyle:function(){return{animationName:"v-gridStretchDelay",animationIterationCount:"infinite",animationTimingFunction:"ease",animationFillMode:"both",display:"inline-block"}},animationStyle1:function(){return{animationDelay:this.delay(),animationDuration:this.duration()}},animationStyle2:function(){return{animationDelay:this.delay(),animationDuration:this.duration()}},animationStyle3:function(){return{animationDelay:this.delay(),animationDuration:this.duration()}},animationStyle4:function(){return{animationDelay:this.delay(),animationDuration:this.duration()}},animationStyle5:function(){return{animationDelay:this.delay(),animationDuration:this.duration()}},animationStyle6:function(){return{animationDelay:this.delay(),animationDuration:this.duration()}},animationStyle7:function(){return{animationDelay:this.delay(),animationDuration:this.duration()}},animationStyle8:function(){return{animationDelay:this.delay(),animationDuration:this.duration()}},animationStyle9:function(){return{animationDelay:this.delay(),animationDuration:this.duration()}},containerStyle:function(){return{width:3*parseFloat(this.size)+6*parseFloat(this.margin)+"px",fontSize:0}}},methods:{random:function(t){return Math.random()*t},delay:function(){return this.random(100)/100-.2+"s"},duration:function(){return this.random(100)/100+.6+"s"}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"MoonLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"60px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},data:function(){return{spinnerStyle:{height:this.size,width:this.size,borderRadius:this.radius}}},computed:{moonSize:function(){return parseFloat(this.size)/7},spinnerMoonStyle:function(){return{height:this.moonSize+"px",width:this.moonSize+"px",borderRadius:this.radius}},animationStyle2:function(){return{top:parseFloat(this.size)/2-this.moonSize/2+"px",backgroundColor:this.color}},animationStyle3:function(){return{border:this.moonSize+"px solid "+this.color}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"PacmanLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"25px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},data:function(){return{spinnerDelay2:{animationDelay:"0.25s"},spinnerDelay3:{animationDelay:"0.50s"},spinnerDelay4:{animationDelay:"0.75s"},spinnerDelay5:{animationDelay:"1s"}}},computed:{spinnerStyle:function(){return{backgroundColor:this.color,width:this.size,height:this.size,margin:this.margin,borderRadius:this.radius}},border1:function(){return this.size+" solid transparent"},border2:function(){return this.size+" solid "+this.color},spinnerStyle1:function(){return{width:0,height:0,borderTop:this.border2,borderRight:this.border1,borderBottom:this.border2,borderLeft:this.border2,borderRadius:this.size}},animationStyle:function(){return{width:"10px",height:"10px",transform:"translate(0, "+-parseFloat(this.size)/4+"px)",position:"absolute",top:"25px",left:"100px",animationName:"v-pacmanStretchDelay",animationDuration:"1s",animationIterationCount:"infinite",animationTimingFunction:"linear",animationFillMode:"both"}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"PulseLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"15px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,width:this.size,height:this.size,margin:this.margin,borderRadius:this.radius,display:"inline-block",animationName:"v-pulseStretchDelay",animationDuration:"0.75s",animationIterationCount:"infinite",animationTimingFunction:"cubic-bezier(.2,.68,.18,1.08)",animationFillMode:"both"},spinnerDelay1:{animationDelay:"0.12s"},spinnerDelay2:{animationDelay:"0.24s"},spinnerDelay3:{animationDelay:"0.36s"}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"RingLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"60px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},computed:{spinnerStyle:function(){return{height:this.size,width:this.size,border:parseFloat(this.size)/10+"px solid"+this.color,opacity:.4,borderRadius:this.radius}},spinnerBasicStyle:function(){return{height:this.size,width:this.size,position:"relative"}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"RiseLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"15px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,height:this.size,width:this.size,margin:this.margin,borderRadius:this.radius}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"RotateLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"15px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,height:this.size,width:this.size,margin:this.margin,borderRadius:this.radius}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"ScaleLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},height:{type:String,default:"35px"},width:{type:String,default:"4px"},margin:{type:String,default:"2px"},radius:{type:String,default:"2px"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,height:this.height,width:this.width,margin:this.margin,borderRadius:this.radius,display:"inline-block",animationName:"v-scaleStretchDelay",animationDuration:"1s",animationIterationCount:"infinite",animationTimingFunction:"cubic-bezier(.2,.68,.18,1.08)",animationFillMode:"both"},spinnerDelay1:{animationDelay:"0.1s"},spinnerDelay2:{animationDelay:"0.2s"},spinnerDelay3:{animationDelay:"0.3s"},spinnerDelay4:{animationDelay:"0.4s"},spinnerDelay5:{animationDelay:"0.5s"}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"SkewLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"20px"}},data:function(){return{spinnerStyle:{height:0,width:0,borderLeft:this.size+" solid transparent",borderRight:this.size+" solid transparent",borderBottom:this.size+" solid "+this.color}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"SquareLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"50px"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,height:this.size,width:this.size}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"SyncLoader",props:{loading:{type:Boolean,default:!0},color:{type:String,default:"#5dc596"},size:{type:String,default:"15px"},margin:{type:String,default:"2px"},radius:{type:String,default:"100%"}},data:function(){return{spinnerStyle:{backgroundColor:this.color,height:this.size,width:this.size,margin:this.margin,borderRadius:this.radius,display:"inline-block",animationName:"v-syncStretchDelay",animationDuration:"0.6s",animationIterationCount:"infinite",animationTimingFunction:"ease-in-out",animationFillMode:"both"},spinnerDelay1:{animationDelay:"0.07s"},spinnerDelay2:{animationDelay:"0.14s"},spinnerDelay3:{animationDelay:"0.21s"}}}}},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner .v-rotate1{-webkit-animation:v-rotateStretchDelay 1s 0s infinite cubic-bezier(.7,-.13,.22,.86);animation:v-rotateStretchDelay 1s 0s infinite cubic-bezier(.7,-.13,.22,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;position:relative}.v-spinner .v-rotate2{opacity:.8;position:absolute;top:0;left:-28px}.v-spinner .v-rotate3{opacity:.8;position:absolute;top:0;left:25px}@-webkit-keyframes v-rotateStretchDelay{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes v-rotateStretchDelay{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner .v-moon1{position:relative}.v-spinner .v-moon1,.v-spinner .v-moon2{-webkit-animation:v-moonStretchDelay .6s 0s infinite linear;animation:v-moonStretchDelay .6s 0s infinite linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.v-spinner .v-moon2{opacity:.8;position:absolute}.v-spinner .v-moon3{opacity:.1}@-webkit-keyframes v-moonStretchDelay{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes v-moonStretchDelay{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner{text-align:center}@-webkit-keyframes v-pacmanStretchDelay{75%{-webkit-opacity:.7;opacity:.7}to{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@keyframes v-pacmanStretchDelay{75%{-webkit-opacity:.7;opacity:.7}to{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner .v-beat{-webkit-animation:v-beatStretchDelay .7s infinite linear;animation:v-beatStretchDelay .7s infinite linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}.v-spinner .v-beat-odd{-webkit-animation-delay:0s;animation-delay:0s}.v-spinner .v-beat-even{-webkit-animation-delay:.35s;animation-delay:.35s}@-webkit-keyframes v-beatStretchDelay{50%{-webkit-transform:scale(.75);transform:scale(.75);-webkit-opacity:.2;opacity:.2}to{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}}@keyframes v-beatStretchDelay{50%{-webkit-transform:scale(.75);transform:scale(.75);-webkit-opacity:.2;opacity:.2}to{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,'.v-spinner .v-dot1{-webkit-animation:v-dotRotate 2s 0s infinite linear;animation:v-dotRotate 2s 0s infinite linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.v-spinner .v-dot2{-webkit-animation:v-dotBounce 2s 0s infinite linear;animation:v-dotBounce 2s 0s infinite linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;position:"absolute";top:0;bottom:auto}.v-spinner .v-dot3{-webkit-animation:v-dotBounce 2s -1s infinite linear;animation:v-dotBounce 2s -1s infinite linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;position:"absolute";top:auto;bottom:0}@-webkit-keyframes v-dotRotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes v-dotRotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes v-dotBounce{0%,to{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes v-dotBounce{0%,to{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}',""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,"@-webkit-keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}@keyframes v-pulseStretchDelay{0%,80%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);-webkit-opacity:.7;opacity:.7}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,"@-webkit-keyframes v-syncStretchDelay{33%{-webkit-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes v-syncStretchDelay{33%{-webkit-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner .v-fade{-webkit-animation:v-fadeStretchDelay 1.2s infinite ease-in-out;animation:v-fadeStretchDelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute}@-webkit-keyframes v-fadeStretchDelay{50%{-webkit-opacity:.3;opacity:.3}to{-webkit-opacity:1;opacity:1}}@keyframes v-fadeStretchDelay{50%{-webkit-opacity:.3;opacity:.3}to{-webkit-opacity:1;opacity:1}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner .v-ring2{-webkit-animation:v-ringRightRotate 2s 0s infinite linear;animation:v-ringRightRotate 2s 0s infinite linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.v-spinner .v-ring2,.v-spinner .v-ring3{-webkit-perspective:800px;perspective:800px;position:absolute;top:0;left:0}.v-spinner .v-ring3{-webkit-animation:v-ringLeftRotate 2s 0s infinite linear;animation:v-ringLeftRotate 2s 0s infinite linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes v-ringRightRotate{0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotate(0deg);transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}to{-webkit-transform:rotateX(180deg) rotateY(1turn) rotate(1turn);transform:rotateX(180deg) rotateY(1turn) rotate(1turn)}}@keyframes v-ringRightRotate{0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotate(0deg);transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}to{-webkit-transform:rotateX(180deg) rotateY(1turn) rotate(1turn);transform:rotateX(180deg) rotateY(1turn) rotate(1turn)}}@-webkit-keyframes v-ringLeftRotate{0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotate(0deg);transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}to{-webkit-transform:rotateX(1turn) rotateY(180deg) rotate(1turn);transform:rotateX(1turn) rotateY(180deg) rotate(1turn)}}@keyframes v-ringLeftRotate{0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotate(0deg);transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}to{-webkit-transform:rotateX(1turn) rotateY(180deg) rotate(1turn);transform:rotateX(1turn) rotateY(180deg) rotate(1turn)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner .v-bounce2{-webkit-animation:v-bounceStretchDelay 2s 1s infinite ease-in-out;animation:v-bounceStretchDelay 2s 1s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.v-spinner .v-bounce3{-webkit-animation:v-bounceStretchDelay 2s 0s infinite ease-in-out;animation:v-bounceStretchDelay 2s 0s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes v-bounceStretchDelay{0%,to{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes v-bounceStretchDelay{0%,to{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner{text-align:center}.v-spinner .v-square{-webkit-animation:v-squareDelay 3s 0s infinite cubic-bezier(.09,.57,.49,.9);animation:v-squareDelay 3s 0s infinite cubic-bezier(.09,.57,.49,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-perspective:100px;perspective:100px;display:inline-block}@-webkit-keyframes v-squareDelay{25%{-webkit-transform:rotateX(180deg) rotateY(0);transform:rotateX(180deg) rotateY(0)}50%{-webkit-transform:rotateX(180deg) rotateY(180deg);transform:rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:rotateX(0) rotateY(180deg);transform:rotateX(0) rotateY(180deg)}to{-webkit-transform:rotateX(0) rotateY(0);transform:rotateX(0) rotateY(0)}}@keyframes v-squareDelay{25%{-webkit-transform:rotateX(180deg) rotateY(0);transform:rotateX(180deg) rotateY(0)}50%{-webkit-transform:rotateX(180deg) rotateY(180deg);transform:rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:rotateX(0) rotateY(180deg);transform:rotateX(0) rotateY(180deg)}to{-webkit-transform:rotateX(0) rotateY(0);transform:rotateX(0) rotateY(0)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner{text-align:center}.v-spinner .v-rise-odd{-webkit-animation:v-riseOddDelay 1s 0s infinite cubic-bezier(.15,.46,.9,.6);animation:v-riseOddDelay 1s 0s infinite cubic-bezier(.15,.46,.9,.6);-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}.v-spinner .v-rise-even{-webkit-animation:v-riseEvenDelay 1s 0s infinite cubic-bezier(.15,.46,.9,.6);animation:v-riseEvenDelay 1s 0s infinite cubic-bezier(.15,.46,.9,.6);-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}@-webkit-keyframes v-riseOddDelay{25{-webkit-transform:translateY(30px);transform:translateY(30px)}0%{-webkit-transform:scale(.4);transform:scale(.4)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}to{-webkit-transform:translateY(0) scale(.75);transform:translateY(0) scale(.75)}}@keyframes v-riseOddDelay{25{-webkit-transform:translateY(30px);transform:translateY(30px)}0%{-webkit-transform:scale(.4);transform:scale(.4)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}to{-webkit-transform:translateY(0) scale(.75);transform:translateY(0) scale(.75)}}@-webkit-keyframes v-riseEvenDelay{25{-webkit-transform:translateY(-30px);transform:translateY(-30px)}0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(.4);transform:scale(.4)}75%{-webkit-transform:translateY(30px);transform:translateY(30px)}to{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}@keyframes v-riseEvenDelay{25{-webkit-transform:translateY(-30px);transform:translateY(-30px)}0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(.4);transform:scale(.4)}75%{-webkit-transform:translateY(30px);transform:translateY(30px)}to{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner{text-align:center}.v-spinner .v-clip{-webkit-animation:v-clipDelay .75s 0s infinite linear;animation:v-clipDelay .75s 0s infinite linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}@-webkit-keyframes v-clipDelay{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.8);transform:rotate(180deg) scale(.8)}to{-webkit-transform:rotate(1turn) scale(1);transform:rotate(1turn) scale(1)}}@keyframes v-clipDelay{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.8);transform:rotate(180deg) scale(.8)}to{-webkit-transform:rotate(1turn) scale(1);transform:rotate(1turn) scale(1)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,"@-webkit-keyframes v-gridStretchDelay{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-opacity:.7;opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}}@keyframes v-gridStretchDelay{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-opacity:.7;opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner{text-align:center}.v-spinner .v-skew{-webkit-animation:v-skewDelay 3s 0s infinite cubic-bezier(.09,.57,.49,.9);animation:v-skewDelay 3s 0s infinite cubic-bezier(.09,.57,.49,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}@-webkit-keyframes v-skewDelay{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}to{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes v-skewDelay{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}to{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}",""])},function(t,e,i){e=t.exports=i(1)(),e.push([t.id,".v-spinner{text-align:center}@-webkit-keyframes v-scaleStretchDelay{0%{-webkit-animation-name:inherit;-webkit-animation-duration:inherit;-webkit-animation-iteration-count:inherit;-webkit-animation-direction:inherit}to{-webkit-transform:scaleY(1);transform:scaleY(1)}50%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}}@keyframes v-scaleStretchDelay{0%{-webkit-animation-name:inherit;-webkit-animation-duration:inherit;-webkit-animation-iteration-count:inherit;-webkit-animation-direction:inherit}to{-webkit-transform:scaleY(1);transform:scaleY(1)}50%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}}",""])},function(t,e,i){var n=i(19);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(20);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(21);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(22);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(23);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(24);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(25);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(26);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(27);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(28);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(29);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(30);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(31);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(32);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals);
2 | },function(t,e,i){var n=i(33);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){var n=i(34);"string"==typeof n&&(n=[[t.id,n,""]]);i(2)(n,{});n.locals&&(t.exports=n.locals)},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-beat v-beat-odd" v-bind:style=spinnerStyle> </div><div class="v-beat v-beat-even" v-bind:style=spinnerStyle> </div><div class="v-beat v-beat-odd" v-bind:style=spinnerStyle> </div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-bounce v-bounce1" v-bind:style=spinnerBasicStyle> <div class="v-bounce v-bounce2" v-bind:style=spinnerStyle> </div><div class="v-bounce v-bounce3" v-bind:style=spinnerStyle> </div></div> </div> '},function(t,e){t.exports=" <div class=v-spinner v-show=loading> <div class=v-clip v-bind:style=spinnerStyle> </div> </div> "},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-dot v-dot1" v-bind:style=spinnerBasicStyle> <div class="v-dot v-dot2" v-bind:style=spinnerStyle> </div><div class="v-dot v-dot3" v-bind:style=spinnerStyle> </div></div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-bind:style="{position: \'relative\', fontSize: 0}" v-show=loading> <div class="v-fade v-fade1" v-bind:style=[spinnerStyle,animationStyle1]> </div><div class="v-fade v-fade2" v-bind:style=[spinnerStyle,animationStyle2]> </div><div class="v-fade v-fade3" v-bind:style=[spinnerStyle,animationStyle3]> </div><div class="v-fade v-fade4" v-bind:style=[spinnerStyle,animationStyle4]> </div><div class="v-fade v-fade5" v-bind:style=[spinnerStyle,animationStyle5]> </div><div class="v-fade v-fade6" v-bind:style=[spinnerStyle,animationStyle6]> </div><div class="v-fade v-fade7" v-bind:style=[spinnerStyle,animationStyle7]> </div><div class="v-fade v-fade8" v-bind:style=[spinnerStyle,animationStyle8]> </div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-bind:style=containerStyle v-show=loading> <div class="v-grid v-grid1" v-bind:style=[spinnerStyle,animationStyle,animationStyle1]> </div><div class="v-grid v-grid2" v-bind:style=[spinnerStyle,animationStyle,animationStyle2]> </div><div class="v-grid v-grid3" v-bind:style=[spinnerStyle,animationStyle,animationStyle3]> </div><div class="v-grid v-grid4" v-bind:style=[spinnerStyle,animationStyle,animationStyle4]> </div><div class="v-grid v-grid5" v-bind:style=[spinnerStyle,animationStyle,animationStyle5]> </div><div class="v-grid v-grid6" v-bind:style=[spinnerStyle,animationStyle,animationStyle6]> </div><div class="v-grid v-grid7" v-bind:style=[spinnerStyle,animationStyle,animationStyle7]> </div><div class="v-grid v-grid8" v-bind:style=[spinnerStyle,animationStyle,animationStyle8]> </div><div class="v-grid v-grid9" v-bind:style=[spinnerStyle,animationStyle,animationStyle9]> </div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-moon v-moon1" v-bind:style=spinnerStyle> <div class="v-moon v-moon2" v-bind:style=[spinnerMoonStyle,animationStyle2]> </div><div class="v-moon v-moon3" v-bind:style=[spinnerStyle,animationStyle3]> </div></div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-bind:style="{position: \'relative\', fontSize: 0}" v-show=loading> <div class="v-pacman v-pacman1" v-bind:style=spinnerStyle1> </div><div class="v-pacman v-pacman2" v-bind:style=[spinnerStyle,animationStyle,spinnerDelay2]> </div><div class="v-pacman v-pacman3" v-bind:style=[spinnerStyle,animationStyle,spinnerDelay3]> </div><div class="v-pacman v-pacman4" v-bind:style=[spinnerStyle,animationStyle,spinnerDelay4]> </div><div class="v-pacman v-pacman5" v-bind:style=[spinnerStyle,animationStyle,spinnerDelay5]> </div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-pulse v-pulse1" v-bind:style=[spinnerStyle,spinnerDelay1]> </div><div class="v-pulse v-pulse2" v-bind:style=[spinnerStyle,spinnerDelay2]> </div><div class="v-pulse v-pulse3" v-bind:style=[spinnerStyle,spinnerDelay3]> </div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-ring v-ring1" v-bind:style=spinnerBasicStyle> <div class="v-ring v-ring2" v-bind:style=spinnerStyle> </div><div class="v-ring v-ring3" v-bind:style=spinnerStyle> </div></div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-rise v-rise-odd" v-bind:style=spinnerStyle> </div><div class="v-rise v-rise-even" v-bind:style=spinnerStyle> </div><div class="v-rise v-rise-odd" v-bind:style=spinnerStyle> </div><div class="v-rise v-rise-even" v-bind:style=spinnerStyle> </div><div class="v-rise v-rise-odd" v-bind:style=spinnerStyle> </div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-rotate v-rotate1" v-bind:style=spinnerStyle> <div class="v-rotate v-rotate2" v-bind:style=spinnerStyle> </div><div class="v-rotate v-rotate3" v-bind:style=spinnerStyle> </div></div> </div> '},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-scale v-scale1" v-bind:style=[spinnerStyle,spinnerDelay1]> </div><div class="v-scale v-scale2" v-bind:style=[spinnerStyle,spinnerDelay2]> </div><div class="v-scale v-scale3" v-bind:style=[spinnerStyle,spinnerDelay3]> </div><div class="v-scale v-scale4" v-bind:style=[spinnerStyle,spinnerDelay4]> </div><div class="v-scale v-scale5" v-bind:style=[spinnerStyle,spinnerDelay5]> </div> </div> '},function(t,e){t.exports=" <div class=v-spinner v-show=loading> <div class=v-skew v-bind:style=spinnerStyle> </div> </div> "},function(t,e){t.exports=" <div class=v-spinner v-show=loading> <div class=v-square v-bind:style=spinnerStyle> </div> </div> "},function(t,e){t.exports=' <div class=v-spinner v-show=loading> <div class="v-sync v-sync1" v-bind:style=[spinnerStyle,spinnerDelay1]> </div><div class="v-sync v-sync2" v-bind:style=[spinnerStyle,spinnerDelay2]> </div><div class="v-sync v-sync3" v-bind:style=[spinnerStyle,spinnerDelay3]> </div> </div> '},function(t,e,i){var n,a;i(38),n=i(3),a=i(51),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(44),n=i(4),a=i(52),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(47),n=i(5),a=i(53),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(39),n=i(6),a=i(54),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(42),n=i(7),a=i(55),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(48),n=i(8),a=i(56),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(36),n=i(9),a=i(57),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(37),n=i(10),a=i(58),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(40),n=i(11),a=i(59),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(43),n=i(12),a=i(60),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(46),n=i(13),a=i(61),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(35),n=i(14),a=i(62),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(50),n=i(15),a=i(63),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(49),n=i(16),a=i(64),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(45),n=i(17),a=i(65),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)},function(t,e,i){var n,a;i(41),n=i(18),a=i(66),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports.default),a&&(("function"==typeof t.exports?t.exports.options:t.exports).template=a)}])});


--------------------------------------------------------------------------------