├── .babelrc
├── .bitmap
├── .browserslistrc
├── .circleci
    └── config.yml
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc.json
├── LICENSE
├── README.md
├── _config.yml
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   ├── CircleLoader.vue
    │   ├── DefaultLoader.vue
    │   ├── DualRingLoader.vue
    │   ├── EllipsisLoader.vue
    │   ├── FacebookLoader.vue
    │   ├── GridLoader.vue
    │   ├── HeartLoader.vue
    │   ├── HourglassLoader.vue
    │   ├── LineLoader.vue
    │   ├── OrbitalsLoader.vue
    │   ├── RingLoader.vue
    │   ├── RippleLoader.vue
    │   ├── RollerLoader.vue
    │   ├── SpinnerLoader.vue
    │   └── index.js
    ├── helpers
    │   ├── calcPropertyValue.js
    │   └── validateDuration.js
    ├── index.js
    ├── install.js
    └── main.js
└── vue.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": [
3 |         [
4 |             "@vue/app"
5 |         ]
6 |     ]
7 | }


--------------------------------------------------------------------------------
/.bitmap:
--------------------------------------------------------------------------------
  1 | /* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
  2 | 
  3 | {
  4 |     "joshk.vue-spinners-css/circle-loader@1.1.5": {
  5 |         "files": [
  6 |             {
  7 |                 "name": "CircleLoader.vue",
  8 |                 "relativePath": "src/components/CircleLoader.vue",
  9 |                 "test": false
 10 |             }
 11 |         ],
 12 |         "mainFile": "src/components/CircleLoader.vue",
 13 |         "origin": "AUTHORED",
 14 |         "exported": true
 15 |     },
 16 |     "joshk.vue-spinners-css/default-loader@1.1.5": {
 17 |         "files": [
 18 |             {
 19 |                 "relativePath": "src/components/DefaultLoader.vue",
 20 |                 "test": false,
 21 |                 "name": "DefaultLoader.vue"
 22 |             }
 23 |         ],
 24 |         "mainFile": "src/components/DefaultLoader.vue",
 25 |         "origin": "AUTHORED",
 26 |         "exported": true
 27 |     },
 28 |     "joshk.vue-spinners-css/dual-ring-loader@1.1.5": {
 29 |         "files": [
 30 |             {
 31 |                 "relativePath": "src/components/DualRingLoader.vue",
 32 |                 "test": false,
 33 |                 "name": "DualRingLoader.vue"
 34 |             }
 35 |         ],
 36 |         "mainFile": "src/components/DualRingLoader.vue",
 37 |         "origin": "AUTHORED",
 38 |         "exported": true
 39 |     },
 40 |     "joshk.vue-spinners-css/ellipsis-loader@1.1.5": {
 41 |         "files": [
 42 |             {
 43 |                 "relativePath": "src/components/EllipsisLoader.vue",
 44 |                 "test": false,
 45 |                 "name": "EllipsisLoader.vue"
 46 |             }
 47 |         ],
 48 |         "mainFile": "src/components/EllipsisLoader.vue",
 49 |         "origin": "AUTHORED",
 50 |         "exported": true
 51 |     },
 52 |     "joshk.vue-spinners-css/facebook-loader@1.1.5": {
 53 |         "files": [
 54 |             {
 55 |                 "relativePath": "src/components/FacebookLoader.vue",
 56 |                 "test": false,
 57 |                 "name": "FacebookLoader.vue"
 58 |             }
 59 |         ],
 60 |         "mainFile": "src/components/FacebookLoader.vue",
 61 |         "origin": "AUTHORED",
 62 |         "exported": true
 63 |     },
 64 |     "joshk.vue-spinners-css/grid-loader@1.1.5": {
 65 |         "files": [
 66 |             {
 67 |                 "relativePath": "src/components/GridLoader.vue",
 68 |                 "test": false,
 69 |                 "name": "GridLoader.vue"
 70 |             }
 71 |         ],
 72 |         "mainFile": "src/components/GridLoader.vue",
 73 |         "origin": "AUTHORED",
 74 |         "exported": true
 75 |     },
 76 |     "joshk.vue-spinners-css/heart-loader@1.1.5": {
 77 |         "files": [
 78 |             {
 79 |                 "relativePath": "src/components/HeartLoader.vue",
 80 |                 "test": false,
 81 |                 "name": "HeartLoader.vue"
 82 |             }
 83 |         ],
 84 |         "mainFile": "src/components/HeartLoader.vue",
 85 |         "origin": "AUTHORED",
 86 |         "exported": true
 87 |     },
 88 |     "joshk.vue-spinners-css/helpers/calc-property-value@1.1.5": {
 89 |         "files": [
 90 |             {
 91 |                 "relativePath": "src/helpers/calcPropertyValue.js",
 92 |                 "test": false,
 93 |                 "name": "calcPropertyValue.js"
 94 |             }
 95 |         ],
 96 |         "mainFile": "src/helpers/calcPropertyValue.js",
 97 |         "origin": "AUTHORED",
 98 |         "exported": true
 99 |     },
100 |     "joshk.vue-spinners-css/helpers/validate-duration@1.1.5": {
101 |         "files": [
102 |             {
103 |                 "relativePath": "src/helpers/validateDuration.js",
104 |                 "test": false,
105 |                 "name": "validateDuration.js"
106 |             }
107 |         ],
108 |         "mainFile": "src/helpers/validateDuration.js",
109 |         "origin": "AUTHORED",
110 |         "exported": true
111 |     },
112 |     "joshk.vue-spinners-css/hourglass-loader@1.1.5": {
113 |         "files": [
114 |             {
115 |                 "relativePath": "src/components/HourglassLoader.vue",
116 |                 "test": false,
117 |                 "name": "HourglassLoader.vue"
118 |             }
119 |         ],
120 |         "mainFile": "src/components/HourglassLoader.vue",
121 |         "origin": "AUTHORED",
122 |         "exported": true
123 |     },
124 |     "joshk.vue-spinners-css/line-loader@1.1.5": {
125 |         "files": [
126 |             {
127 |                 "relativePath": "src/components/LineLoader.vue",
128 |                 "test": false,
129 |                 "name": "LineLoader.vue"
130 |             }
131 |         ],
132 |         "mainFile": "src/components/LineLoader.vue",
133 |         "origin": "AUTHORED",
134 |         "exported": true
135 |     },
136 |     "joshk.vue-spinners-css/orbitals-loader@1.1.5": {
137 |         "files": [
138 |             {
139 |                 "relativePath": "src/components/OrbitalsLoader.vue",
140 |                 "test": false,
141 |                 "name": "OrbitalsLoader.vue"
142 |             }
143 |         ],
144 |         "mainFile": "src/components/OrbitalsLoader.vue",
145 |         "origin": "AUTHORED",
146 |         "exported": true
147 |     },
148 |     "joshk.vue-spinners-css/ring-loader@1.1.5": {
149 |         "files": [
150 |             {
151 |                 "relativePath": "src/components/RingLoader.vue",
152 |                 "test": false,
153 |                 "name": "RingLoader.vue"
154 |             }
155 |         ],
156 |         "mainFile": "src/components/RingLoader.vue",
157 |         "origin": "AUTHORED",
158 |         "exported": true
159 |     },
160 |     "joshk.vue-spinners-css/ripple-loader@1.1.5": {
161 |         "files": [
162 |             {
163 |                 "relativePath": "src/components/RippleLoader.vue",
164 |                 "test": false,
165 |                 "name": "RippleLoader.vue"
166 |             }
167 |         ],
168 |         "mainFile": "src/components/RippleLoader.vue",
169 |         "origin": "AUTHORED",
170 |         "exported": true
171 |     },
172 |     "joshk.vue-spinners-css/roller-loader@1.1.5": {
173 |         "files": [
174 |             {
175 |                 "relativePath": "src/components/RollerLoader.vue",
176 |                 "test": false,
177 |                 "name": "RollerLoader.vue"
178 |             }
179 |         ],
180 |         "mainFile": "src/components/RollerLoader.vue",
181 |         "origin": "AUTHORED",
182 |         "exported": true
183 |     },
184 |     "joshk.vue-spinners-css/spinner-loader@1.1.5": {
185 |         "files": [
186 |             {
187 |                 "relativePath": "src/components/SpinnerLoader.vue",
188 |                 "test": false,
189 |                 "name": "SpinnerLoader.vue"
190 |             }
191 |         ],
192 |         "mainFile": "src/components/SpinnerLoader.vue",
193 |         "origin": "AUTHORED",
194 |         "exported": true
195 |     },
196 |     "version": "14.7.6"
197 | }


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | # Javascript Node CircleCI 2.0 configuration file
 2 | #
 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 4 | #
 5 | version: 2
 6 | jobs:
 7 |   build:lib:
 8 |     docker:
 9 |       # specify the version you desire here
10 |       - image: circleci/node:8.12.0
11 | 
12 |       # Specify service dependencies here if necessary
13 |       # CircleCI maintains a library of pre-built images
14 |       # documented at https://circleci.com/docs/2.0/circleci-images/
15 |       # - image: circleci/mongo:3.4.4
16 | 
17 |     working_directory: ~/repo
18 | 
19 |     steps:
20 |       - checkout
21 | 
22 |       # Download and cache dependencies
23 |       - restore_cache:
24 |           keys:
25 |             - v1-dependencies-{{ checksum "package.json" }}
26 |             # fallback to using the latest cache if no exact match is found
27 |             - v1-dependencies-
28 | 
29 |       - run: npm config set '@bit:registry' https://node.bit.dev && npm install
30 | 
31 |       - save_cache:
32 |           paths:
33 |             - node_modules
34 |           key: v1-dependencies-{{ checksum "package.json" }}
35 | 
36 |       # run build:lib!
37 |       - run: npm run build:lib
38 |   build:bit:
39 |     docker:
40 |       # specify the version you desire here
41 |       - image: circleci/node:8.12.0
42 | 
43 |       # Specify service dependencies here if necessary
44 |       # CircleCI maintains a library of pre-built images
45 |       # documented at https://circleci.com/docs/2.0/circleci-images/
46 |       # - image: circleci/mongo:3.4.4
47 | 
48 |     working_directory: ~/repo
49 | 
50 |     steps:
51 |       - checkout
52 | 
53 |       # Download and cache dependencies
54 |       - restore_cache:
55 |           keys:
56 |             - v1-dependencies-{{ checksum "package.json" }}
57 |             # fallback to using the latest cache if no exact match is found
58 |             - v1-dependencies-
59 | 
60 |       - run: npm config set '@bit:registry' https://node.bit.dev
61 |       - run: npm install && sudo npm i bit-bin -g
62 |       - run: bit config set analytics_reporting false && bit config set error_reporting false && bit config set user.token ${BIT_TOKEN}
63 |       - run: bit import
64 | 
65 |       - save_cache:
66 |           paths:
67 |             - node_modules
68 |           key: v1-dependencies-{{ checksum "package.json" }}
69 | 
70 |       # run build:lib!
71 |       - run: npm run build:bit
72 | 
73 | workflows:
74 |    version: 2
75 |    build:lib_and_build:bit:
76 |      jobs:
77 |        - build:lib
78 |        - build:bit


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     root: true,
 3 |     env: {
 4 |         node: true
 5 |     },
 6 |     'extends': [
 7 |         'plugin:vue/essential',
 8 |         'eslint:recommended'
 9 |     ],
10 |     rules: {
11 |         'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |     },
14 |     parserOptions: {
15 |         parser: 'babel-eslint'
16 |     }
17 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |     "trailingComma": "es5",
3 |     "tabWidth": 4,
4 |     "semi": false,
5 |     "singleQuote": true,
6 |     "printWidth": 120
7 | }


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


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


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-spinners-css",
 3 |   "version": "1.1.5",
 4 |   "private": false,
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/JoshK2/vue-spinners-css"
 8 |   },
 9 |   "main": "dist/vue-spinners-css.common.js",
10 |   "unpkg": "dist/vue-spinners-css.umd.min.js",
11 |   "files": [
12 |     "dist/*.{js,css}",
13 |     "README.md"
14 |   ],
15 |   "bugs": "https://github.com/JoshK2/vue-spinners-css/issues",
16 |   "homepage": "https://bit.dev/joshk/vue-spinners-css",
17 |   "keywords": [
18 |     "vue-spinners",
19 |     "vue-spinner",
20 |     "loadingio",
21 |     "loading-animations",
22 |     "loaders",
23 |     "css-animations",
24 |     "vuejs",
25 |     "component",
26 |     "vue-component",
27 |     "vue",
28 |     "spinner",
29 |     "spinners",
30 |     "loading",
31 |     "loader",
32 |     "progress",
33 |     "activity"
34 |   ],
35 |   "author": "JoshK2",
36 |   "license": "MIT",
37 |   "scripts": {
38 |     "serve": "vue-cli-service serve",
39 |     "build": "vue-cli-service build",
40 |     "build:lib": "rm -rf dist && vue-cli-service build --target lib --inline-vue --name vue-spinners-css ./src/index.js",
41 |     "build:bit": "rm -rf dist && bit build",
42 |     "lint": "vue-cli-service lint",
43 |     "format": "prettier --write \"src/**/*.vue\" \"src/**/*.js\"",
44 |     "deploy:npm": "npm publish",
45 |     "deploy:bit": "bit export joshk.vue-spinners-css"
46 |   },
47 |   "peerDependencies": {
48 |     "core-js": "^2.6.5",
49 |     "vue": "^2.6.10"
50 |   },
51 |   "devDependencies": {
52 |     "@vue/cli-plugin-babel": "^3.9.2",
53 |     "@vue/cli-plugin-eslint": "^3.9.2",
54 |     "@vue/cli-plugin-unit-jest": "^3.9.0",
55 |     "@vue/cli-service": "^3.9.3",
56 |     "@vue/test-utils": "1.0.0-beta.29",
57 |     "babel-core": "7.0.0-bridge.0",
58 |     "babel-eslint": "^10.0.2",
59 |     "babel-jest": "^24.8.0",
60 |     "eslint": "^6.0.1",
61 |     "eslint-plugin-vue": "^5.2.3",
62 |     "node-sass": "^4.12.0",
63 |     "sass-loader": "^7.1.0",
64 |     "vue-template-compiler": "^2.6.10",
65 |     "vuepress": "^1.0.2"
66 |   },
67 |   "bit": {
68 |     "env": {
69 |       "compiler": "bit.envs/compilers/vue@0.1.13"
70 |     },
71 |     "componentsDefaultDirectory": "components/{name}",
72 |     "packageManager": "npm"
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoshK2/vue-spinners-css/c8a46327e46b2f0eb13583ce27f875fe30610bfc/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-spinners-css</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-spinners-css doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div>
  4 |             <h1>Vue Spinners</h1>
  5 |             <div class="normal-spinners">
  6 |                 <CircleLoader :color="'#be97e8'" class="loader" />
  7 |                 <DefaultLoader :color="'#be97e8'" class="loader" />
  8 |                 <DualRingLoader :color="'#be97e8'" class="loader" />
  9 |                 <EllipsisLoader :color="'#be97e8'" class="loader" />
 10 |                 <FacebookLoader :color="'#be97e8'" class="loader" />
 11 |                 <GridLoader :color="'#be97e8'" class="loader" />
 12 |                 <HeartLoader :color="'#be97e8'" class="loader" />
 13 |                 <HourglassLoader :color="'#be97e8'" class="loader" />
 14 |                 <LineLoader :color="'#be97e8'" class="loader" />
 15 |                 <RingLoader :color="'#be97e8'" class="loader" />
 16 |                 <RippleLoader :color="'#be97e8'" class="loader" />
 17 |                 <RollerLoader :color="'#be97e8'" class="loader" />
 18 |                 <SpinnerLoader :color="'#be97e8'" class="loader" />
 19 |                 <OrbitalsLoader :color="'#be97e8'" class="loader" />
 20 |                 <div style="clear: both"></div>
 21 |             </div>
 22 |         </div>
 23 |         <div>
 24 |             <h2>Animation Duration Property</h2>
 25 |             <div class="normal-spinners">
 26 |                 <CircleLoader :color="'#be97e8'" duration="5s" />
 27 |                 <DefaultLoader :color="'#be97e8'" duration="5s" />
 28 |                 <DualRingLoader :color="'#be97e8'" duration="5s" />
 29 |                 <EllipsisLoader :color="'#be97e8'" duration="1s" />
 30 |                 <FacebookLoader :color="'#be97e8'" duration="5s" />
 31 |                 <GridLoader :color="'#be97e8'" duration="5s" />
 32 |                 <HeartLoader :color="'#be97e8'" duration="5s" />
 33 |                 <HourglassLoader :color="'#be97e8'" duration="5s" />
 34 |                 <LineLoader :color="'#be97e8'" duration="5s" />
 35 |                 <RingLoader :color="'#be97e8'" duration="5s" />
 36 |                 <RippleLoader :color="'#be97e8'" duration="5s" />
 37 |                 <RollerLoader :color="'#be97e8'" duration="5s" />
 38 |                 <SpinnerLoader :color="'#be97e8'" duration="5s" />
 39 |                 <OrbitalsLoader :color="'#be97e8'" duration="10s" />
 40 |             </div>
 41 |         </div>
 42 |         <div id="app">
 43 |             <h2 style="text-align: center;">Color Property</h2>
 44 |             <div class="block">
 45 |                 <CircleLoader :color="'#54f1d2'" />
 46 |                 <CircleLoader :color="'#be97e8'" />
 47 |                 <CircleLoader />
 48 |             </div>
 49 |             <div class="block">
 50 |                 <DefaultLoader :color="'#54f1d2'" />
 51 |                 <DefaultLoader :color="'#be97e8'" />
 52 |                 <DefaultLoader />
 53 |             </div>
 54 |             <div class="block">
 55 |                 <DualRingLoader :color="'#54f1d2'" />
 56 |                 <DualRingLoader :color="'#be97e8'" />
 57 |                 <DualRingLoader />
 58 |             </div>
 59 |             <div class="block">
 60 |                 <EllipsisLoader :color="'#54f1d2'" />
 61 |                 <EllipsisLoader :color="'#be97e8'" />
 62 |                 <EllipsisLoader />
 63 |             </div>
 64 |             <div class="block">
 65 |                 <FacebookLoader :color="'#54f1d2'" />
 66 |                 <FacebookLoader :color="'#be97e8'" />
 67 |                 <FacebookLoader />
 68 |             </div>
 69 |             <div class="block">
 70 |                 <GridLoader :color="'#54f1d2'" />
 71 |                 <GridLoader :color="'#be97e8'" />
 72 |                 <GridLoader />
 73 |             </div>
 74 |             <div class="block">
 75 |                 <HeartLoader :color="'#54f1d2'" />
 76 |                 <HeartLoader :color="'#be97e8'" />
 77 |                 <HeartLoader />
 78 |             </div>
 79 |             <div class="block">
 80 |                 <HourglassLoader :color="'#54f1d2'" />
 81 |                 <HourglassLoader :color="'#be97e8'" />
 82 |                 <HourglassLoader />
 83 |             </div>
 84 |             <div class="block">
 85 |                 <LineLoader :color="'#54f1d2'" />
 86 |                 <LineLoader :color="'#be97e8'" />
 87 |                 <LineLoader />
 88 |             </div>
 89 |             <div class="block">
 90 |                 <RingLoader :color="'#54f1d2'" />
 91 |                 <RingLoader :color="'#be97e8'" />
 92 |                 <RingLoader />
 93 |             </div>
 94 |             <div class="block">
 95 |                 <RippleLoader :color="'#54f1d2'" />
 96 |                 <RippleLoader :color="'#be97e8'" />
 97 |                 <RippleLoader />
 98 |             </div>
 99 |             <div class="block">
100 |                 <RollerLoader :color="'#54f1d2'" />
101 |                 <RollerLoader :color="'#be97e8'" />
102 |                 <RollerLoader />
103 |             </div>
104 |             <div class="block">
105 |                 <SpinnerLoader :color="'#54f1d2'" />
106 |                 <SpinnerLoader :color="'#be97e8'" />
107 |                 <SpinnerLoader />
108 |             </div>
109 |             <div class="block">
110 |                 <OrbitalsLoader :color="'#54f1d2'" />
111 |                 <OrbitalsLoader :color="'#be97e8'" />
112 |                 <OrbitalsLoader />
113 |             </div>
114 |             <div style="clear: both"></div>
115 |         </div>
116 |         <div id="app">
117 |             <h2 style="text-align: center;">Size Property</h2>
118 |             <div class="block">
119 |                 <CircleLoader :color="'#be97e8'" />
120 |                 <CircleLoader :color="'#be97e8'" :size="32" />
121 |                 <CircleLoader :color="'#be97e8'" :size="16" />
122 |             </div>
123 |             <div class="block">
124 |                 <DefaultLoader :color="'#be97e8'" />
125 |                 <DefaultLoader :color="'#be97e8'" :size="32" />
126 |                 <DefaultLoader :color="'#be97e8'" :size="16" />
127 |             </div>
128 |             <div class="block">
129 |                 <DualRingLoader :color="'#be97e8'" />
130 |                 <DualRingLoader :color="'#be97e8'" :size="32" />
131 |                 <DualRingLoader :color="'#be97e8'" :size="16" />
132 |             </div>
133 |             <div class="block">
134 |                 <FacebookLoader :color="'#be97e8'" />
135 |                 <FacebookLoader :color="'#be97e8'" :size="32" />
136 |                 <FacebookLoader :color="'#be97e8'" :size="16" />
137 |             </div>
138 |             <div class="block">
139 |                 <GridLoader :color="'#be97e8'" />
140 |                 <GridLoader :color="'#be97e8'" :size="32" />
141 |                 <GridLoader :color="'#be97e8'" :size="16" />
142 |             </div>
143 |             <div class="block">
144 |                 <HeartLoader :color="'#be97e8'" />
145 |                 <HeartLoader :color="'#be97e8'" :size="32" />
146 |                 <HeartLoader :color="'#be97e8'" :size="16" />
147 |             </div>
148 |             <div class="block">
149 |                 <HourglassLoader :color="'#be97e8'" />
150 |                 <HourglassLoader :color="'#be97e8'" :size="32" />
151 |                 <HourglassLoader :color="'#be97e8'" :size="16" />
152 |             </div>
153 |             <div class="block">
154 |                 <LineLoader :color="'#be97e8'" />
155 |                 <LineLoader :color="'#be97e8'" :size="32" />
156 |                 <LineLoader :color="'#be97e8'" :size="16" />
157 |             </div>
158 |             <div class="block">
159 |                 <RingLoader :color="'#be97e8'" />
160 |                 <RingLoader :color="'#be97e8'" :size="32" />
161 |                 <RingLoader :color="'#be97e8'" :size="16" />
162 |             </div>
163 |             <div class="block">
164 |                 <RippleLoader :color="'#be97e8'" />
165 |                 <RippleLoader :color="'#be97e8'" :size="32" />
166 |                 <RippleLoader :color="'#be97e8'" :size="16" />
167 |             </div>
168 |             <div class="block">
169 |                 <RollerLoader :color="'#be97e8'" />
170 |                 <RollerLoader :color="'#be97e8'" :size="32" />
171 |                 <RollerLoader :color="'#be97e8'" :size="16" />
172 |             </div>
173 |             <div class="block">
174 |                 <SpinnerLoader :color="'#be97e8'" />
175 |                 <SpinnerLoader :color="'#be97e8'" :size="32" />
176 |                 <SpinnerLoader :color="'#be97e8'" :size="16" />
177 |             </div>
178 |             <div class="block">
179 |                 <OrbitalsLoader :color="'#be97e8'" />
180 |                 <OrbitalsLoader :color="'#be97e8'" :size="32" />
181 |                 <OrbitalsLoader :color="'#be97e8'" :size="16" />
182 |             </div>
183 |             <div style="clear: both"></div>
184 |         </div>
185 |     </div>
186 | </template>
187 | 
188 | <script>
189 | import CircleLoader from './components/CircleLoader.vue'
190 | import DefaultLoader from './components/DefaultLoader.vue'
191 | import DualRingLoader from './components/DualRingLoader.vue'
192 | import EllipsisLoader from './components/EllipsisLoader.vue'
193 | import FacebookLoader from './components/FacebookLoader'
194 | import GridLoader from './components/GridLoader.vue'
195 | import HeartLoader from './components/HeartLoader.vue'
196 | import HourglassLoader from './components/HourglassLoader.vue'
197 | import LineLoader from './components/LineLoader.vue'
198 | import RingLoader from './components/RingLoader.vue'
199 | import RippleLoader from './components/RippleLoader.vue'
200 | import RollerLoader from './components/RollerLoader.vue'
201 | import SpinnerLoader from './components/SpinnerLoader.vue'
202 | import OrbitalsLoader from './components/OrbitalsLoader.vue'
203 | 
204 | export default {
205 |     name: 'app',
206 |     components: {
207 |         CircleLoader,
208 |         DefaultLoader,
209 |         DualRingLoader,
210 |         EllipsisLoader,
211 |         FacebookLoader,
212 |         GridLoader,
213 |         HeartLoader,
214 |         HourglassLoader,
215 |         LineLoader,
216 |         RingLoader,
217 |         RippleLoader,
218 |         RollerLoader,
219 |         SpinnerLoader,
220 |         OrbitalsLoader,
221 |     },
222 | }
223 | </script>
224 | 
225 | <style>
226 | #app {
227 |     text-align: center;
228 |     width: 800px;
229 |     margin: auto;
230 |     display: flex;
231 |     flex-wrap: wrap;
232 |     justify-content: space-between;
233 | }
234 | .normal-spinners {
235 |     display: flex;
236 |     justify-content: center;
237 |     display: grid;
238 |     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
239 |     grid-gap: 20px;
240 |     justify-items: center;
241 |     margin: 0 auto;
242 |     width: 100%;
243 |     max-width: 800px;
244 | }
245 | h1,
246 | h2 {
247 |     width: 100%;
248 |     text-align: center;
249 | }
250 | .block {
251 |     border: 1px solid #ccc;
252 |     border-radius: 3px;
253 |     width: 320px;
254 |     height: 84px;
255 |     margin: 10px;
256 |     padding: 10px;
257 | }
258 | .loader {
259 |     float: left;
260 | }
261 | </style>
262 | 


--------------------------------------------------------------------------------
/src/components/CircleLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-show="loading" class="lds-circle" v-bind:style="[spinnerStyle]"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import validateDuration from '../helpers/validateDuration.js'
 7 | 
 8 | export default {
 9 |     name: 'CircleLoader',
10 |     props: {
11 |         loading: {
12 |             type: Boolean,
13 |             default: true,
14 |         },
15 |         color: {
16 |             type: String,
17 |             default: '#7f58af',
18 |         },
19 |         size: {
20 |             type: Number,
21 |             default: 64,
22 |         },
23 |         duration: {
24 |             type: String,
25 |             default: '2.4s',
26 |             validator: validateDuration,
27 |         },
28 |     },
29 |     data() {
30 |         return {
31 |             spinnerStyle: {
32 |                 background: this.color,
33 |                 width: `${this.size}px`,
34 |                 height: `${this.size}px`,
35 |                 animationDuration: this.duration,
36 |             },
37 |         }
38 |     },
39 | }
40 | </script>
41 | 
42 | <style scoped>
43 | .lds-circle {
44 |     display: inline-block;
45 |     margin: 8px;
46 |     border-radius: 50%;
47 |     animation-name: lds-circle;
48 |     animation-timing-function: cubic-bezier(0, 0.2, 0.8, 1);
49 |     animation-iteration-count: infinite;
50 | }
51 | @keyframes lds-circle {
52 |     0%,
53 |     100% {
54 |         animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
55 |     }
56 |     0% {
57 |         transform: rotateY(0deg);
58 |     }
59 |     50% {
60 |         transform: rotateY(1800deg);
61 |         animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
62 |     }
63 |     100% {
64 |         transform: rotateY(3600deg);
65 |     }
66 | }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/components/DefaultLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-show="loading" class="lds-default" :style="{ width: `${size}px`, height: `${size}px` }">
  3 |         <div v-for="i in 12" :key="`lds-default-${i}`" v-bind:style="[spinnerStyle, divsStyles[i - 1]]" />
  4 |     </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import validateDuration from '../helpers/validateDuration.js'
  9 | import calcPropertyValue from '../helpers/calcPropertyValue.js'
 10 | 
 11 | export default {
 12 |     name: 'DefaultLoader',
 13 |     props: {
 14 |         loading: {
 15 |             type: Boolean,
 16 |             default: true,
 17 |         },
 18 |         size: {
 19 |             type: Number,
 20 |             default: 80,
 21 |         },
 22 |         color: {
 23 |             type: String,
 24 |             default: '#7f58af',
 25 |         },
 26 |         duration: {
 27 |             type: String,
 28 |             default: '1.2s',
 29 |             validator: validateDuration,
 30 |         },
 31 |     },
 32 |     data() {
 33 |         return {
 34 |             spinnerStyle: {
 35 |                 background: this.color,
 36 |                 animationDuration: this.duration,
 37 |             },
 38 |         }
 39 |     },
 40 |     computed: {
 41 |         divsStyles() {
 42 |             const divsStyles = []
 43 |             for (let i = 1; i <= 12; i++) {
 44 |                 divsStyles.push(calcPropertyValue('animationDelay', this.duration, 0.083 * (13 - i) - 1))
 45 |             }
 46 |             return divsStyles
 47 |         },
 48 |     },
 49 | }
 50 | </script>
 51 | 
 52 | <style scoped>
 53 | .lds-default {
 54 |     display: inline-block;
 55 |     position: relative;
 56 | }
 57 | .lds-default div {
 58 |     position: absolute;
 59 |     width: 7.5%;
 60 |     height: 7.5%;
 61 |     background: #fff;
 62 |     border-radius: 50%;
 63 |     animation-name: lds-default;
 64 |     animation-timing-function: linear;
 65 |     animation-iteration-count: infinite;
 66 | }
 67 | .lds-default div:nth-child(1) {
 68 |     animation-delay: 0s;
 69 |     top: 46.25%;
 70 |     left: 82.5%;
 71 | }
 72 | .lds-default div:nth-child(2) {
 73 |     animation-delay: -0.1s;
 74 |     top: 27.5%;
 75 |     left: 77.5%;
 76 | }
 77 | .lds-default div:nth-child(3) {
 78 |     animation-delay: -0.2s;
 79 |     top: 13.75%;
 80 |     left: 65%;
 81 | }
 82 | .lds-default div:nth-child(4) {
 83 |     animation-delay: -0.3s;
 84 |     top: 8.75%;
 85 |     left: 46.25%;
 86 | }
 87 | .lds-default div:nth-child(5) {
 88 |     animation-delay: -0.4s;
 89 |     top: 13.75%;
 90 |     left: 27.5%;
 91 | }
 92 | .lds-default div:nth-child(6) {
 93 |     animation-delay: -0.5s;
 94 |     top: 27.5%;
 95 |     left: 13.75%;
 96 | }
 97 | .lds-default div:nth-child(7) {
 98 |     animation-delay: -0.6s;
 99 |     top: 46.25%;
100 |     left: 8.75%;
101 | }
102 | .lds-default div:nth-child(8) {
103 |     animation-delay: -0.7s;
104 |     top: 65%;
105 |     left: 13.75%;
106 | }
107 | .lds-default div:nth-child(9) {
108 |     animation-delay: -0.8s;
109 |     top: 77.5%;
110 |     left: 27.5%;
111 | }
112 | .lds-default div:nth-child(10) {
113 |     animation-delay: -0.9s;
114 |     top: 82.5%;
115 |     left: 46.25%;
116 | }
117 | .lds-default div:nth-child(11) {
118 |     animation-delay: -1s;
119 |     top: 77.5%;
120 |     left: 65%;
121 | }
122 | .lds-default div:nth-child(12) {
123 |     animation-delay: -1.1s;
124 |     top: 65%;
125 |     left: 77.5%;
126 | }
127 | @keyframes lds-default {
128 |     0%,
129 |     20%,
130 |     80%,
131 |     100% {
132 |         transform: scale(1);
133 |     }
134 |     50% {
135 |         transform: scale(1.5);
136 |     }
137 | }
138 | </style>
139 | 


--------------------------------------------------------------------------------
/src/components/DualRingLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-show="loading" class="lds-dual-ring" :style="{ width: `${size}px`, height: `${size}px` }">
 3 |         <div class="lds-dual-ring-after" v-bind:style="[spinnerStyle]"></div>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import validateDuration from '../helpers/validateDuration.js'
 9 | 
10 | export default {
11 |     name: 'DualRingLoader',
12 |     props: {
13 |         loading: {
14 |             type: Boolean,
15 |             default: true,
16 |         },
17 |         size: {
18 |             type: Number,
19 |             default: 80,
20 |         },
21 |         color: {
22 |             type: String,
23 |             default: '#7f58af',
24 |         },
25 |         duration: {
26 |             type: String,
27 |             default: '1.2s',
28 |             validator: validateDuration,
29 |         },
30 |     },
31 |     data() {
32 |         return {
33 |             spinnerStyle: {
34 |                 borderWidth: `${this.size * 0.075}px`,
35 |                 borderColor: `${this.color} transparent`,
36 |                 animationDuration: this.duration,
37 |             },
38 |         }
39 |     },
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | .lds-dual-ring {
45 |     display: inline-block;
46 | }
47 | .lds-dual-ring-after {
48 |     content: ' ';
49 |     display: block;
50 | 
51 |     /* ratio: calc(64px / 80px) */
52 |     width: 80%;
53 |     height: 80%;
54 |     /* ratio: calc(8px / 80px) */
55 |     margin: 10%;
56 | 
57 |     border-radius: 50%;
58 |     border: 6px solid #000;
59 |     border-color: #000 transparent #000 transparent;
60 |     animation-name: lds-dual-ring;
61 |     animation-timing-function: linear;
62 |     animation-iteration-count: infinite;
63 | }
64 | @keyframes lds-dual-ring {
65 |     0% {
66 |         transform: rotate(0deg);
67 |     }
68 |     100% {
69 |         transform: rotate(360deg);
70 |     }
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/components/EllipsisLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-show="loading" class="lds-ellipsis">
 3 |         <div v-bind:style="[spinnerStyle]"></div>
 4 |         <div v-bind:style="[spinnerStyle]"></div>
 5 |         <div v-bind:style="[spinnerStyle]"></div>
 6 |         <div v-bind:style="[spinnerStyle]"></div>
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |     name: 'EllipsisLoader',
13 |     props: {
14 |         loading: {
15 |             type: Boolean,
16 |             default: true,
17 |         },
18 |         color: {
19 |             type: String,
20 |             default: '#7f58af',
21 |         },
22 |     },
23 |     data() {
24 |         return {
25 |             spinnerStyle: {
26 |                 background: this.color,
27 |             },
28 |         }
29 |     },
30 | }
31 | </script>
32 | 
33 | <style scoped>
34 | .lds-ellipsis {
35 |     display: inline-block;
36 |     position: relative;
37 |     width: 80px;
38 |     height: 80px;
39 | }
40 | .lds-ellipsis div {
41 |     position: absolute;
42 |     top: 33px;
43 |     width: 13px;
44 |     height: 13px;
45 |     border-radius: 50%;
46 |     background: #fff;
47 |     animation-timing-function: cubic-bezier(0, 1, 1, 0);
48 | }
49 | .lds-ellipsis div:nth-child(1) {
50 |     left: 8px;
51 |     animation: lds-ellipsis1 0.6s infinite;
52 | }
53 | .lds-ellipsis div:nth-child(2) {
54 |     left: 8px;
55 |     animation: lds-ellipsis2 0.6s infinite;
56 | }
57 | .lds-ellipsis div:nth-child(3) {
58 |     left: 32px;
59 |     animation: lds-ellipsis2 0.6s infinite;
60 | }
61 | .lds-ellipsis div:nth-child(4) {
62 |     left: 56px;
63 |     animation: lds-ellipsis3 0.6s infinite;
64 | }
65 | @keyframes lds-ellipsis1 {
66 |     0% {
67 |         transform: scale(0);
68 |     }
69 |     100% {
70 |         transform: scale(1);
71 |     }
72 | }
73 | @keyframes lds-ellipsis3 {
74 |     0% {
75 |         transform: scale(1);
76 |     }
77 |     100% {
78 |         transform: scale(0);
79 |     }
80 | }
81 | @keyframes lds-ellipsis2 {
82 |     0% {
83 |         transform: translate(0, 0);
84 |     }
85 |     100% {
86 |         transform: translate(24px, 0);
87 |     }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/components/FacebookLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-show="loading" class="lds-facebook" :style="{ width: `${size}px`, height: `${size}px` }">
 3 |         <div v-for="i in 3" :key="`lds-facebook-${i}`" v-bind:style="[spinnerStyle, divsStyles[i - 1]]" />
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import validateDuration from '../helpers/validateDuration.js'
 9 | import calcPropertyValue from '../helpers/calcPropertyValue.js'
10 | 
11 | export default {
12 |     name: 'FacebookLoader',
13 |     props: {
14 |         loading: {
15 |             type: Boolean,
16 |             default: true,
17 |         },
18 |         size: {
19 |             type: Number,
20 |             default: 80,
21 |         },
22 |         color: {
23 |             type: String,
24 |             default: '#7f58af',
25 |         },
26 |         duration: {
27 |             type: String,
28 |             default: '1.2s',
29 |             validator: validateDuration,
30 |         },
31 |     },
32 |     data() {
33 |         return {
34 |             spinnerStyle: {
35 |                 background: this.color,
36 |                 animationDuration: this.duration,
37 |             },
38 |         }
39 |     },
40 |     computed: {
41 |         divsStyles() {
42 |             const divsStyles = []
43 |             for (let i = 3; i > 0; i--) {
44 |                 divsStyles.push(calcPropertyValue('animationDelay', this.duration, -0.1 * i))
45 |             }
46 |             return divsStyles
47 |         },
48 |     },
49 | }
50 | </script>
51 | 
52 | <style scoped>
53 | .lds-facebook {
54 |     display: inline-flex;
55 |     align-items: center;
56 |     justify-content: center;
57 |     position: relative;
58 | }
59 | .lds-facebook div {
60 |     width: 20%;
61 |     background: #fff;
62 |     animation-name: lds-facebook;
63 |     animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
64 |     animation-iteration-count: infinite;
65 | }
66 | .lds-facebook div + div {
67 |     margin-left: 10%;
68 | }
69 | @keyframes lds-facebook {
70 |     0% {
71 |         height: 80%;
72 |     }
73 |     50%,
74 |     100% {
75 |         height: 40%;
76 |     }
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/components/GridLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-show="loading" class="lds-grid" :style="{ width: `${size}px`, height: `${size}px` }">
  3 |         <div v-bind:style="[spinnerStyle]"></div>
  4 |         <div v-bind:style="[spinnerStyle]"></div>
  5 |         <div v-bind:style="[spinnerStyle]"></div>
  6 |         <div v-bind:style="[spinnerStyle]"></div>
  7 |         <div v-bind:style="[spinnerStyle]"></div>
  8 |         <div v-bind:style="[spinnerStyle]"></div>
  9 |         <div v-bind:style="[spinnerStyle]"></div>
 10 |         <div v-bind:style="[spinnerStyle]"></div>
 11 |         <div v-bind:style="[spinnerStyle]"></div>
 12 |     </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | import validateDuration from '../helpers/validateDuration.js'
 17 | 
 18 | export default {
 19 |     name: 'GridLoader',
 20 |     props: {
 21 |         loading: {
 22 |             type: Boolean,
 23 |             default: true,
 24 |         },
 25 |         size: {
 26 |             type: Number,
 27 |             default: 80,
 28 |         },
 29 |         color: {
 30 |             type: String,
 31 |             default: '#7f58af',
 32 |         },
 33 |         duration: {
 34 |             type: String,
 35 |             default: '1.2s',
 36 |             validator: validateDuration,
 37 |         },
 38 |     },
 39 |     data() {
 40 |         return {
 41 |             spinnerStyle: {
 42 |                 background: this.color,
 43 |                 animationDuration: this.duration,
 44 |             },
 45 |         }
 46 |     },
 47 | }
 48 | </script>
 49 | 
 50 | <style scoped>
 51 | .lds-grid {
 52 |     display: inline-flex;
 53 |     flex-wrap: wrap;
 54 | }
 55 | .lds-grid div {
 56 |     width: 20%;
 57 |     height: 20%;
 58 | 
 59 |     margin-top: 10%;
 60 |     margin-left: 10%;
 61 | 
 62 |     border-radius: 50%;
 63 |     background: #fff;
 64 |     animation-name: lds-grid;
 65 |     animation-timing-function: linear;
 66 |     animation-iteration-count: infinite;
 67 | }
 68 | .lds-grid div:nth-child(1) {
 69 |     animation-delay: 0s;
 70 | }
 71 | .lds-grid div:nth-child(2) {
 72 |     animation-delay: -0.4s;
 73 | }
 74 | .lds-grid div:nth-child(3) {
 75 |     animation-delay: -0.8s;
 76 | }
 77 | .lds-grid div:nth-child(4) {
 78 |     animation-delay: -0.4s;
 79 | }
 80 | .lds-grid div:nth-child(5) {
 81 |     animation-delay: -0.8s;
 82 | }
 83 | .lds-grid div:nth-child(6) {
 84 |     animation-delay: -1.2s;
 85 | }
 86 | .lds-grid div:nth-child(7) {
 87 |     margin-bottom: 10%;
 88 |     animation-delay: -0.8s;
 89 | }
 90 | .lds-grid div:nth-child(8) {
 91 |     animation-delay: -1.2s;
 92 | }
 93 | .lds-grid div:nth-child(9) {
 94 |     animation-delay: -1.6s;
 95 | }
 96 | @keyframes lds-grid {
 97 |     0%,
 98 |     100% {
 99 |         opacity: 1;
100 |     }
101 |     50% {
102 |         opacity: 0.5;
103 |     }
104 | }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/components/HeartLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-show="loading" class="lds-heart" :style="{ width: `${size}px`, height: `${size}px` }">
  3 |         <div v-bind:style="[spinnerStyle]">
  4 |             <div class="div-before" v-bind:style="[spinnerStyle]"></div>
  5 |             <div class="div-after" v-bind:style="[spinnerStyle]"></div>
  6 |         </div>
  7 |     </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | import validateDuration from '../helpers/validateDuration.js'
 12 | 
 13 | export default {
 14 |     name: 'HeartLoader',
 15 |     props: {
 16 |         loading: {
 17 |             type: Boolean,
 18 |             default: true,
 19 |         },
 20 |         size: {
 21 |             type: Number,
 22 |             default: 80,
 23 |         },
 24 |         color: {
 25 |             type: String,
 26 |             default: '#7f58af',
 27 |         },
 28 |         duration: {
 29 |             type: String,
 30 |             default: '1.2s',
 31 |             validator: validateDuration,
 32 |         },
 33 |     },
 34 |     data() {
 35 |         return {
 36 |             spinnerStyle: {
 37 |                 background: this.color,
 38 |                 animationDuration: this.duration,
 39 |             },
 40 |         }
 41 |     },
 42 | }
 43 | </script>
 44 | 
 45 | <style scoped>
 46 | .lds-heart {
 47 |     display: inline-block;
 48 |     position: relative;
 49 | 
 50 |     transform: rotate(45deg);
 51 |     transform-origin: 50% 50%;
 52 | }
 53 | .lds-heart > div {
 54 |     top: 40%;
 55 |     left: 40%;
 56 |     position: absolute;
 57 |     width: 40%;
 58 |     height: 40%;
 59 |     background: #fff;
 60 |     animation-name: lds-heart;
 61 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 62 |     animation-iteration-count: infinite;
 63 | }
 64 | .lds-heart .div-after,
 65 | .lds-heart .div-before {
 66 |     content: ' ';
 67 |     position: absolute;
 68 |     display: block;
 69 |     width: 100%;
 70 |     height: 100%;
 71 |     background: #fff;
 72 | }
 73 | .lds-heart .div-before {
 74 |     left: -75%;
 75 |     border-radius: 50% 0 0 50%;
 76 | }
 77 | .lds-heart .div-after {
 78 |     top: -75%;
 79 |     border-radius: 50% 50% 0 0;
 80 | }
 81 | @keyframes lds-heart {
 82 |     0% {
 83 |         transform: scale(0.95);
 84 |     }
 85 |     5% {
 86 |         transform: scale(1.1);
 87 |     }
 88 |     39% {
 89 |         transform: scale(0.85);
 90 |     }
 91 |     45% {
 92 |         transform: scale(1);
 93 |     }
 94 |     60% {
 95 |         transform: scale(0.95);
 96 |     }
 97 |     100% {
 98 |         transform: scale(0.9);
 99 |     }
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/components/HourglassLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-show="loading" class="lds-hourglass" :style="{ width: `${size}px`, height: `${size}px` }">
 3 |         <div class="lds-hourglass-after" v-bind:style="[spinnerStyle]"></div>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import validateDuration from '../helpers/validateDuration.js'
 9 | 
10 | export default {
11 |     name: 'HourglassLoader',
12 |     props: {
13 |         loading: {
14 |             type: Boolean,
15 |             default: true,
16 |         },
17 |         size: {
18 |             type: Number,
19 |             default: 80,
20 |         },
21 |         color: {
22 |             type: String,
23 |             default: '#7f58af',
24 |         },
25 |         duration: {
26 |             type: String,
27 |             default: '1.2s',
28 |             validator: validateDuration,
29 |         },
30 |     },
31 |     data() {
32 |         return {
33 |             spinnerStyle: {
34 |                 borderWidth: `${this.size * 0.4}px`,
35 |                 background: this.color,
36 |                 animationDuration: this.duration,
37 |             },
38 |         }
39 |     },
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | .lds-hourglass {
45 |     display: inline-block;
46 |     position: relative;
47 | }
48 | .lds-hourglass-after {
49 |     content: ' ';
50 |     display: block;
51 |     border-radius: 50%;
52 |     width: 0;
53 |     height: 0;
54 |     margin: 10%;
55 |     box-sizing: border-box;
56 |     border: 32px solid #fff;
57 |     border-color: #fff transparent #fff transparent;
58 |     animation-name: lds-hourglass;
59 |     animation-iteration-count: infinite;
60 | }
61 | @keyframes lds-hourglass {
62 |     0% {
63 |         transform: rotate(0);
64 |         animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
65 |     }
66 |     50% {
67 |         transform: rotate(900deg);
68 |         animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
69 |     }
70 |     100% {
71 |         transform: rotate(1800deg);
72 |     }
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/components/LineLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-show="loading" class="lds-line" :style="{ width: `${size}px`, height: `${size}px` }">
 3 |         <div class="lds-line-before" v-bind:style="[spinnerStyle]"></div>
 4 |         <div class="lds-line-after" v-bind:style="[spinnerStyle]"></div>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import validateDuration from '../helpers/validateDuration.js'
10 | 
11 | export default {
12 |     name: 'LineLoader',
13 |     props: {
14 |         loading: {
15 |             type: Boolean,
16 |             default: true,
17 |         },
18 |         size: {
19 |             type: Number,
20 |             default: 80,
21 |         },
22 |         color: {
23 |             type: String,
24 |             default: '#7f58af',
25 |         },
26 |         duration: {
27 |             type: String,
28 |             default: '1.2s',
29 |             validator: validateDuration,
30 |         },
31 |     },
32 |     data() {
33 |         return {
34 |             spinnerStyle: {
35 |                 background: this.color,
36 |                 animationDuration: this.duration,
37 |             },
38 |         }
39 |     },
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | .lds-line {
45 |     display: inline-block;
46 |     position: relative;
47 |     overflow: hidden;
48 | }
49 | 
50 | .lds-line-after,
51 | .lds-line-before {
52 |     content: ' ';
53 |     display: block;
54 |     height: 10%;
55 |     margin: 0 10%;
56 |     position: absolute;
57 |     top: 50%;
58 |     transform: translateY(-50%);
59 | }
60 | 
61 | .lds-line-after {
62 |     width: 0;
63 |     animation-name: lds-line;
64 |     animation-iteration-count: infinite;
65 | }
66 | 
67 | .lds-line-before {
68 |     width: 100%;
69 |     opacity: 0.5;
70 | }
71 | 
72 | @keyframes lds-line {
73 |     0% {
74 |         width: 0px;
75 |         transform: translate(0%, -50%);
76 |     }
77 | 
78 |     50% {
79 |         width: 100%;
80 |         transform: translate(0%, -50%);
81 |     }
82 | 
83 |     100% {
84 |         transform: translate(100%, -50%);
85 |         width: 100%;
86 |     }
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/OrbitalsLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-show="loading" class="lds-orbitals" :style="{ width: `${size}px`, height: `${size}px` }">
  3 |         <div class="center" :style="[backgroundSpinnerStyle]"></div>
  4 |         <div class="inner-spin" :style="[innerSpinStyle]">
  5 |             <div class="inner-arc inner-arc_start-a" :style="[borderSpinnerStyle, arc(0)]"></div>
  6 |             <div class="inner-arc inner-arc_end-a" :style="[borderSpinnerStyle, arc(0)]"></div>
  7 |             <div class="inner-arc inner-arc_start-b" :style="[borderSpinnerStyle, arc(0)]"></div>
  8 |             <div class="inner-arc inner-arc_end-b" :style="[borderSpinnerStyle, arc(0)]"></div>
  9 |             <div class="inner-moon-a" :style="[backgroundSpinnerStyle, moon(0, 0)]"></div>
 10 |             <div class="inner-moon-b" :style="[backgroundSpinnerStyle, moon(0, 1)]"></div>
 11 |         </div>
 12 |         <div class="outer-spin" :style="[outerSpinStyle]">
 13 |             <div class="outer-arc outer-arc_start-a" :style="[borderSpinnerStyle, arc(1)]"></div>
 14 |             <div class="outer-arc outer-arc_end-a" :style="[borderSpinnerStyle, arc(1)]"></div>
 15 |             <div class="outer-arc outer-arc_start-b" :style="[borderSpinnerStyle, arc(1)]"></div>
 16 |             <div class="outer-arc outer-arc_end-b" :style="[borderSpinnerStyle, arc(1)]"></div>
 17 |             <div class="outer-moon-a" :style="[backgroundSpinnerStyle, moon(1, 0)]"></div>
 18 |             <div class="outer-moon-b" :style="[backgroundSpinnerStyle, moon(1, 1)]"></div>
 19 |         </div>
 20 |     </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import validateDuration from '../helpers/validateDuration.js'
 25 | import calcPropertyValue from '../helpers/calcPropertyValue.js'
 26 | 
 27 | export default {
 28 |     name: 'OrbitalsLoader',
 29 |     props: {
 30 |         loading: {
 31 |             type: Boolean,
 32 |             default: true,
 33 |         },
 34 |         size: {
 35 |             type: Number,
 36 |             default: 80,
 37 |         },
 38 |         color: {
 39 |             type: String,
 40 |             default: '#7f58af',
 41 |         },
 42 |         duration: {
 43 |             type: String,
 44 |             default: '4s',
 45 |             validator: validateDuration,
 46 |         },
 47 |     },
 48 |     data() {
 49 |         return {
 50 |             backgroundSpinnerStyle: {
 51 |                 background: this.color,
 52 |             },
 53 |             borderSpinnerStyle: {
 54 |                 borderColor: this.color,
 55 |             },
 56 |             outerSpinStyle: {
 57 |                 animationDuration: this.duration,
 58 |             },
 59 |         }
 60 |     },
 61 |     computed: {
 62 |         innerSpinStyle() {
 63 |             return calcPropertyValue('animationDuration', this.duration, 0.75)
 64 |         },
 65 |     },
 66 |     methods: {
 67 |         arc(pos) {
 68 |             // [0] -> inner; [1] -> outer
 69 |             const sizes = [0.3875, 0.75].map(i => i * this.size)
 70 |             const size = sizes[pos]
 71 | 
 72 |             return {
 73 |                 width: `${size}px`,
 74 |                 height: `${size}px`,
 75 |                 borderWidth: `${this.size * 0.0375}px`,
 76 |             }
 77 |         },
 78 |         moon(pos, variant) {
 79 |             // [0] -> inner; [1] -> outer
 80 |             const sizes = [[0.1, 0.2125], [0.1125, 0.4]]
 81 |             const [size, transform] = sizes[pos].map(i => i * this.size)
 82 |             const transformCalc = variant == 0 ? '+' : '-'
 83 | 
 84 |             return {
 85 |                 width: `${size}px`,
 86 |                 height: `${size}px`,
 87 |                 transform: `translate(
 88 |                                 calc(-50% ${transformCalc} ${transform}px), 
 89 |                                 -50%)`,
 90 |             }
 91 |         },
 92 |     },
 93 | }
 94 | </script>
 95 | 
 96 | <style scoped>
 97 | .lds-orbitals {
 98 |     display: inline-block;
 99 |     position: relative;
100 | }
101 | .lds-orbitals * {
102 |     --center: translate(-50%, -50%);
103 | }
104 | .lds-orbitals .center {
105 |     position: absolute;
106 |     width: 18.75%;
107 |     height: 18.75%;
108 |     border-radius: 50%;
109 |     top: 50%;
110 |     left: 50%;
111 |     transform: var(--center);
112 | }
113 | .lds-orbitals .outer-spin,
114 | .lds-orbitals .inner-spin {
115 |     position: absolute;
116 |     top: 50%;
117 |     left: 50%;
118 | }
119 | .lds-orbitals .inner-arc {
120 |     position: absolute;
121 |     border-radius: 50%;
122 |     border: 3px solid;
123 | }
124 | .lds-orbitals .inner-arc_start-a {
125 |     border-color: transparent transparent transparent;
126 |     transform: var(--center) rotate(45deg);
127 | }
128 | .lds-orbitals .inner-arc_end-a {
129 |     border-color: transparent transparent transparent;
130 |     transform: var(--center) rotate(25deg);
131 | }
132 | .lds-orbitals .inner-moon-a {
133 |     position: absolute;
134 |     top: 50%;
135 |     left: 50%;
136 |     border-radius: 50%;
137 | }
138 | .lds-orbitals .inner-moon-b {
139 |     position: absolute;
140 |     top: 50%;
141 |     left: 50%;
142 |     border-radius: 50%;
143 | }
144 | .lds-orbitals .inner-arc_start-b {
145 |     border-color: transparent transparent transparent;
146 |     transform: var(--center) rotate(65deg) scale(-1, -1);
147 | }
148 | .lds-orbitals .inner-arc_end-b {
149 |     border-color: transparent transparent transparent;
150 |     transform: var(--center) rotate(45deg) scale(-1, -1);
151 | }
152 | .lds-orbitals .outer-arc {
153 |     position: absolute;
154 |     border-radius: 50%;
155 |     border: 3px solid;
156 | }
157 | .lds-orbitals .outer-arc_start-a {
158 |     border-color: transparent transparent transparent;
159 |     transform: var(--center) rotate(65deg);
160 | }
161 | .lds-orbitals .outer-arc_end-a {
162 |     border-color: transparent transparent transparent;
163 |     transform: var(--center) rotate(45deg);
164 | }
165 | .lds-orbitals .outer-moon-a {
166 |     position: absolute;
167 |     top: 50%;
168 |     left: 50%;
169 |     border-radius: 50%;
170 | }
171 | .lds-orbitals .outer-moon-b {
172 |     position: absolute;
173 |     top: 50%;
174 |     left: 50%;
175 |     border-radius: 50%;
176 | }
177 | .lds-orbitals .outer-arc_start-b {
178 |     border-color: transparent transparent transparent;
179 |     transform: var(--center) rotate(65deg) scale(-1, -1);
180 | }
181 | .lds-orbitals .outer-arc_end-b {
182 |     border-color: transparent transparent transparent;
183 |     transform: var(--center) rotate(45deg) scale(-1, -1);
184 | }
185 | .lds-orbitals .outer-spin {
186 |     animation-name: spin;
187 |     animation-timing-function: linear;
188 |     animation-iteration-count: infinite;
189 | }
190 | .lds-orbitals .inner-spin {
191 |     animation-name: spin;
192 |     animation-timing-function: linear;
193 |     animation-iteration-count: infinite;
194 | }
195 | @keyframes spin {
196 |     100% {
197 |         transform: rotate(360deg);
198 |     }
199 | }
200 | </style>
201 | 


--------------------------------------------------------------------------------
/src/components/RingLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-show="loading" class="lds-ring" :style="{ width: `${size}px`, height: `${size}px` }">
 3 |         <div v-bind:style="[spinnerStyle, animDiv1]"></div>
 4 |         <div v-bind:style="[spinnerStyle, animDiv2]"></div>
 5 |         <div v-bind:style="[spinnerStyle, animDiv3]"></div>
 6 |         <div v-bind:style="[spinnerStyle]"></div>
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | import validateDuration from '../helpers/validateDuration.js'
12 | import calcPropertyValue from '../helpers/calcPropertyValue.js'
13 | 
14 | export default {
15 |     name: 'RingLoader',
16 |     props: {
17 |         loading: {
18 |             type: Boolean,
19 |             default: true,
20 |         },
21 |         size: {
22 |             type: Number,
23 |             default: 80,
24 |         },
25 |         color: {
26 |             type: String,
27 |             default: '#7f58af',
28 |         },
29 |         duration: {
30 |             type: String,
31 |             default: '1.2s',
32 |             validator: validateDuration,
33 |         },
34 |     },
35 |     data() {
36 |         return {
37 |             spinnerStyle: {
38 |                 borderWidth: `${this.size * 0.1}px`,
39 |                 borderColor: `${this.color} transparent transparent transparent`,
40 |                 animationDuration: this.duration,
41 |             },
42 |         }
43 |     },
44 |     computed: {
45 |         animDiv1() {
46 |             return calcPropertyValue('animationDelay', this.duration, -0.375)
47 |         },
48 |         animDiv2() {
49 |             return calcPropertyValue('animationDelay', this.duration, -0.25)
50 |         },
51 |         animDiv3() {
52 |             return calcPropertyValue('animationDelay', this.duration, -0.125)
53 |         },
54 |     },
55 | }
56 | </script>
57 | 
58 | <style scoped>
59 | .lds-ring {
60 |     display: inline-block;
61 |     position: relative;
62 | }
63 | .lds-ring div {
64 |     box-sizing: border-box;
65 |     display: block;
66 |     position: absolute;
67 | 
68 |     /* ratio: calc(64px / 80px) */
69 |     width: 80%;
70 |     height: 80%;
71 | 
72 |     /* ratio: calc(8px / 80px) */
73 |     margin: 10%;
74 |     border: 8px solid #fff;
75 |     border-radius: 50%;
76 |     border-color: #fff transparent transparent transparent;
77 |     animation-name: lds-ring;
78 |     animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
79 |     animation-iteration-count: infinite;
80 | }
81 | @keyframes lds-ring {
82 |     0% {
83 |         transform: rotate(0deg);
84 |     }
85 |     100% {
86 |         transform: rotate(360deg);
87 |     }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/components/RippleLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-show="loading" class="lds-ripple" :style="{ width: `${size}px`, height: `${size}px` }">
 3 |         <div v-bind:style="[spinnerStyle]"></div>
 4 |         <div v-bind:style="[spinnerStyle, animDiv2]"></div>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import validateDuration from '../helpers/validateDuration.js'
10 | import calcPropertyValue from '../helpers/calcPropertyValue.js'
11 | 
12 | export default {
13 |     name: 'RippleLoader',
14 |     props: {
15 |         loading: {
16 |             type: Boolean,
17 |             default: true,
18 |         },
19 |         size: {
20 |             type: Number,
21 |             default: 80,
22 |         },
23 |         color: {
24 |             type: String,
25 |             default: '#7f58af',
26 |         },
27 |         duration: {
28 |             type: String,
29 |             default: '1s',
30 |             validator: validateDuration,
31 |         },
32 |     },
33 |     data() {
34 |         return {
35 |             spinnerStyle: {
36 |                 borderWidth: `${this.size * 0.05}px`,
37 |                 borderColor: this.color,
38 |                 animationDuration: this.duration,
39 |             },
40 |         }
41 |     },
42 |     computed: {
43 |         animDiv2() {
44 |             return calcPropertyValue('animationDelay', this.duration, -0.5)
45 |         },
46 |     },
47 | }
48 | </script>
49 | 
50 | <style scoped>
51 | .lds-ripple {
52 |     display: inline-block;
53 |     position: relative;
54 | }
55 | .lds-ripple div {
56 |     position: absolute;
57 |     border: 4px solid #fff;
58 |     opacity: 1;
59 |     border-radius: 50%;
60 |     animation-name: lds-ripple;
61 |     animation-timing-function: cubic-bezier(0, 0.2, 0.8, 1);
62 |     animation-iteration-count: infinite;
63 | }
64 | @keyframes lds-ripple {
65 |     0% {
66 |         top: 45%;
67 |         left: 45%;
68 |         width: 0;
69 |         height: 0;
70 |         opacity: 1;
71 |     }
72 |     100% {
73 |         top: 0px;
74 |         left: 0px;
75 |         width: 90%;
76 |         height: 90%;
77 |         opacity: 0;
78 |     }
79 | }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/components/RollerLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-show="loading" class="lds-roller" :style="{ width: `${size}px`, height: `${size}px` }">
  3 |         <div
  4 |             v-for="(_, i) in Array(8)"
  5 |             :key="`lds-roller-${i}`"
  6 |             :style="[mainAnimation, { transformOrigin: `${size * 0.5}px ${size * 0.5}px` }, animDivs[i]]"
  7 |         >
  8 |             <div class="div-after" v-bind:style="[spinnerStyle, spinnerStylePosition(i)]"></div>
  9 |         </div>
 10 |     </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | import validateDuration from '../helpers/validateDuration.js'
 15 | import calcPropertyValue from '../helpers/calcPropertyValue.js'
 16 | 
 17 | export default {
 18 |     name: 'RollerLoader',
 19 |     props: {
 20 |         loading: {
 21 |             type: Boolean,
 22 |             default: true,
 23 |         },
 24 |         size: {
 25 |             type: Number,
 26 |             default: 80,
 27 |         },
 28 |         color: {
 29 |             type: String,
 30 |             default: '#7f58af',
 31 |         },
 32 |         duration: {
 33 |             type: String,
 34 |             default: '1.2s',
 35 |             validator: validateDuration,
 36 |         },
 37 |     },
 38 |     data() {
 39 |         return {
 40 |             spinnerStyle: {
 41 |                 width: `${this.size * 0.0875}px`,
 42 |                 height: `${this.size * 0.0875}px`,
 43 |                 margin: `-${this.size * 0.05}px 0 0 -${this.size * 0.05}px`,
 44 |                 background: this.color,
 45 |             },
 46 |         }
 47 |     },
 48 |     methods: {
 49 |         spinnerStylePosition(nthChild) {
 50 |             const topLeftTable = [
 51 |                 [0.7875, 0.7875],
 52 |                 [0.7875, 0.7875],
 53 |                 [0.85, 0.7],
 54 |                 [0.8875, 0.6],
 55 |                 [0.9, 0.5],
 56 |                 [0.8875, 0.4],
 57 |                 [0.85, 0.3],
 58 |                 [0.7875, 0.2125],
 59 |                 [0.7, 0.15],
 60 |             ]
 61 | 
 62 |             const [top, left] = topLeftTable[nthChild].map(i => i * this.size)
 63 | 
 64 |             return { top: `${top}px`, left: `${left}px` }
 65 |         },
 66 |     },
 67 |     computed: {
 68 |         mainAnimation() {
 69 |             return { animationDuration: this.duration }
 70 |         },
 71 |         animDivs() {
 72 |             const divsStyles = []
 73 |             for (let i = 1; i <= 8; i++) {
 74 |                 divsStyles.push(calcPropertyValue('animationDelay', this.duration, -0.03 * i))
 75 |             }
 76 |             return divsStyles
 77 |         },
 78 |     },
 79 | }
 80 | </script>
 81 | 
 82 | <style scoped>
 83 | .lds-roller {
 84 |     display: inline-block;
 85 |     position: relative;
 86 | }
 87 | .lds-roller > div {
 88 |     animation-name: lds-roller;
 89 |     animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
 90 |     animation-iteration-count: infinite;
 91 | }
 92 | .lds-roller div .div-after {
 93 |     content: ' ';
 94 |     display: block;
 95 |     position: absolute;
 96 |     border-radius: 50%;
 97 |     background: #fff;
 98 | }
 99 | @keyframes lds-roller {
100 |     0% {
101 |         transform: rotate(0deg);
102 |     }
103 |     100% {
104 |         transform: rotate(360deg);
105 |     }
106 | }
107 | </style>
108 | 


--------------------------------------------------------------------------------
/src/components/SpinnerLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-show="loading" class="lds-spinner" :style="{ width: `${size}px`, height: `${size}px` }">
  3 |         <div
  4 |             v-for="i in 12"
  5 |             :key="`lds-spinner-${i}`"
  6 |             :style="[spinnerStyleDuration, { transformOrigin: `${size * 0.5}px ${size * 0.5}px` }, divsStyles[i - 1]]"
  7 |         >
  8 |             <div class="div-after" v-bind:style="[spinnerStyle]"></div>
  9 |         </div>
 10 |     </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | import validateDuration from '../helpers/validateDuration.js'
 15 | import calcPropertyValue from '../helpers/calcPropertyValue.js'
 16 | 
 17 | export default {
 18 |     name: 'SpinnerLoader',
 19 |     props: {
 20 |         loading: {
 21 |             type: Boolean,
 22 |             default: true,
 23 |         },
 24 |         size: {
 25 |             type: Number,
 26 |             default: 80,
 27 |         },
 28 |         color: {
 29 |             type: String,
 30 |             default: '#7f58af',
 31 |         },
 32 |         duration: {
 33 |             type: String,
 34 |             default: '1.2s',
 35 |             validator: validateDuration,
 36 |         },
 37 |     },
 38 |     data() {
 39 |         return {
 40 |             spinnerStyleDuration: {
 41 |                 animationDuration: this.duration,
 42 |             },
 43 |             spinnerStyle: {
 44 |                 top: `${this.size * 0.0375}px`,
 45 |                 left: `${this.size * 0.4625}px`,
 46 |                 width: `${this.size * 0.075}px`,
 47 |                 height: `${this.size * 0.225}px`,
 48 |                 background: this.color,
 49 |             },
 50 |         }
 51 |     },
 52 |     computed: {
 53 |         divsStyles() {
 54 |             const divsStyles = []
 55 |             for (let i = 1; i <= 12; i++) {
 56 |                 divsStyles.push(calcPropertyValue('animationDelay', this.duration, 0.083 * i - 1))
 57 |             }
 58 |             return divsStyles
 59 |         },
 60 |     },
 61 | }
 62 | </script>
 63 | 
 64 | <style scoped>
 65 | .lds-spinner {
 66 |     display: inline-block;
 67 |     position: relative;
 68 | }
 69 | .lds-spinner div {
 70 |     animation-name: lds-spinner;
 71 |     animation-timing-function: linear;
 72 |     animation-iteration-count: infinite;
 73 | }
 74 | .lds-spinner div .div-after {
 75 |     content: ' ';
 76 |     display: block;
 77 |     position: absolute;
 78 | 
 79 |     border-radius: 20%;
 80 |     background: #fff;
 81 | }
 82 | .lds-spinner div:nth-child(1) {
 83 |     transform: rotate(0deg);
 84 | }
 85 | .lds-spinner div:nth-child(2) {
 86 |     transform: rotate(30deg);
 87 | }
 88 | .lds-spinner div:nth-child(3) {
 89 |     transform: rotate(60deg);
 90 | }
 91 | .lds-spinner div:nth-child(4) {
 92 |     transform: rotate(90deg);
 93 | }
 94 | .lds-spinner div:nth-child(5) {
 95 |     transform: rotate(120deg);
 96 | }
 97 | .lds-spinner div:nth-child(6) {
 98 |     transform: rotate(150deg);
 99 | }
100 | .lds-spinner div:nth-child(7) {
101 |     transform: rotate(180deg);
102 | }
103 | .lds-spinner div:nth-child(8) {
104 |     transform: rotate(210deg);
105 | }
106 | .lds-spinner div:nth-child(9) {
107 |     transform: rotate(240deg);
108 | }
109 | .lds-spinner div:nth-child(10) {
110 |     transform: rotate(270deg);
111 | }
112 | .lds-spinner div:nth-child(11) {
113 |     transform: rotate(300deg);
114 | }
115 | .lds-spinner div:nth-child(12) {
116 |     transform: rotate(330deg);
117 | }
118 | @keyframes lds-spinner {
119 |     0% {
120 |         opacity: 1;
121 |     }
122 |     100% {
123 |         opacity: 0;
124 |     }
125 | }
126 | </style>
127 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | import CircleLoader from './CircleLoader.vue'
 2 | import DefaultLoader from './DefaultLoader.vue'
 3 | import DualRingLoader from './DualRingLoader.vue'
 4 | import EllipsisLoader from './EllipsisLoader.vue'
 5 | import FacebookLoader from './FacebookLoader.vue'
 6 | import GridLoader from './GridLoader.vue'
 7 | import HeartLoader from './HeartLoader.vue'
 8 | import HourglassLoader from './HourglassLoader.vue'
 9 | import LineLoader from './LineLoader.vue'
10 | import RingLoader from './RingLoader.vue'
11 | import RippleLoader from './RippleLoader.vue'
12 | import RollerLoader from './RollerLoader.vue'
13 | import SpinnerLoader from './SpinnerLoader.vue'
14 | import OrbitalsLoader from './OrbitalsLoader.vue'
15 | 
16 | export {
17 |     CircleLoader,
18 |     DefaultLoader,
19 |     DualRingLoader,
20 |     EllipsisLoader,
21 |     FacebookLoader,
22 |     GridLoader,
23 |     HeartLoader,
24 |     HourglassLoader,
25 |     LineLoader,
26 |     RingLoader,
27 |     RippleLoader,
28 |     RollerLoader,
29 |     SpinnerLoader,
30 |     OrbitalsLoader,
31 | }
32 | 


--------------------------------------------------------------------------------
/src/helpers/calcPropertyValue.js:
--------------------------------------------------------------------------------
 1 | export default function(propName, originalValue, modificator) {
 2 |     const computedStyle = {}
 3 |     const timeQuantityOuter = originalValue.match(/^\d*\.?\d+/)[0]
 4 |     const timeUnit = originalValue.match(/s|(ms)$/)[0]
 5 |     const timeQuantityInner = Math.round(timeQuantityOuter * 1000 * modificator) / 1000
 6 | 
 7 |     computedStyle[propName] = timeQuantityInner + timeUnit
 8 |     return computedStyle
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/helpers/validateDuration.js:
--------------------------------------------------------------------------------
1 | export default function(duration) {
2 |     const re = new RegExp(/^\d*\.?\d+(s|ms)$/)
3 |     return re.test(duration)
4 | }
5 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export * from './components'
2 | export * from './install'
3 | 


--------------------------------------------------------------------------------
/src/install.js:
--------------------------------------------------------------------------------
 1 | import * as components from './components'
 2 | 
 3 | const install = (Vue, options = {}) => {
 4 |     for (let key in components) {
 5 |         let _key = options.prefix ? options.prefix + key : key
 6 |         Vue.component(_key, components[key])
 7 |     }
 8 | }
 9 | 
10 | // auto install
11 | if (typeof window !== 'undefined' && window.Vue) {
12 |     install(window.Vue)
13 | }
14 | 
15 | export { install }
16 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |     render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     css: { extract: false }
3 | }


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