├── .eslintignore
├── .gitignore
├── .editorconfig
├── .postcssrc.js
├── .babelrc
├── .eslintrc.js
├── README.md
├── src
    ├── components
    │   ├── ScaleOut.vue
    │   ├── CubeShadow.vue
    │   ├── Circle2.vue
    │   ├── RotateSquare.vue
    │   ├── Texture.vue
    │   ├── Circle3.vue
    │   ├── Circle11.vue
    │   ├── Pencil.vue
    │   ├── Wave.vue
    │   ├── Circle5.vue
    │   ├── Circle4.vue
    │   ├── Jumper.vue
    │   ├── DoubleBounce.vue
    │   ├── RotateSquare4.vue
    │   ├── Circle.vue
    │   ├── Diamond.vue
    │   ├── Stretch.vue
    │   ├── Jawn.vue
    │   ├── Circle10.vue
    │   ├── TwoCube.vue
    │   ├── RotateSquare2.vue
    │   ├── RotateSquare6.vue
    │   ├── Circle7.vue
    │   ├── SpinLine.vue
    │   ├── PingPong.vue
    │   ├── Circle8.vue
    │   ├── Mikepad.vue
    │   ├── Gauge.vue
    │   ├── SquareGrid.vue
    │   ├── HourGlass.vue
    │   ├── Circle9.vue
    │   ├── ThreeDots.vue
    │   ├── Origami.vue
    │   ├── LetterCube.vue
    │   ├── RotateSquare3.vue
    │   ├── Plane.vue
    │   ├── RotateSquare5.vue
    │   ├── Google.vue
    │   ├── Hexagon.vue
    │   ├── Socket.vue
    │   └── Circle6.vue
    └── index.js
├── package.json
└── dist
    └── vue-loading-spinner.js


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log
 4 | /yarn.lock
 5 | /src/App.vue
 6 | /src/main.js
 7 | /dist/static
 8 | /dist/index.html
 9 | /config
10 | 
11 | \.idea/
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserslist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // http://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parser: 'babel-eslint',
 6 |   parserOptions: {
 7 |     sourceType: 'module'
 8 |   },
 9 |   env: {
10 |     browser: true,
11 |   },
12 |   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
13 |   extends: 'standard',
14 |   // required to lint *.vue files
15 |   plugins: [
16 |     'html'
17 |   ],
18 |   // add your custom rules here
19 |   'rules': {
20 |     // allow paren-less arrow functions
21 |     'arrow-parens': 0,
22 |     // allow async-await
23 |     'generator-star-spacing': 0,
24 |     // allow debugger during development
25 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-loading-spinner
 2 | 
 3 | > Just another collection of loading spinners with Vue.js
 4 | 
 5 | ## Installation
 6 | 
 7 | ``` bash
 8 | npm install --save vue-loading-spinner
 9 | ```
10 | or
11 | 
12 | ``` bash
13 | yarn add vue-loading-spinner
14 | ```
15 | 
16 | ## Usage
17 | 
18 | ``` vue
19 | <template>
20 |   <div id="app">
21 |     <rotate-square2></rotate-square2>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 |   import {RotateSquare2} from 'vue-loading-spinner'
27 |   export default {
28 |     components: {
29 |       RotateSquare2
30 |     }
31 |   }
32 | </script>
33 | ```
34 | 
35 | ## Demo
36 | 
37 | List of all spinner: [Demo](https://nguyenvanduocit.github.io/vue-loading-spinner/)
38 | 
39 | ## Development Setup
40 | 
41 | Checkout branch `develop`
42 | 


--------------------------------------------------------------------------------
/src/components/ScaleOut.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-bind:style="styles" class="spinner spinner--scale-out"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     size: {
 9 |       default: '40px'
10 |     },
11 |     background: {
12 |       default: '#41b883'
13 |     },
14 |     duration: {
15 |       default: '1.0s'
16 |     }
17 |   },
18 |   computed: {
19 |     styles () {
20 |       return {
21 |         width: this.size,
22 |         height: this.size,
23 |         backgroundColor: this.background,
24 |         animationDuration: this.duration
25 |       }
26 |     }
27 |   }
28 | }
29 | </script>
30 | 
31 | <style lang="scss" scoped>
32 |   .spinner {
33 |     border-radius: 100%;
34 |     display: inline-block;
35 |     animation: sk-scaleout 1s ease-in-out infinite;
36 |   }
37 |   @keyframes sk-scaleout {
38 |     0% {
39 |       transform: scale(0);
40 |     } 100% {
41 |         transform: scale(1.0);
42 |         opacity: 0;
43 |       }
44 |   }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/components/CubeShadow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-bind:style="styles" class="spinner spinner--cube-shadow"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     size: {
 9 |       default: '40px'
10 |     },
11 |     background: {
12 |       default: '#41b883'
13 |     },
14 |     duration: {
15 |       default: '1.8s'
16 |     }
17 |   },
18 |   computed: {
19 |     styles () {
20 |       return {
21 |         width: this.size,
22 |         height: this.size,
23 |         backgroundColor: this.background,
24 |         animationDuration: this.duration
25 |       }
26 |     }
27 |   }
28 | }
29 | </script>
30 | 
31 | <style lang="scss" scoped>
32 |   .spinner{
33 |     animation: cube-shadow-spinner 1.8s cubic-bezier(0.75, 0, 0.5, 1) infinite;
34 |   }
35 |   @keyframes cube-shadow-spinner {
36 |     50% {
37 |       border-radius: 50%;
38 |       transform: scale(0.5) rotate(360deg);
39 |     }
40 |     100% {
41 |       transform: scale(1) rotate(720deg);
42 |     }
43 |   }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/components/Circle2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--circle-2"></div>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: {
 7 |     size: {
 8 |       default: '40px'
 9 |     },
10 |     background: {
11 |       default: '#41b883'
12 |     },
13 |     color: {
14 |       default: '#35495e'
15 |     },
16 |     stroke: {
17 |       default: '5px'
18 |     }
19 |   },
20 |   computed: {
21 |     styles () {
22 |       return {
23 |         width: this.size,
24 |         height: this.size,
25 |         border: this.stroke + ' solid ' + this.background,
26 |         borderTopColor: this.color
27 |       }
28 |     }
29 |   }
30 | }
31 | </script>
32 | <style lang="scss" scoped>
33 |   .spinner {
34 |     box-sizing: border-box;
35 |     border-radius: 100%;
36 |     border: 10px solid rgba(255, 255, 255, 0.2);
37 |     animation: circle-2-spin 1s infinite linear;
38 |   }
39 |   @keyframes circle-2-spin {
40 |     100% {
41 |       transform: rotate(360deg);
42 |     }
43 |   }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/components/RotateSquare.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--rotate-square"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     size: {
 9 |       default: '40px'
10 |     },
11 |     background: {
12 |       default: '#41b883'
13 |     },
14 |     duration: {
15 |       default: '1.2s'
16 |     }
17 |   },
18 |   computed: {
19 |     styles () {
20 |       return {
21 |         backgroundColor: this.background,
22 |         width: this.size,
23 |         height: this.size,
24 |         animationDuration: this.duration
25 |       }
26 |     }
27 |   }
28 | }
29 | </script>
30 | 
31 | <style lang="scss" scoped>
32 |   .spinner{
33 |     display: inline-block;
34 |     animation: rotateplane 1.2s infinite ease-in-out;
35 |   }
36 |   @keyframes rotateplane {
37 |     0% {
38 |       transform: perspective(120px) rotateX(0deg) rotateY(0deg);
39 |     }
40 |     50% {
41 |       transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
42 |     }
43 |     100% {
44 |       transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
45 |     }
46 |   }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/components/Texture.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--texture"></div>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: {
 7 |     size: {
 8 |       default: '40px'
 9 |     },
10 |     color: {
11 |       default: '#41b883'
12 |     }
13 |   },
14 |   computed: {
15 |     styles () {
16 |       return {
17 |         width: this.size,
18 |         height: this.size,
19 |         '--bg-color': this.color
20 |       }
21 |     }
22 |   }
23 | }
24 | </script>
25 | <style lang="scss" scoped>
26 |   .spinner {
27 |     flex-shrink: 0;
28 |     border: 1px var(--bg-color) solid;
29 |     border-radius: 4px;
30 |     position: relative;
31 |     background: linear-gradient(45deg, transparent 49%, var(--bg-color) 50%, var(--bg-color) 50%, transparent 51%, transparent), linear-gradient(-45deg, transparent 49%, var(--bg-color) 50%, var(--bg-color) 50%, transparent 51%, transparent);
32 |     background-size: 16px 16px;
33 |     background-position: 0% 0%;
34 |     animation: spTexture 1s infinite linear;
35 |   }
36 |   @keyframes spTexture {
37 |     from { background-position: 0px 0px; }
38 |     to { background-position: -16px 0px; }
39 |   }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/components/Circle3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--circle-3"></div>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: {
 7 |     size: {
 8 |       default: '40px'
 9 |     },
10 |     background: {
11 |       default: '#41b883'
12 |     },
13 |     dotSize: {
14 |       default () {
15 |         let size = parseInt(this.size)
16 |         return size / 3 + 1
17 |       }
18 |     }
19 |   },
20 |   computed: {
21 |     styles () {
22 |       let size = parseInt(this.size)
23 |       let halfSize = size / 3
24 |       return {
25 |         width: this.size,
26 |         height: this.size,
27 |         border: '0px solid ' + this.background,
28 |         boxShadow: '0 -' + halfSize + 'px 0 ' + this.dotSize + 'px ' + this.background + ' inset'
29 |       }
30 |     }
31 |   }
32 | }
33 | </script>
34 | <style lang="scss" scoped>
35 |   .spinner {
36 |     box-sizing: border-box;
37 |     border-radius: 50%;
38 |     animation: circle-3-rotate 1s infinite linear;
39 |   }
40 | 
41 |   @keyframes circle-3-rotate {
42 |     0% {
43 |       transform: rotate(0deg);
44 |     }
45 |     100% {
46 |       transform: rotate(360deg);
47 |     }
48 |   }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/components/Circle11.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--circle-11">
 3 |     <div class="spinner-inner"></div>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     size: {
10 |       default: '40px'
11 |     }
12 |   },
13 |   computed: {
14 |     styles () {
15 |       return {
16 |         width: this.size,
17 |         height: this.size
18 |       }
19 |     }
20 |   }
21 | }
22 | </script>
23 | <style lang="scss" scoped>
24 |   .spinner{
25 |     display: flex;
26 |     justify-content: center;
27 |     align-items: center;
28 |     * {
29 |       line-height: 0;
30 |       box-sizing: border-box;
31 |     }
32 |   }
33 |   .spinner-inner {
34 |     width: calc(100% - 14px);
35 |     height: calc(100% - 14px);
36 |     flex-shrink: 0;
37 |     border: 1px solid;
38 |     animation: rotate 1.3s linear 0s infinite;
39 |     border-radius: 50%;
40 |     &:after {
41 |       content: '';
42 |       position: absolute;
43 |       width: 14px;
44 |       height: 14px;
45 |       background: #41b883;
46 |       border-radius: 100%;
47 |       left: 50%;
48 |       transform: translateX(-50%) translateY(-50%);
49 |       top: 0;
50 |     }
51 |   }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/components/Pencil.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg v-bind:style="styles" class="spinner spinner--pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677.34762 182.15429">
 3 |     <g>
 4 |       <path class="body-pencil" d="M128.273 0l-3.9 2.77L0 91.078l128.273 91.076 549.075-.006V.008L128.273 0zm20.852 30l498.223.006V152.15l-498.223.007V30zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z">
 5 |       </path>
 6 |       <path class="line" d="M134.482 157.147v25l518.57.008.002-25-518.572-.008z">
 7 |       </path>
 8 |     </g>
 9 |   </svg>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   props: {
15 |     size: {
16 |       default: '40px'
17 |     },
18 |     color: {
19 |       default: '#41b883'
20 |     }
21 |   },
22 |   computed: {
23 |     styles () {
24 |       return {
25 |         width: this.size,
26 |         height: 'auto',
27 |         fill: this.color
28 |       }
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <style lang="scss" scoped>
35 |   .line {
36 |     animation: linePencil .8s infinite linear;
37 |   }
38 | 
39 |   @keyframes linePencil {
40 |     0% {
41 |       transform: translateY(0);
42 |     }
43 |     100% {
44 |       transform: translateY(-150px);
45 |     }
46 |   }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/components/Wave.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--wave">
 3 |       <div></div>
 4 |       <div></div>
 5 |       <div></div>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   props: {
11 |     size: {
12 |       default: '40px'
13 |     },
14 |     background: {
15 |       default: '#41b883'
16 |     },
17 |   },
18 |   computed: {
19 |     styles () {
20 |       return {
21 |         border: '1px solid ' + this.background,
22 |         width: this.size,
23 |         height: this.size
24 |       }
25 |     }
26 |   }
27 | }
28 | </script>
29 | <style lang="scss" scoped>
30 |   .spinner{
31 | 
32 |     * {
33 |       line-height: 0;
34 |       box-sizing: border-box;
35 |     }
36 |   }
37 |   .spinner > div {
38 |     background-color: transparent;
39 |     border-radius: 100%;
40 |     animation-fill-mode: both;
41 |     position: absolute;
42 |     opacity: 0;
43 |     width: 50px;
44 |     height: 50px;
45 |     animation: wave-jumper 1s 0s linear infinite;
46 |   }
47 |   .spinner > div:nth-child(2) {
48 |     animation-delay: 0.33333s;
49 |   }
50 |   .spinner > div:nth-child(3) {
51 |     animation-delay: 0.66666s;
52 |   }
53 | 
54 |   @keyframes wave-jumper {
55 |     0% {
56 |       opacity: 0;
57 |       transform: scale(0);
58 |     }
59 |     5% {
60 |       opacity: 1;
61 |     }
62 |     100% {
63 |       opacity: 0;
64 |     }
65 |   }
66 | 
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/components/Circle5.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--circle-5"></div>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: {
 7 |     size: {
 8 |       default: '40px'
 9 |     }
10 |   },
11 |   computed: {
12 |     styles () {
13 |       return {
14 |         width: this.size,
15 |         height: this.size
16 |       }
17 |     }
18 |   }
19 | }
20 | </script>
21 | <style lang="scss" scoped>
22 |   .spinner {
23 |     transform: translate3d(0, 0, 0);
24 |     position: relative;
25 |     background: rgba(25, 165, 152, 0.5);
26 |     border-radius: 50%;
27 |     overflow: hidden;
28 |   }
29 |   .spinner:before, .spinner:after {
30 |     content: '';
31 |     position: absolute;
32 |     top: 0;
33 |     display: inline-block;
34 |     width: 100%;
35 |     height: 100%;
36 |     border-radius: 50%;
37 |   }
38 |   .spinner:before {
39 |     animation: circle-5-spinner 3s infinite;
40 |     transform-origin: 0 50%;
41 |     left: 0;
42 |     background: #c7efcf;
43 |   }
44 |   .spinner:after {
45 |     animation: circle-5-spinner 3s 0.2s reverse infinite;
46 |     transform-origin: 100% 50%;
47 |     right: 0;
48 |     background: #eef5db;
49 |   }
50 |   @keyframes circle-5-spinner {
51 |     0% {
52 |       transform: rotate(0deg);
53 |     }
54 |     50% {
55 |       transform: rotate(360deg);
56 |     }
57 |     100% {
58 |       transform: rotate(0deg);
59 |     }
60 |   }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/components/Circle4.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--circle-4"></div>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: {
 7 |     size: {
 8 |       default: '40px'
 9 |     }
10 |   },
11 |   computed: {
12 |     styles () {
13 |       return {
14 |         width: this.size,
15 |         height: this.size
16 |       }
17 |     }
18 |   }
19 | }
20 | </script>
21 | <style lang="scss" scoped>
22 |   .spinner{
23 |     box-sizing: border-box;
24 |     position: relative;
25 |     border: 3px solid transparent;
26 |     border-top-color: #f7484e;
27 |     border-radius: 50%;
28 |     animation: circle-4-spin 2s linear infinite;
29 |     &:before, &:after{
30 |       content:'';
31 |       box-sizing: border-box;
32 |       position: absolute;
33 |       border: 3px solid transparent;
34 |       border-radius: 50%;
35 |     }
36 | 
37 |     &:before{
38 |       border-top-color: #f8b334;
39 |       top: 0;
40 |       left: 0;
41 |       right: 0;
42 |       bottom: 0;
43 |       animation: circle-4-spin 3s linear infinite;
44 |     }
45 | 
46 |     &:after{
47 |       border-top-color: #41b883;
48 |       top: 6px;
49 |       left: 6px;
50 |       right: 6px;
51 |       bottom: 6px;
52 |       animation: spin 4s linear infinite;
53 |     }
54 |   }
55 | 
56 |   @keyframes circle-4-spin{
57 |     0% {
58 |       transform: rotate(0deg);
59 |     }
60 |     100% {
61 |       transform: rotate(360deg);
62 |     }
63 |   }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/components/Jumper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--jumper">
 3 |     <div v-bind:style="innerStyles" ></div>
 4 |     <div v-bind:style="innerStyles" ></div>
 5 |     <div v-bind:style="innerStyles" ></div>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   props: {
11 |     size: {
12 |       default: '50px'
13 |     },
14 |     color: {
15 |       default: '#41b883'
16 |     }
17 |   },
18 |   computed: {
19 |     styles () {
20 |       return {
21 |         width: this.size,
22 |         height: this.size,
23 |       }
24 |     },
25 |     innerStyles() {
26 |       return {
27 |         ...this.styles,
28 |         '--bg-color': this.color
29 |       }
30 |     }
31 |   }
32 | }
33 | </script>
34 | <style lang="scss" scoped>
35 |   .spinner{
36 |     * {
37 |       line-height: 0;
38 |       box-sizing: border-box;
39 |     }
40 |   }
41 |   .spinner > div {
42 |     background-color: var(--bg-color);
43 |     border-radius: 100%;
44 |     animation-fill-mode: both;
45 |     position: absolute;
46 |     opacity: 0;
47 |     animation: jumper 1s 0s linear infinite;
48 |   }
49 |   .spinner > div:nth-child(2) {
50 |     animation-delay: 0.33333s;
51 |   }
52 |   .spinner > div:nth-child(3) {
53 |     animation-delay: 0.66666s;
54 |   }
55 |   @keyframes jumper {
56 |     0% {
57 |       opacity: 0;
58 |       transform: scale(0);
59 |     }
60 |     5% {
61 |       opacity: 1;
62 |     }
63 |     100% {
64 |       opacity: 0;
65 |     }
66 |   }
67 | 
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/components/DoubleBounce.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-bind:style="styles" class="spinner spinner--double-bounce">
 3 |       <div class="double-bounce1" v-bind:style="bounceStyle"></div>
 4 |       <div class="double-bounce2" v-bind:style="bounceStyle"></div>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     size: {
12 |       default: '40px'
13 |     },
14 |     background: {
15 |       default: '#41b883'
16 |     },
17 |     duration: {
18 |       default: '2.0s'
19 |     }
20 |   },
21 |   computed: {
22 |     bounceStyle () {
23 |       return {
24 |         backgroundColor: this.background,
25 |         animationDuration: this.duration
26 |       }
27 |     },
28 |     styles () {
29 |       return {
30 |         width: this.size,
31 |         height: this.size
32 |       }
33 |     }
34 |   }
35 | }
36 | </script>
37 | 
38 | <style lang="scss" scoped>
39 |   .spinner {
40 |     position: relative;
41 |     display: inline-block;
42 |     * {
43 |       line-height: 0;
44 |       box-sizing: border-box;
45 |     }
46 |   }
47 | 
48 |   .double-bounce1, .double-bounce2 {
49 |     width: 100%;
50 |     height: 100%;
51 |     border-radius: 50%;
52 |     opacity: 0.6;
53 |     position: absolute;
54 |     top: 0;
55 |     left: 0;
56 |     animation: double-bounce 2.0s ease-in-out infinite;
57 |   }
58 | 
59 |   .double-bounce2 {
60 |     animation-delay: -1.0s;
61 |   }
62 | 
63 |   @keyframes double-bounce {
64 |     0%, 100% {
65 |      transform: scale(0.0);
66 |     }
67 |     50% {
68 |       transform: scale(1.0);
69 |     }
70 |   }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/components/RotateSquare4.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span v-bind:style="styles" class="spinner spinner--rotate-square4">
 3 |     <span class="loader-inner"></span>
 4 |   </span>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     size: {
11 |       default: '40px'
12 |     },
13 |     color: {
14 |       default: '#41b883'
15 |     }
16 |   },
17 |   computed: {
18 |     styles () {
19 |       return {
20 |         width: this.size,
21 |         height: this.size,
22 |         '--bg-color': this.color
23 |       }
24 |     }
25 |   }
26 | }
27 | </script>
28 | 
29 | <style lang="scss" scoped>
30 |   .spinner {
31 |     position: relative;
32 |     border: 4px solid var(--bg-color);
33 |     animation: loader 2s infinite ease;
34 |     * {
35 |       line-height: 0;
36 |       box-sizing: border-box;
37 |     }
38 |   }
39 | 
40 |   .loader-inner {
41 |     vertical-align: top;
42 |     display: inline-block;
43 |     width: 100%;
44 |     background-color: var(--bg-color);
45 |     animation: loader-inner 2s infinite ease-in;
46 |   }
47 | 
48 |   @keyframes loader {
49 |     0% {
50 |       transform: rotate(0deg);
51 |     }
52 | 
53 |     25% {
54 |       transform: rotate(180deg);
55 |     }
56 | 
57 |     50% {
58 |       transform: rotate(180deg);
59 |     }
60 | 
61 |     75% {
62 |       transform: rotate(360deg);
63 |     }
64 | 
65 |     100% {
66 |       transform: rotate(360deg);
67 |     }
68 |   }
69 | 
70 |   @keyframes loader-inner {
71 |     0% {
72 |       height: 0%;
73 |     }
74 | 
75 |     25% {
76 |       height: 0%;
77 |     }
78 | 
79 |     50% {
80 |       height: 100%;
81 |     }
82 | 
83 |     75% {
84 |       height: 100%;
85 |     }
86 | 
87 |     100% {
88 |       height: 0%;
89 |     }
90 |   }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/src/components/Circle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg v-bind:style="styles" class="spinner spinner--circle" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
 3 |     <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
 4 |   </svg>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     size: {
10 |       default: '40px'
11 |     }
12 |   },
13 |   computed: {
14 |     styles () {
15 |       return {
16 |         width: this.size,
17 |         height: this.size
18 |       }
19 |     }
20 |   }
21 | }
22 | </script>
23 | <style lang="scss" scoped>
24 | 
25 |   $offset: 187;
26 |   $duration: 1.4s;
27 | 
28 |   .spinner {
29 |     animation: circle-rotator $duration linear infinite;
30 |     * {
31 |       line-height: 0;
32 |       box-sizing: border-box;
33 |     }
34 |   }
35 | 
36 |   @keyframes circle-rotator {
37 |     0% { transform: rotate(0deg); }
38 |     100% { transform: rotate(270deg); }
39 |   }
40 | 
41 |   .path {
42 |     stroke-dasharray: $offset;
43 |     stroke-dashoffset: 0;
44 |     transform-origin: center;
45 |     animation:
46 |             circle-dash $duration ease-in-out infinite,
47 |             circle-colors ($duration*4) ease-in-out infinite;
48 |   }
49 | 
50 |   @keyframes circle-colors {
51 |     0% {
52 |       stroke: #35495e;
53 |     }
54 |     25% {
55 |       stroke: #DE3E35;
56 |     }
57 |     50% {
58 |       stroke: #F7C223;
59 |     }
60 |     75% {
61 |       stroke: #41b883;
62 |     }
63 |     100% {
64 |       stroke: #35495e;
65 |     }
66 |   }
67 | 
68 |   @keyframes circle-dash {
69 |     0% {
70 |       stroke-dashoffset: $offset;
71 |     }
72 |     50% {
73 |       stroke-dashoffset: $offset/4;
74 |       transform:rotate(135deg);
75 |     }
76 |     100% {
77 |       stroke-dashoffset: $offset;
78 |       transform:rotate(450deg);
79 |     }
80 |   }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/components/Diamond.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span v-bind:style="styles" class="spinner spinner--rotate-diamond">
 3 |     <div v-bind:style="diamondStyle" class='diamond'></div>
 4 |     <div v-bind:style="diamondStyle" class='diamond'></div>
 5 |     <div v-bind:style="diamondStyle" class='diamond'></div>
 6 |   </span>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     size: {
13 |       default: '40px'
14 |     },
15 |     color: {
16 |       default: '#41b883'
17 |     }
18 |   },
19 |   computed: {
20 |     diamondStyle () {
21 |       let size = parseInt(this.size)
22 |       return {
23 |         width: size / 4 + 'px',
24 |         height: size / 4 + 'px',
25 |         '--bg-color': this.color
26 |       }
27 |     },
28 |     styles () {
29 |       let size = parseInt(this.size)
30 |       return {
31 |         width: this.size,
32 |         height: size / 4 + 'px'
33 |       }
34 |     }
35 |   }
36 | }
37 | </script>
38 | 
39 | <style lang="scss" scoped>
40 |   $accent: #41b883;
41 |   $duration: 1500ms;
42 |   $timing: linear;
43 | 
44 |   .spinner {
45 |     position: relative;
46 |     * {
47 |       line-height: 0;
48 |       box-sizing: border-box;
49 |     }
50 |     .diamond {
51 |       position: absolute;
52 |       left: 0;
53 |       top: 0;
54 |       border-radius: 2px;
55 |       background: var(--bg-color);
56 |       transform: translateX(-50%) rotate(45deg) scale(0);
57 |       animation: diamonds $duration $timing infinite;
58 |       @for $i from 1 through 4 {
59 |         &:nth-child(#{$i}) {
60 |           animation-delay: -($duration / 1.5) * $i;
61 |         }
62 |       }
63 |     }
64 |   }
65 |   @keyframes diamonds {
66 |     50% {
67 |       left: 50%;
68 |       transform: translateX(-50%) rotate(45deg) scale(1);
69 |     }
70 |     100% {
71 |       left: 100%;
72 |       transform: translateX(-50%) rotate(45deg) scale(0);
73 |     }
74 |   }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/Stretch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-bind:style="styles" class="spinner spinner--stretch">
 3 |       <div v-bind:style="rectStyles" class="rect rect-1"></div>
 4 |       <div v-bind:style="rectStyles" class="rect rect-2"></div>
 5 |       <div v-bind:style="rectStyles" class="rect rect-3"></div>
 6 |       <div v-bind:style="rectStyles" class="rect rect-4"></div>
 7 |       <div v-bind:style="rectStyles" class="rect rect-5"></div>
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   props: {
14 |     size: {
15 |       default: '40px'
16 |     },
17 |     background: {
18 |       default: '#41b883'
19 |     },
20 |     duration: {
21 |       default: '1.2s'
22 |     }
23 |   },
24 |   computed: {
25 |     rectStyles () {
26 |       return {
27 |         backgroundColor: this.background,
28 |         animationDuration: this.duration
29 |       }
30 |     },
31 |     styles () {
32 |       return {
33 |         width: this.size,
34 |         height: this.size
35 |       }
36 |     }
37 |   }
38 | }
39 | </script>
40 | 
41 | <style lang="scss" scoped>
42 |   .spinner {
43 |     display: inline-block;
44 |     text-align: center;
45 |     font-size: 10px;
46 |     * {
47 |       line-height: 0;
48 |       box-sizing: border-box;
49 |     }
50 |   }
51 |   .rect{
52 |     animation: sk-stretchdelay 1.2s ease-in-out infinite;
53 |   }
54 |   .spinner > div {
55 |     height: 100%;
56 |     width: 10%;
57 |     display: inline-block;
58 |   }
59 | 
60 |   .spinner .rect-2 {
61 |     animation-delay: -1.1s;
62 |   }
63 | 
64 |   .spinner .rect-3 {
65 |     animation-delay: -1.0s;
66 |   }
67 | 
68 |   .spinner .rect-4 {
69 |     animation-delay: -0.9s;
70 |   }
71 | 
72 |   .spinner .rect-5 {
73 |     animation-delay: -0.8s;
74 |   }
75 | 
76 |   @keyframes sk-stretchdelay {
77 |     0%, 40%, 100% {
78 |       transform: scaleY(0.4);
79 |     }
80 |     20% {
81 |       transform: scaleY(1.0);
82 |     }
83 |   }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-loading-spinner",
 3 |   "version": "1.0.11",
 4 |   "description": "Loading spinner collection for Vuejs",
 5 |   "author": "nguyenvanduoc (nguyenvanduocit@gmail.com)",
 6 |   "scripts": {
 7 |     "build": "node build/build.js",
 8 |     "lint": "eslint --ext .js,.vue src"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/nguyenvanduocit/vue-loading-spinner.git"
13 |   },
14 |   "main": "src/index.js",
15 |   "dependencies": {
16 |     "node-sass": "^4.5.3",
17 |     "sass-loader": "^6.0.6",
18 |     "vue": "^2.3.3"
19 |   },
20 |   "devDependencies": {
21 |     "url-loader": "^0.5.8",
22 |     "autoprefixer": "^7.1.2",
23 |     "babel-core": "^6.22.1",
24 |     "babel-eslint": "^7.1.1",
25 |     "babel-loader": "^7.1.1",
26 |     "babel-plugin-transform-runtime": "^6.22.0",
27 |     "babel-preset-env": "^1.3.2",
28 |     "babel-preset-stage-2": "^6.22.0",
29 |     "babel-register": "^6.22.0",
30 |     "chalk": "^2.0.1",
31 |     "connect-history-api-fallback": "^1.3.0",
32 |     "copy-webpack-plugin": "^4.0.1",
33 |     "css-loader": "^0.28.0",
34 |     "cssnano": "^3.10.0",
35 |     "eslint": "^3.19.0",
36 |     "eslint-config-standard": "^6.2.1",
37 |     "eslint-friendly-formatter": "^3.0.0",
38 |     "eslint-loader": "^1.7.1",
39 |     "eslint-plugin-html": "^3.1.0",
40 |     "eslint-plugin-promise": "^3.4.0",
41 |     "eslint-plugin-standard": "^2.0.1",
42 |     "eventsource-polyfill": "^0.9.6",
43 |     "extract-text-webpack-plugin": "^2.0.0",
44 |     "file-loader": "^0.11.1",
45 |     "ora": "^1.2.0",
46 |     "semver": "^5.3.0",
47 |     "shelljs": "^0.7.6",
48 |     "vue-loader": "^12.1.0",
49 |     "vue-style-loader": "^3.0.1",
50 |     "vue-template-compiler": "^2.3.3",
51 |     "webpack": "^2.6.1"
52 |   },
53 |   "engines": {
54 |     "node": ">= 4.0.0",
55 |     "npm": ">= 3.0.0"
56 |   },
57 |   "browserslist": [
58 |     "> 1%",
59 |     "last 2 versions",
60 |     "not ie <= 8",
61 |     "ie 11"
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/Jawn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="spinner spinner--jawn">
 3 |     <div :style="styles" class="spinner-inner">
 4 |       <div :style="innerStyles" class="jawn"></div>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     size: {
13 |       default: '40px'
14 |     },
15 |     color: {
16 |       default: '#41b883'
17 |     }
18 |   },
19 |   computed: {
20 |     innerStyles () {
21 |       let size = parseInt(this.size)
22 |       return {
23 |         transform: 'scale(' + (size / 70) + ')'
24 |       }
25 |     },
26 |     styles () {
27 |       return {
28 |         width: this.size,
29 |         height: this.size
30 |       }
31 |     }
32 |   }
33 | }
34 | </script>
35 | 
36 | <style lang="scss" scoped>
37 |   .spinner-inner{
38 |     width: 70px;
39 |     height: 70px;
40 |     display: flex;
41 |     justify-content: center;
42 |     align-items: center;
43 |     * {
44 |       line-height: 0;
45 |       box-sizing: border-box;
46 |     }
47 |   }
48 |   .jawn {
49 |     position: relative;
50 |     background-color: #41b883;
51 |     width: 15px;
52 |     height: 15px;
53 |     margin: 0 auto;
54 |     border-radius: 50%;
55 | 
56 |     &:after, &:before {
57 |       content: "";
58 |       position: absolute;
59 |       width: 6px;
60 |       height: 6px;
61 |       border-radius: 50%;
62 |     }
63 | 
64 |     &:after {
65 |       left: -10px;
66 |       top: -5px;
67 |       background-color: #f7484e;
68 |       transform-origin: 15px 10px;
69 |       animation: jawn-axis 1s linear infinite;
70 |     }
71 |     &:before {
72 |       left: -25px;
73 |       top: -15px;
74 |       background-color: #34495e;
75 |       transform-origin: 30px 20px;
76 |       animation: jawn-axis 2s linear infinite;
77 |     }
78 |   }
79 | 
80 |   @keyframes jawn-axis {
81 |     0% {
82 |       transform: rotateZ(0deg) translate3d(0,0,0);
83 |     }
84 |     100% {
85 |       transform: rotateZ(360deg) translate3d(0,0,0);
86 |     }
87 |   }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/Circle10.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--circle-10">
 3 |     <div v-bind:style="innerStyles" class="spinner-inner">
 4 |       <div class="loader-xbox"></div>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   props: {
11 |     size: {
12 |       default: '40px'
13 |     }
14 |   },
15 |   computed: {
16 |     innerStyles () {
17 |       let size = parseInt(this.size)
18 |       return {
19 |         transform: 'scale(' + (size / 100) + ')'
20 |       }
21 |     },
22 |     styles () {
23 |       return {
24 |         width: this.size,
25 |         height: this.size
26 |       }
27 |     }
28 |   }
29 | }
30 | </script>
31 | <style lang="scss" scoped>
32 |   .spinner{
33 |     display: flex;
34 |     justify-content: center;
35 |     align-items: center;
36 |     * {
37 |       line-height: 0;
38 |       box-sizing: border-box;
39 |     }
40 |   }
41 |   .spinner-inner
42 |   {
43 |     width: 100px;
44 |     height: 100px;
45 |     flex-shrink: 0;
46 |   }
47 | 
48 |   .loader-xbox, .loader-xbox:before, .loader-xbox:after {
49 |     position: absolute;
50 |     border: 3px solid transparent;
51 |     border-top: 3px solid #41b883;
52 |     border-radius: 50%;
53 |     animation: rotate linear infinite;
54 |     content: '';
55 |   }
56 | 
57 |   .loader-xbox {
58 |     height: 100px;
59 |     width: 100px;
60 |     animation-duration: 1.05s;
61 |   }
62 | 
63 |   .loader-xbox:before {
64 |     height: 75px;
65 |     width: 75px;
66 |     top: 10px;
67 |     left: 10px;
68 |     border-top: 3px solid #f7484e;
69 |     animation-duration: 10s;
70 |   }
71 | 
72 |   .loader-xbox:after {
73 |     height: 50px;
74 |     width: 50px;
75 |     top: 22px;
76 |     left: 22px;
77 |     border-top: 3px solid #f8b334;
78 |     animation-duration: 4s;
79 |   }
80 | 
81 |   @keyframes rotate {
82 |     from {
83 |       transform: rotateZ(360deg);
84 |     }
85 |     to {
86 |       transform: rotateZ(0deg);
87 |     }
88 |   }
89 | 
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/TwoCube.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-bind:style="styles" class="spinner spinner--two-cube">
 3 |       <div v-bind:style='cubeStyles' class="cube1"></div>
 4 |       <div v-bind:style='cubeStyles' class="cube2"></div>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     size: {
12 |       default: '40px'
13 |     },
14 |     background: {
15 |       default: '#41b883'
16 |     },
17 |     duration: {
18 |       default: '1.8s'
19 |     }
20 |   },
21 |   computed: {
22 |     cubeStyles () {
23 |       return {
24 |         backgroundColor: this.background,
25 |         animationName: 'sk-cubemove',
26 |         animationDuration: this.duration
27 |       }
28 |     },
29 |     styles () {
30 |       return {
31 |         width: this.size,
32 |         height: this.size
33 |       }
34 |     }
35 |   }
36 | }
37 | </script>
38 | 
39 | <style lang="scss" scoped>
40 |   .spinner {
41 |     display: inline-block;
42 |     position: relative;
43 |     * {
44 |       line-height: 0;
45 |       box-sizing: border-box;
46 |     }
47 |   }
48 | 
49 |   .cube1, .cube2 {
50 |     width: 25%;
51 |     height: 25%;
52 |     position: absolute;
53 |     top: 0;
54 |     left: 0;
55 |     animation: sk-cubemove 1.8s ease-in-out infinite;
56 |   }
57 | 
58 |   .cube2 {
59 |     animation-delay: -0.9s;
60 |   }
61 | 
62 |   @keyframes sk-cubemove {
63 |     25% {
64 |       top: 0;
65 |       left: calc(100% - 25%);
66 |       transform: rotate(-90deg) scale(0.5);
67 |     }
68 |     50% {
69 |       top: calc(100% - 25%);
70 |       left: calc(100% - 25%);
71 |       transform: rotate(-179deg);
72 |     }
73 |     50.1% {
74 |       top: calc(100% - 25%);
75 |       left: calc(100% - 25%);
76 |       transform: rotate(-180deg);
77 |     }
78 |     75% {
79 |       top: calc(100% - 25%);
80 |       left: 0;
81 |       transform: rotate(-270deg) scale(0.5);
82 |     }
83 |     100% {
84 |       top: 0;
85 |       left: 0;
86 |       transform: rotate(-360deg);
87 |     }
88 |   }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/components/RotateSquare2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-bind:style="styles" class="spinner spinner--rotate-square-2"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     size: {
 9 |       default: '40px'
10 |     },
11 |     background: {
12 |       default: '#41b883'
13 |     }
14 |   },
15 |   computed: {
16 |     styles () {
17 |       return {
18 |         width: this.size,
19 |         height: this.size,
20 |         '--bg-color': this.background
21 |       }
22 |     }
23 |   }
24 | }
25 | </script>
26 | 
27 | <style lang="scss" scoped>
28 |   .spinner {
29 |     position: relative;
30 |     * {
31 |         line-height: 0;
32 |         box-sizing: border-box;
33 |     }
34 |     &:before {
35 |       content: '';
36 |       width: 100%;
37 |       height: 20%;
38 |       min-width: 5px;
39 |       background: #000;
40 |       opacity: 0.1;
41 |       position: absolute;
42 |       bottom: 0%;
43 |       left: 0;
44 |       border-radius: 50%;
45 |       animation: rotate-square-2-shadow .5s linear infinite;
46 |     }
47 |     &:after {
48 |       content: '';
49 |       width: 100%;
50 |       height: 100%;
51 |       background: var(--bg-color);
52 |       animation: rotate-square-2-animate .5s linear infinite;
53 |       position: absolute;
54 |       bottom:40%;
55 |       left: 0;
56 |       border-radius: 3px;
57 |     }
58 |   }
59 | 
60 |   @keyframes rotate-square-2-animate {
61 |     17% {
62 |       border-bottom-right-radius: 3px;
63 |     }
64 |     25% {
65 |       transform: translateY(20%) rotate(22.5deg);
66 |     }
67 |     50% {
68 |       transform: translateY(40%) scale(1, .9) rotate(45deg);
69 |       border-bottom-right-radius: 50%;
70 |     }
71 |     75% {
72 |       transform: translateY(20%) rotate(67.5deg);
73 |     }
74 |     100% {
75 |       transform: translateY(0) rotate(90deg);
76 |     }
77 |   }
78 | 
79 | 
80 |   @keyframes rotate-square-2-shadow {
81 |     0%, 100% {
82 |       transform: scale(1, 1);
83 |     }
84 |     50% {
85 |       transform: scale(1.2, 1);
86 |     }
87 |   }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/RotateSquare6.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--rotate-square-6">
 3 |     <div v-bind:style="outerStyles" class="inner-square inner-square-1"></div>
 4 |     <div v-bind:style="innerStyles" class="inner-square inner-square-2"></div>
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     size: {
11 |       default: '90px'
12 |     },
13 |     color: {
14 |       default: '#41b883'
15 |     }
16 |   },
17 |   computed: {
18 |     outerWidth () {
19 |       let size = parseInt(this.size)
20 |       return this.calcWidth(size)
21 |     },
22 |     outerStyles () {
23 |       let size = this.outerWidth + 'px'
24 |       return {
25 |         border: '2px solid ' + this.color,
26 |         width: size,
27 |         height: size
28 |       }
29 |     },
30 |     innerStyles () {
31 |       let size = this.calcWidth(this.outerWidth) + 'px'
32 |       return {
33 |         border: '2px solid ' + this.color,
34 |         width: size,
35 |         height: size
36 |       }
37 |     },
38 |     styles () {
39 |       return {
40 |         width: this.size,
41 |         height: this.size
42 |       }
43 |     }
44 |   },
45 |   methods: {
46 |     calcWidth (outerWidth) {
47 |       let r = 45 * Math.PI / 180
48 |       let s = Math.abs(Math.cos(r))
49 |       let c = Math.abs(Math.sin(r))
50 |       return (outerWidth * c - outerWidth * s) / (Math.pow(c, 2) - Math.pow(s, 2))
51 |     }
52 |   }
53 | }
54 | </script>
55 | <style lang="scss" scoped>
56 |   .spinner{
57 |     position: relative;
58 |     display: flex;
59 |     justify-content: center;
60 |     align-items: center;
61 |     .inner-square {
62 |       content: "";
63 |       position: absolute;
64 |       width: 30px;
65 |       height: 30px;
66 |     }
67 |     .inner-square-1 {
68 |       animation: spinner--rotate-square-6 2.5s linear infinite;
69 |     }
70 |     .inner-square-2 {
71 |       width: 44px;
72 |       height: 44px;
73 |       animation: spinner--rotate-square-6 2.5s linear infinite;
74 |       animation-direction: reverse;
75 |     }
76 |   }
77 |   @keyframes spinner--rotate-square-6 {
78 |     from {
79 |       -webkit-transform: rotate(0deg);
80 |       transform: rotate(0deg);
81 |     }
82 |     to {
83 |       -webkit-transform: rotate(360deg);
84 |       transform: rotate(360deg);
85 |     }
86 |   }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/components/Circle7.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--circle-7">
  3 |     <div class="spinner-inner">
  4 | 
  5 |     </div>
  6 |   </div>
  7 | </template>
  8 | <script>
  9 | export default {
 10 |   props: {
 11 |     size: {
 12 |       default: '40px'
 13 |     }
 14 |   },
 15 |   computed: {
 16 |     styles () {
 17 |       let size = parseInt(this.size)
 18 |       return {
 19 |         width: this.size,
 20 |         height: this.size,
 21 |         transform: 'scale(' + (size / 75) + ')'
 22 |       }
 23 |     }
 24 |   }
 25 | }
 26 | </script>
 27 | <style lang="scss" scoped>
 28 |   $loader-color: #41b883;
 29 |   .spinner{
 30 |     display: flex;
 31 |     justify-content: center;
 32 |     align-items: center;
 33 |     * {
 34 |       line-height: 0;
 35 |       box-sizing: border-box;
 36 |     }
 37 |   }
 38 |   .spinner-inner {
 39 |     display: inline-block;
 40 |     position: relative;
 41 |     border-radius: 100%;
 42 |     animation: circle-7-spin 3.25s infinite;
 43 |     transform: rotate(0deg);
 44 |     animation-delay: -.5s;
 45 | 
 46 |     &:after, &:before {
 47 |       position: absolute;
 48 |       content: '';
 49 |       height: 20px;
 50 |       width: 20px;
 51 |       display: block;
 52 |       background: $loader-color;
 53 |       border-radius: 100%;
 54 |       animation: circle-7-shrink 3.25s infinite;
 55 |       animation-delay: -.5s;
 56 |     }
 57 | 
 58 |     &:before {
 59 |       left: 70%;
 60 |     }
 61 | 
 62 |     &:after {
 63 |       top: 70%;
 64 |     }
 65 |   }
 66 | 
 67 |   @keyframes circle-7-spin {
 68 |     0% {
 69 |       transform: rotate(0deg);
 70 |       height: 100%;
 71 |       width: 100%;
 72 |     }
 73 |     33% {
 74 |       height: 0;
 75 |       width: 0;
 76 |     }
 77 |     55% {
 78 |       transform: rotate(720deg);
 79 |       height: 0;
 80 |       width: 0;
 81 |     }
 82 | 
 83 |     70% {
 84 |       height: 100%;
 85 |       width: 100%;
 86 |       margin-top: 0;
 87 |     }
 88 | 
 89 |     100% {
 90 |       height: 100%;
 91 |       width: 100%;
 92 |       transform: rotate(360deg);
 93 |       margin-top: 0;
 94 |     }
 95 |   }
 96 | 
 97 |   @keyframes circle-7-shrink {
 98 |     0%, 100% {
 99 |       height: 20px;
100 |       width: 20px;
101 |     }
102 |     33%, 55% {
103 |       height: 0;
104 |       width: 0;
105 |     }
106 | 
107 |     70% {
108 |       height: 20px;
109 |       width: 20px;
110 |     }
111 |   }
112 | </style>
113 | 


--------------------------------------------------------------------------------
/src/components/SpinLine.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--spin-line">
  3 |     <div v-bind:style="lineStyles" class="spinner-inner">
  4 | 
  5 |     </div>
  6 |   </div>
  7 | </template>
  8 | <script>
  9 | export default {
 10 |   props: {
 11 |     size: {
 12 |       default: '40px'
 13 |     },
 14 |     color: {
 15 |       default: '#41b883'
 16 |     },
 17 |     stroke: {
 18 |       default: '5px'
 19 |     }
 20 |   },
 21 |   computed: {
 22 |     lineStyles () {
 23 |       return {
 24 |         width: this.size,
 25 |         height: this.stroke,
 26 |         background: this.color,
 27 |         borderRadius: this.stroke
 28 |       }
 29 |     },
 30 |     styles () {
 31 |       let size = parseInt(this.size)
 32 |       return {
 33 |         width: this.size,
 34 |         height: this.size,
 35 |         transform: 'scale(' + (size / 75) + ')'
 36 |       }
 37 |     }
 38 |   }
 39 | }
 40 | </script>
 41 | <style lang="scss" scoped>
 42 |   .spinner{
 43 |     display: flex;
 44 |     justify-content: center;
 45 |     align-items: center;
 46 |     * {
 47 |       line-height: 0;
 48 |       box-sizing: border-box;
 49 |     }
 50 |   }
 51 |   .spinner-inner {
 52 |     transform-origin: center center;
 53 |     animation: spin-line 4s ease infinite;
 54 |   }
 55 |   @keyframes spin-line {
 56 |     0% {
 57 |       transform: rotate(-20deg);
 58 |       height: 5px;
 59 |       width: 75px;
 60 |     }
 61 |     5% {
 62 |       height: 5px;
 63 |       width: 75px;
 64 |     }
 65 |     30% {
 66 |       transform: rotate(380deg);
 67 |       height: 5px;
 68 |       width: 75px;
 69 |     }
 70 |     40% {
 71 |       transform: rotate(360deg);
 72 |       height: 5px;
 73 |       width: 75px;
 74 |     }
 75 |     55% {
 76 |       transform: rotate(0deg);
 77 |       height: 5px;
 78 |       width: 5px;
 79 |     }
 80 |     65% {
 81 |       transform: rotate(0deg);
 82 |       height: 5px;
 83 |       width: 85px;
 84 |     }
 85 |     68% {
 86 |       transform: rotate(0deg);
 87 |       height: 5px;
 88 |     }
 89 |     75% {
 90 |       transform: rotate(0deg);
 91 |       height: 5px;
 92 |       width: 1px;
 93 |     }
 94 |     78% {
 95 |       height: 5px;
 96 |       width: 5px;
 97 |     }
 98 |     90% {
 99 |       height: 5px;
100 |       width: 75px;
101 |       transform: rotate(0deg);
102 |     }
103 |     99%, 100% {
104 |       height: 5px;
105 |       width: 75px;
106 |       transform: rotate(-20deg);
107 |     }
108 |   }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/src/components/PingPong.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--ping-pong">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner">
  4 |       <div class="board">
  5 |         <div class="left">
  6 |         </div>
  7 |         <div class="right">
  8 |         </div>
  9 |         <div class="ball">
 10 |         </div>
 11 |       </div>
 12 |     </div>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script>
 17 | export default {
 18 |   props: {
 19 |     size: {
 20 |       default: '40px'
 21 |     },
 22 |     color: {
 23 |       default: '#41b883'
 24 |     },
 25 |     ballColor: {
 26 |       default: '#f7484e'
 27 |     }
 28 |   },
 29 |   computed: {
 30 |     innerStyles () {
 31 |       let size = parseInt(this.size)
 32 |       return {
 33 |         transform: 'scale(' + (size / 250) + ')',
 34 |         '--bg-color': this.color,
 35 |         '--ball-color': this.ballColor
 36 |       }
 37 |     },
 38 |     styles () {
 39 |       return {
 40 |         width: this.size,
 41 |         height: this.size
 42 |       }
 43 |     }
 44 |   }
 45 | }
 46 | </script>
 47 | 
 48 | <style lang="scss" scoped>
 49 |   .spinner{
 50 |     overflow: hidden;
 51 |     display: flex;
 52 |     justify-content: center;
 53 |     align-items: center;
 54 |     * {
 55 |       line-height: 0;
 56 |       box-sizing: border-box;
 57 |     }
 58 |   }
 59 |   .board {
 60 |     width:250px;
 61 |     position: relative;
 62 |   }
 63 | 
 64 |   .left,
 65 |   .right {
 66 |     height:50px;
 67 |     width:15px;
 68 |     background:var(--bg-color);
 69 |     display: inline-block;
 70 |     position:absolute;
 71 |   }
 72 | 
 73 |   .left {
 74 |     left:0;
 75 |     animation: pingpong-position1 2s linear infinite;
 76 |   }
 77 |   .right {
 78 |     right:0;
 79 |     animation: pingpong-position2 2s linear infinite;
 80 |   }
 81 |   .ball{
 82 |     width:15px;
 83 |     height:15px;
 84 |     border-radius:50%;
 85 |     background:var(--ball-color);
 86 |     position:absolute;
 87 |     animation: pingpong-bounce 2s linear infinite;
 88 |   }
 89 |   @keyframes pingpong-position1 {
 90 |     0% {top:-60px;}
 91 |     25% {top:0;}
 92 |     50% {top:60px;}
 93 |     75% {top:-60px;}
 94 |     100% {top:-60px;}
 95 |   }
 96 |   @keyframes pingpong-position2 {
 97 |     0% {top:60px;}
 98 |     25% {top:0;}
 99 |     50% {top:-60px;}
100 |     75% {top:-60px;}
101 |     100% {top:60px;}
102 |   }
103 |   @keyframes pingpong-bounce {
104 |     0% {top:-35px;left:10px;}
105 |     25% {top:25px;left:225px;}
106 |     50% {top:75px;left:10px;}
107 |     75% {top:-35px;left:225px;}
108 |     100% {top:-35px;left:10px;}
109 |   }
110 | </style>
111 | 


--------------------------------------------------------------------------------
/src/components/Circle8.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--circle-8">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner">
  4 |       <div class="ball-container">
  5 |         <div class="contener_mixte"><div class="ballcolor ball_1">&nbsp;</div></div>
  6 |         <div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
  7 |         <div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
  8 |         <div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</div></div>
  9 |       </div>
 10 |     </div>
 11 |   </div>
 12 | </template>
 13 | <script>
 14 | export default {
 15 |   props: {
 16 |     size: {
 17 |       default: '40px'
 18 |     }
 19 |   },
 20 |   computed: {
 21 |     innerStyles () {
 22 |       let size = parseInt(this.size)
 23 |       return {
 24 |         transform: 'scale(' + (size / 44) + ')'
 25 |       }
 26 |     },
 27 |     styles () {
 28 |       return {
 29 |         width: this.size,
 30 |         height: this.size
 31 |       }
 32 |     }
 33 |   }
 34 | }
 35 | </script>
 36 | <style lang="scss" scoped>
 37 |   .spinner{
 38 |     display: flex;
 39 |     justify-content: center;
 40 |     align-items: center;
 41 |     * {
 42 |       line-height: 0;
 43 |       box-sizing: border-box;
 44 |     }
 45 |   }
 46 |   .ball-container
 47 |   {
 48 |     animation:animball_two 1.5s infinite;
 49 |     width:44px;
 50 |     height:44px;
 51 |     flex-shrink: 0;
 52 |     position: relative;
 53 |   }
 54 |   .contener_mixte
 55 |   {
 56 |     width:44px; height:44px; position:absolute;
 57 |   }
 58 |   .ballcolor
 59 |   {
 60 |     width: 20px;
 61 |     height: 20px;
 62 |     border-radius: 50%;
 63 |   }
 64 |   .ball_1, .ball_2, .ball_3, .ball_4
 65 |   {
 66 |     position: absolute;
 67 |     animation:animball_one 1.5s infinite ease;
 68 |   }
 69 |   .ball_1
 70 |   {
 71 |     background-color:#f7484e;
 72 |     top:0; left:0;
 73 |   }
 74 |   .ball_2
 75 |   {
 76 |     background-color:#f8b334;
 77 |     top:0; left:24px;
 78 |   }
 79 |   .ball_3
 80 |   {
 81 |     background-color:#41b883;
 82 |     top:24px; left:0;
 83 |   }
 84 |   .ball_4
 85 |   {
 86 |     background-color:#34495e;
 87 |     top:24px; left:24px;
 88 |   }
 89 | 
 90 |   @keyframes animball_one
 91 |   {
 92 |     0%{ position: absolute;}
 93 |     50%{top:12px; left:12px; position: absolute;opacity:0.5;}
 94 |     100%{ position: absolute;}
 95 |   }
 96 | 
 97 |   @keyframes animball_two
 98 |   {
 99 |     0%{transform:rotate(0deg) scale(1);}
100 |     50%{transform:rotate(360deg) scale(1.3);}
101 |     100%{transform:rotate(720deg) scale(1);}
102 |   }
103 | </style>
104 | 


--------------------------------------------------------------------------------
/src/components/Mikepad.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--mikepad">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner">
  4 |       <div class="binding"></div>
  5 |       <div class="pad">
  6 |         <div class="line line1"></div>
  7 |         <div class="line line2"></div>
  8 |         <div class="line line3"></div>
  9 |       </div>
 10 |     </div>
 11 |   </div>
 12 | </template>
 13 | <script>
 14 | export default {
 15 |   props: {
 16 |     size: {
 17 |       default: '40px'
 18 |     },
 19 |     color: {
 20 |       default: '#41b883'
 21 |     }
 22 |   },
 23 |   computed: {
 24 |     innerStyles () {
 25 |       let size = parseInt(this.size)
 26 |       return {
 27 |         transform: 'scale(' + (size / 31) + ')',
 28 |         '--bg-color': this.color
 29 |       }
 30 |     },
 31 |     styles () {
 32 |       return {
 33 |         width: this.size,
 34 |         height: this.size
 35 |       }
 36 |     }
 37 |   }
 38 | }
 39 | </script>
 40 | <style lang="scss" scoped>
 41 |   .spinner{
 42 |     display: flex;
 43 |     justify-content: center;
 44 |     align-items: center;
 45 |     position: relative;
 46 |     * {
 47 |       line-height: 0;
 48 |       box-sizing: border-box;
 49 |     }
 50 |   }
 51 | 
 52 |   .spinner-inner {
 53 |     flex-shrink: 0;
 54 |   }
 55 | 
 56 |   .spinner-inner .binding {
 57 |     content : '';
 58 |     width : 27px;
 59 |     height : 4px;
 60 |     border : 2px solid var(--bg-color);
 61 |     margin : 0 auto;
 62 |   }
 63 | 
 64 |   .spinner-inner .pad {
 65 |     width : 27px;
 66 |     height : 27px;
 67 |     border : 2px solid var(--bg-color);
 68 |     border-top : 0;
 69 |     padding : 4px;
 70 |     margin : 0 auto;
 71 |   }
 72 | 
 73 |   .spinner-inner .line {
 74 |     width : 15px;
 75 |     margin-top : 4px;
 76 |     border-top : 2px solid var(--bg-color);
 77 |     opacity : 0;
 78 |     animation : mikepad-writeline 3s infinite ease-in;
 79 |   }
 80 | 
 81 |   .spinner-inner .line:first-child {
 82 |     margin-top : 0;
 83 |   }
 84 | 
 85 |   .spinner-inner .line.line1 {
 86 |     animation-delay: 0s;
 87 |   }
 88 | 
 89 |   .spinner-inner .line.line2 {
 90 |     animation-delay: 0.5s;
 91 |   }
 92 | 
 93 |   .spinner-inner .line.line3 {
 94 |     animation-delay : 1s;
 95 |   }
 96 | 
 97 |   .spinner-inner .text {
 98 |     text-align : center;
 99 |     margin-top : 10px;
100 |     font-size : 14px;
101 |     color : var(--bg-color);
102 |   }
103 |   @keyframes mikepad-writeline {
104 |     0% { width : 0px; opacity: 0; }
105 |     33% { width : 15px; opacity : 1; }
106 |     70% { opacity : 1; }
107 |     100% {opacity : 0; }
108 |   }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Circle from './components/Circle.vue'
 2 | import Circle2 from './components/Circle2.vue'
 3 | import Circle3 from './components/Circle3.vue'
 4 | import Circle4 from './components/Circle4.vue'
 5 | import Circle5 from './components/Circle5.vue'
 6 | import Circle6 from './components/Circle6.vue'
 7 | import Circle7 from './components/Circle7.vue'
 8 | import Circle8 from './components/Circle8.vue'
 9 | import Circle9 from './components/Circle9.vue'
10 | import Circle10 from './components/Circle10.vue'
11 | import Circle11 from './components/Circle11.vue'
12 | import CubeShadow from './components/CubeShadow.vue'
13 | import Diamond from './components/Diamond.vue'
14 | import DoubleBounce from './components/DoubleBounce.vue'
15 | import Gauge from './components/Gauge.vue'
16 | import Google from './components/Google.vue'
17 | import Hexagon from './components/Hexagon.vue'
18 | import HourGlass from './components/HourGlass.vue'
19 | import Jawn from './components/Jawn.vue'
20 | import Jumper from './components/Jumper.vue'
21 | import LetterCube from './components/LetterCube.vue'
22 | import MikePad from './components/Mikepad.vue'
23 | import Origami from './components/Origami.vue'
24 | import Pencil from './components/Pencil.vue'
25 | import PingPong from './components/PingPong.vue'
26 | import Plane from './components/Plane.vue'
27 | import RotateSquare from './components/RotateSquare.vue'
28 | import RotateSquare2 from './components/RotateSquare2.vue'
29 | import RotateSquare3 from './components/RotateSquare3.vue'
30 | import RotateSquare4 from './components/RotateSquare4.vue'
31 | import RotateSquare5 from './components/RotateSquare5.vue'
32 | import ScaleOut from './components/ScaleOut.vue'
33 | import Socket from './components/Socket.vue'
34 | import SpinLine from './components/SpinLine.vue'
35 | import SquareGrid from './components/SquareGrid.vue'
36 | import Stretch from './components/Stretch.vue'
37 | import Texture from './components/Texture.vue'
38 | import ThreeDots from './components/ThreeDots.vue'
39 | import TwoCube from './components/TwoCube.vue'
40 | import Wave from './components/Wave.vue'
41 | 
42 | export {
43 |   Circle,
44 |   Circle2,
45 |   Circle3,
46 |   Circle4,
47 |   Circle5,
48 |   Circle6,
49 |   Circle7,
50 |   Circle8,
51 |   Circle9,
52 |   Circle10,
53 |   Circle11,
54 |   CubeShadow,
55 |   Diamond,
56 |   DoubleBounce,
57 |   Gauge,
58 |   Google,
59 |   Hexagon,
60 |   HourGlass,
61 |   Jawn,
62 |   Jumper,
63 |   LetterCube,
64 |   MikePad,
65 |   Origami,
66 |   Pencil,
67 |   PingPong,
68 |   Plane,
69 |   RotateSquare,
70 |   RotateSquare2,
71 |   RotateSquare3,
72 |   RotateSquare4,
73 |   RotateSquare5,
74 |   ScaleOut,
75 |   Socket,
76 |   SpinLine,
77 |   SquareGrid,
78 |   Stretch,
79 |   Texture,
80 |   ThreeDots,
81 |   TwoCube,
82 |   Wave
83 | }
84 | 


--------------------------------------------------------------------------------
/src/components/Gauge.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :style="styles" class="spinner spinner--gauge">
  3 |     <div :style="innerStyles" class="spinner-inner"></div>
  4 |   </div>
  5 | </template>
  6 | <script>
  7 | export default {
  8 |   props: {
  9 |     size: {
 10 |       default: '40px'
 11 |     }
 12 |   },
 13 |   computed: {
 14 |     innerStyles () {
 15 |       let size = parseInt(this.size)
 16 |       return {
 17 |         transform: 'scale(' + (size / 60) + ')'
 18 |       }
 19 |     },
 20 |     styles () {
 21 |       let size = parseInt(this.size)
 22 |       return {
 23 |         width: this.size,
 24 |         height: size / 2 + 'px'
 25 |       }
 26 |     }
 27 |   }
 28 | }
 29 | </script>
 30 | <style lang="scss" scoped>
 31 |   .spinner{
 32 |     display: flex;
 33 |     justify-content: center;
 34 |     align-items: center;
 35 |     * {
 36 |       line-height: 0;
 37 |       box-sizing: border-box;
 38 |     }
 39 |   }
 40 |   .spinner-inner {
 41 |     width: 60px;
 42 |     height: 30px;
 43 |     flex-shrink: 0;
 44 |     background: #6ca;
 45 |     border-top-left-radius: 32px;
 46 |     border-top-right-radius: 32px;
 47 |     display: inline-block;
 48 |     overflow: hidden;
 49 |     position: relative;
 50 |     text-indent: -9999px;
 51 |   }
 52 |   .spinner-inner::before {
 53 |     animation: gauge-spinner 4000ms infinite ease;
 54 |     background: white;
 55 |     border-radius: 2px;
 56 |     content: '';
 57 |     position: absolute;
 58 |     left: 30px;
 59 |     top: 5.33333px;
 60 |     width: 4px;
 61 |     height: 26.66667px;
 62 |     transform-origin: 50% 100%;
 63 |   }
 64 |   .spinner-inner::after {
 65 |     content: '';
 66 |     background: white;
 67 |     border-radius: 8px;
 68 |     position: absolute;
 69 |     left: 25.6px;
 70 |     top: 25.6px;
 71 |     width: 12.8px;
 72 |     height: 12.8px;
 73 |   }
 74 |   @keyframes gauge-spinner {
 75 |     0% {
 76 |       transform: rotate(-50deg);
 77 |     }
 78 |     10% {
 79 |       transform: rotate(20deg);
 80 |     }
 81 |     20% {
 82 |       transform: rotate(60deg);
 83 |     }
 84 |     24% {
 85 |       transform: rotate(60deg);
 86 |     }
 87 |     40% {
 88 |       transform: rotate(-20deg);
 89 |     }
 90 |     54% {
 91 |       transform: rotate(70deg);
 92 |     }
 93 |     56% {
 94 |       transform: rotate(78deg);
 95 |     }
 96 |     58% {
 97 |       transform: rotate(73deg);
 98 |     }
 99 |     60% {
100 |       transform: rotate(75deg);
101 |     }
102 |     62% {
103 |       transform: rotate(70deg);
104 |     }
105 |     70% {
106 |       transform: rotate(-20deg);
107 |     }
108 |     80% {
109 |       transform: rotate(20deg);
110 |     }
111 |     83% {
112 |       transform: rotate(25deg);
113 |     }
114 |     86% {
115 |       transform: rotate(20deg);
116 |     }
117 |     89% {
118 |       transform: rotate(25deg);
119 |     }
120 |     100% {
121 |       transform: rotate(-50deg);
122 |     }
123 |   }
124 | </style>
125 | 


--------------------------------------------------------------------------------
/src/components/SquareGrid.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-bind:style="styles" class="spinner spinner--square-grid">
  3 |       <div v-bind:style='cubeStyles' class="sk-cube sk-cube1"></div>
  4 |       <div v-bind:style='cubeStyles' class="sk-cube sk-cube2"></div>
  5 |       <div v-bind:style='cubeStyles' class="sk-cube sk-cube3"></div>
  6 |       <div v-bind:style='cubeStyles' class="sk-cube sk-cube4"></div>
  7 |       <div v-bind:style='cubeStyles' class="sk-cube sk-cube5"></div>
  8 |       <div v-bind:style='cubeStyles' class="sk-cube sk-cube6"></div>
  9 |       <div v-bind:style='cubeStyles' class="sk-cube sk-cube7"></div>
 10 |       <div v-bind:style='cubeStyles' class="sk-cube sk-cube8"></div>
 11 |       <div v-bind:style='cubeStyles' class="sk-cube sk-cube9"></div>
 12 |     </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 |   props: {
 18 |     size: {
 19 |       default: '40px'
 20 |     },
 21 |     background: {
 22 |       default: '#41b883'
 23 |     },
 24 |     duration: {
 25 |       default: '1.3s'
 26 |     }
 27 |   },
 28 |   computed: {
 29 |     cubeStyles () {
 30 |       return {
 31 |         backgroundColor: this.background,
 32 |         animationDuration: this.duration
 33 |       }
 34 |     },
 35 |     styles () {
 36 |       return {
 37 |         width: this.size,
 38 |         height: this.size
 39 |       }
 40 |     }
 41 |   }
 42 | }
 43 | </script>
 44 | 
 45 | <style lang="scss" scoped>
 46 |   .spinner {
 47 |     display: inline-block;
 48 |     * {
 49 |       line-height: 0;
 50 |       box-sizing: border-box;
 51 |     }
 52 |   }
 53 | 
 54 |   .sk-cube {
 55 |     width: 33%;
 56 |     height: 33%;
 57 |     float: left;
 58 |     animation: sk-cubeGridScaleDelay 1.8s ease-in-out infinite;
 59 |   }
 60 | 
 61 |   .sk-cube1 {
 62 |     -webkit-animation-delay: 0.2s;
 63 |     animation-delay: 0.2s;
 64 |   }
 65 | 
 66 |   .sk-cube2 {
 67 |     -webkit-animation-delay: 0.3s;
 68 |     animation-delay: 0.3s;
 69 |   }
 70 | 
 71 |   .sk-cube3 {
 72 |     -webkit-animation-delay: 0.4s;
 73 |     animation-delay: 0.4s;
 74 |   }
 75 | 
 76 |   .sk-cube4 {
 77 |     -webkit-animation-delay: 0.1s;
 78 |     animation-delay: 0.1s;
 79 |   }
 80 | 
 81 |   .sk-cube5 {
 82 |     -webkit-animation-delay: 0.2s;
 83 |     animation-delay: 0.2s;
 84 |   }
 85 | 
 86 |   .sk-cube6 {
 87 |     -webkit-animation-delay: 0.3s;
 88 |     animation-delay: 0.3s;
 89 |   }
 90 | 
 91 |   .sk-cube7 {
 92 |     -webkit-animation-delay: 0s;
 93 |     animation-delay: 0s;
 94 |   }
 95 | 
 96 |   .sk-cube8 {
 97 |     -webkit-animation-delay: 0.1s;
 98 |     animation-delay: 0.1s;
 99 |   }
100 | 
101 |   .sk-cube9 {
102 |     -webkit-animation-delay: 0.2s;
103 |     animation-delay: 0.2s;
104 |   }
105 | 
106 |   @keyframes sk-cubeGridScaleDelay {
107 |     0%, 70%, 100% {
108 |       transform: scale3D(1, 1, 1);
109 |     }
110 |     35% {
111 |       transform: scale3D(0, 0, 1);
112 |     }
113 |   }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/components/HourGlass.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind:style="styles" class="spinner spinner--hour-glass">
 3 |     <div v-bind:style="innerStyles" class="spinner-inner">
 4 |       <svg class="hourglass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 206" preserveAspectRatio="none">
 5 |         <path class="middle" d="M120 0H0v206h120V0zM77.1 133.2C87.5 140.9 92 145 92 152.6V178H28v-25.4c0-7.6 4.5-11.7 14.9-19.4 6-4.5 13-9.6 17.1-17 4.1 7.4 11.1 12.6 17.1 17zM60 89.7c-4.1-7.3-11.1-12.5-17.1-17C32.5 65.1 28 61 28 53.4V28h64v25.4c0 7.6-4.5 11.7-14.9 19.4-6 4.4-13 9.6-17.1 16.9z"/>
 6 |         <path class="outer" d="M93.7 95.3c10.5-7.7 26.3-19.4 26.3-41.9V0H0v53.4c0 22.5 15.8 34.2 26.3 41.9 3 2.2 7.9 5.8 9 7.7-1.1 1.9-6 5.5-9 7.7C15.8 118.4 0 130.1 0 152.6V206h120v-53.4c0-22.5-15.8-34.2-26.3-41.9-3-2.2-7.9-5.8-9-7.7 1.1-2 6-5.5 9-7.7zM70.6 103c0 18 35.4 21.8 35.4 49.6V192H14v-39.4c0-27.9 35.4-31.6 35.4-49.6S14 81.2 14 53.4V14h92v39.4C106 81.2 70.6 85 70.6 103z"/>
 7 |       </svg>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   props: {
15 |     size: {
16 |       default: '40px'
17 |     },
18 |     color: {
19 |       default: '#41b883'
20 |     }
21 |   },
22 |   computed: {
23 |     innerStyles () {
24 |       let size = parseInt(this.size)
25 |       return {
26 |         transform: 'scale(' + (size / 64) + ')',
27 |         '--bg-color': this.color
28 |       }
29 |     },
30 |     styles () {
31 |       return {
32 |         width: this.size,
33 |         height: this.size
34 |       }
35 |     }
36 |   }
37 | }
38 | </script>
39 | 
40 | <style lang="scss" scoped>
41 |   $bg: #fff;
42 |   .spinner{
43 |     display: flex;
44 |     justify-content: center;
45 |     align-items: center;
46 |     * {
47 |       line-height: 0;
48 |       box-sizing: border-box;
49 |     }
50 |   }
51 |   .hourglass{
52 |     display:block;
53 |     background:$bg;
54 |     width:32px;
55 |     height:64px;
56 |     box-shadow:
57 |             inset $bg 0 0 0 0,
58 |             inset var(--bg-color) 0 32px 0 0,
59 |             inset $bg 0 0 64px 0;
60 |     animation:hourglass 1s linear infinite;
61 |   }
62 | 
63 |   .outer{
64 |     fill:var(--bg-color);
65 |   }
66 | 
67 |   .middle{
68 |     fill:$bg;
69 |   }
70 | 
71 |   @keyframes hourglass{
72 |     0%{
73 |       transform:rotate(0deg);
74 |       box-shadow:
75 |               inset $bg 0 0 0 0,
76 |               inset var(--bg-color) 0 32px 0 0,
77 |               inset $bg 0 64px 0 0,
78 |               inset var(--bg-color) 0 64px 0 0;
79 |     }
80 |     80%{
81 |       transform:rotate(0deg);
82 |       box-shadow:
83 |               inset $bg 0 32px 0 0,
84 |               inset var(--bg-color) 0 32px 0 0,
85 |               inset $bg 0 32px 0 0,
86 |               inset var(--bg-color) 0 64px 0 0;
87 |     }
88 |     100%{
89 |       transform:rotate(180deg);
90 |       box-shadow:
91 |               inset $bg 0 32px 0 0,
92 |               inset var(--bg-color) 0 32px 0 0,
93 |               inset $bg 0 32px 0 0,
94 |               inset var(--bg-color) 0 64px 0 0;
95 |     }
96 |   }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/components/Circle9.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--circle-9">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner">
  4 |       <div class='loading spin-1'>
  5 |         <div class='loading spin-2'>
  6 |           <div class='loading spin-3'>
  7 |             <div class='loading spin-4'>
  8 |               <div class='loading spin-5'>
  9 |                 <div class='loading spin-6'></div>
 10 |               </div>
 11 |             </div>
 12 |           </div>
 13 |         </div>
 14 |       </div>
 15 |     </div>
 16 |   </div>
 17 | </template>
 18 | <script>
 19 | export default {
 20 |   props: {
 21 |     size: {
 22 |       default: '40px'
 23 |     }
 24 |   },
 25 |   computed: {
 26 |     innerStyles () {
 27 |       let size = parseInt(this.size)
 28 |       return {
 29 |         transform: 'scale(' + (size / 120) + ')'
 30 |       }
 31 |     },
 32 |     styles () {
 33 |       return {
 34 |         width: this.size,
 35 |         height: this.size
 36 |       }
 37 |     }
 38 |   }
 39 | }
 40 | </script>
 41 | <style lang="scss" scoped>
 42 |   .spinner{
 43 |     display: flex;
 44 |     justify-content: center;
 45 |     align-items: center;
 46 |     * {
 47 |       line-height: 0;
 48 |       box-sizing: border-box;
 49 |     }
 50 |   }
 51 |   .spinner-inner
 52 |   {
 53 |     width: 120px;
 54 |     height: 120px;
 55 |   }
 56 |   @keyframes circle-9-loading {
 57 |     0% {
 58 |       transform: rotate(0deg);
 59 |     }
 60 |     25%{
 61 |       transform: rotate(160deg);
 62 |     }
 63 |     50%{
 64 |       transform: rotate(0deg);
 65 |     }
 66 |     75%{
 67 |       transform: rotate(160deg);
 68 |     }
 69 |     100% {
 70 |       transform: rotate(0deg);
 71 |     }
 72 |   }
 73 | 
 74 |   .loading {
 75 |     background-color: transparent;
 76 |     border-radius: 50%;
 77 |     margin: 5px auto;
 78 |     animation: circle-9-loading 5s infinite linear;
 79 |   }
 80 | 
 81 |   .spin-1{
 82 |     border: 5px solid #f7484e ;
 83 |     border-top: 5px solid transparent;
 84 |     border-left: 5px solid transparent;
 85 |     width: 120px;
 86 |     height: 120px;
 87 |   }
 88 |   .spin-2{
 89 |     border: 5px solid #41b883 ;
 90 |     border-top: 5px solid transparent;
 91 |     border-left: 5px solid transparent;
 92 |     width: 100px;
 93 |     height: 100px;
 94 |     animation-delay: 1s;
 95 |   }
 96 |   .spin-3{
 97 |     border: 5px solid #d2d947 ;
 98 |     border-top: 5px solid transparent;
 99 |     border-left: 5px solid transparent;
100 |     width: 80px;
101 |     height: 80px;
102 |     animation-delay: 1s;
103 |   }
104 |   .spin-4{
105 |     border: 5px solid #f2a342 ;
106 |     border-top: 5px solid transparent;
107 |     border-left: 5px solid transparent;
108 |     width: 60px;
109 |     height: 60px;
110 |     animation-delay: 1s;
111 |   }
112 |   .spin-5{
113 |     border: 5px solid #34495e ;
114 |     border-top: 5px solid transparent;
115 |     border-left: 5px solid transparent;
116 |     width: 40px;
117 |     height: 40px;
118 |     animation-delay: 1s;
119 |   }
120 |   .spin-6{
121 |     border: 5px solid #fff ;
122 |     width: 20px;
123 |     height: 20px;
124 |     animation-delay: 1s;
125 |   }
126 | 
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/ThreeDots.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner">
  3 |     <div v-bind:style="blobStyles" class="blob top"></div>
  4 |     <div v-bind:style="blobStyles" class="blob bottom"></div>
  5 |     <div v-bind:style="blobStyles" class="blob left"></div>
  6 |     <div v-bind:style="moveBlobStyles" class="blob move-blob"></div>
  7 |   </div>
  8 | </template>
  9 | <script>
 10 | export default {
 11 |   props: {
 12 |     size: {
 13 |       default: '40px'
 14 |     },
 15 |     color: {
 16 |       default: '#41b883'
 17 |     }
 18 |   },
 19 |   computed: {
 20 |     blobStyles () {
 21 |       return {
 22 |         borderColor: this.color
 23 |       }
 24 |     },
 25 |     moveBlobStyles () {
 26 |       return {
 27 |         borderColor: this.color,
 28 |         background: this.color
 29 |       }
 30 |     },
 31 |     styles () {
 32 |       return {
 33 |         width: this.size,
 34 |         height: this.size
 35 |       }
 36 |     }
 37 |   }
 38 | }
 39 | </script>
 40 | <style lang="scss" scoped>
 41 |   .spinner {
 42 |     position: relative;
 43 |     display: inline-block;
 44 |     box-sizing: border-box;
 45 |     * {
 46 |       line-height: 0;
 47 |       box-sizing: border-box;
 48 |     }
 49 |     .blob {
 50 |       box-sizing: border-box;
 51 |       position: absolute;
 52 |       top: 50%;
 53 |       left: 50%;
 54 |       transform: translate(-50%, -50%);
 55 |       border: 2px solid #41b883;
 56 |       width: 10px;
 57 |       height: 10px;
 58 |       border-radius: 50%;
 59 | 
 60 |       &.top {
 61 |         top: 0;
 62 |         transform: translate(-50%, 0);
 63 |         animation: blob-top 1s infinite ease-in;
 64 |       }
 65 |       &.bottom {
 66 |         top: 100%;
 67 |         transform: translate(-50%, -100%);
 68 |         animation: blob-bottom 1s infinite ease-in;
 69 |       }
 70 |       &.left {
 71 |         left: 0;
 72 |         transform: translate(0, -50%);
 73 |         animation: blob-left 1s infinite ease-in;
 74 |       }
 75 |     }
 76 | 
 77 |     .move-blob {
 78 |       top: 0;
 79 |       transform: translate(-50%, 0);
 80 |       animation: blob-spinner-mover 1s infinite ease-in;
 81 |     }
 82 |   }
 83 | 
 84 |   @keyframes blob-bottom {
 85 |     25%, 50%, 75% {
 86 |       top: 50%;
 87 |       left: 100%;
 88 |       transform: translate(-100%, -50%);
 89 |     }
 90 |     100% {
 91 |       top: 0;
 92 |       left: 50%;
 93 |       transform: translate(-50%, 0);
 94 |     }
 95 |   }
 96 |   @keyframes blob-left {
 97 |     25% {
 98 |       top: 50%;
 99 |       left: 0;
100 |       transform: translate(0, -50%);
101 |     }
102 |     50%, 100% {
103 |       top: 100%;
104 |       left: 50%;
105 |       transform: translate(-50%, -100%);
106 |     }
107 |   }
108 |   @keyframes blob-top {
109 |     50% {
110 |       top: 0;
111 |       left: 50%;
112 |       transform: translate(-50%, 0);
113 |     }
114 |     75%, 100% {
115 |       top: 50%;
116 |       left: 0;
117 |       transform: translate(0, -50%);
118 |     }
119 |   }
120 | 
121 |   @keyframes blob-spinner-mover {
122 |     0%, 100% {
123 |       top: 0;
124 |       left: 50%;
125 |       transform: translate(-50%, 0);
126 |     }
127 |     25% {
128 |       top: 50%;
129 |       left: 100%;
130 |       transform: translate(-100%, -50%);
131 |     }
132 |     50% {
133 |       top: 100%;
134 |       left: 50%;
135 |       transform: translate(-50%, -100%);
136 |     }
137 |     75% {
138 |       top: 50%;
139 |       left: 0;
140 |       transform: translate(0, -50%);
141 |     }
142 |   }
143 | </style>
144 | 


--------------------------------------------------------------------------------
/src/components/Origami.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner-origami">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner loading">
  4 |       <span class="slice"></span>
  5 |       <span class="slice"></span>
  6 |       <span class="slice"></span>
  7 |       <span class="slice"></span>
  8 |       <span class="slice"></span>
  9 |       <span class="slice"></span>
 10 |     </div>
 11 |   </div>
 12 | </template>
 13 | <script>
 14 | export default {
 15 |   props: {
 16 |     size: {
 17 |       default: '40px'
 18 |     },
 19 |     color: {
 20 |       default: '#41b883'
 21 |     },
 22 |     secondaryColor: {
 23 |       default: '#31855e'
 24 |     }
 25 |   },
 26 |   computed: {
 27 |     innerStyles () {
 28 |       let size = parseInt(this.size)
 29 |       return {
 30 |         transform: 'scale(' + (size / 60) + ')',
 31 |         '--bg-color': this.color,
 32 |         '--secondary-color': this.secondaryColor
 33 |       }
 34 |     },
 35 |     styles () {
 36 |       return {
 37 |         width: this.size,
 38 |         height: this.size
 39 |       }
 40 |     }
 41 |   }
 42 | }
 43 | </script>
 44 | <style lang="scss" scoped>
 45 |   @for $i from 1 through 6 {
 46 |     @keyframes origami-show-#{$i}{
 47 |       from{
 48 |         transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
 49 |         border-left-color: var(--secondary-color);
 50 |       }
 51 |     }
 52 |     @keyframes origami-hide-#{$i}{
 53 |       to{
 54 |         transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
 55 |         border-left-color: var(--secondary-color);
 56 |       }
 57 |     }
 58 | 
 59 |     @keyframes origami-cycle-#{$i}{
 60 | 
 61 |       $startIndex: $i*5;
 62 |       $reverseIndex: (80 - $i*5);
 63 | 
 64 |       #{$startIndex * 1%}{
 65 |         transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
 66 |         border-left-color: var(--secondary-color);
 67 |       }
 68 |       #{$startIndex + 5%},
 69 |       #{$reverseIndex * 1%}{
 70 |         transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
 71 |         border-left-color: var(--bg-color);
 72 |       }
 73 | 
 74 |       #{$reverseIndex + 5%},
 75 |       100%{
 76 |         transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
 77 |         border-left-color: var(--secondary-color);
 78 |       }
 79 |     }
 80 |   }
 81 | 
 82 |   .spinner{
 83 |     display: flex;
 84 |     justify-content: center;
 85 |     align-items: center;
 86 |     * {
 87 |       line-height: 0;
 88 |       box-sizing: border-box;
 89 |     }
 90 |   }
 91 |   .spinner-inner{
 92 |     display: block;
 93 |     width: 60px;
 94 |     height: 68px;
 95 |     .slice{
 96 |       border-top: 18px solid transparent;
 97 |       border-right: none;
 98 |       border-bottom: 16px solid transparent;
 99 |       border-left: 30px solid #f7484e;
100 |       position: absolute;
101 |       top: 0px;
102 |       left: 50%;
103 |       transform-origin: left bottom;
104 |       border-radius: 3px 3px 0 0;
105 |     }
106 | 
107 |     @for $i from 1 through 6 {
108 |       .slice:nth-child(#{$i}) {
109 |         transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
110 |         animation: .15s linear .9 - $i*.08s origami-hide-#{$i} both 1;
111 |       }
112 |     }
113 | 
114 | 
115 |     &.loading{
116 |       @for $i from 1 through 6 {
117 |         .slice:nth-child(#{$i}) {
118 |           transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
119 |           animation: 2s origami-cycle-#{$i} linear infinite both;
120 |         }
121 |       }
122 |     }
123 | 
124 |   }
125 | </style>
126 | 


--------------------------------------------------------------------------------
/src/components/LetterCube.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--socker">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner">
  4 |       <div class="cube panelLoad">
  5 |         <div v-for="{side, letter} of faces" :key="side" :class="`cube-face cube-face-${side}`">{{ letter }}</div>
  6 |       </div>
  7 |     </div>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | export default {
 13 |   props: {
 14 |     size: {
 15 |       default: '40px'
 16 |     },
 17 |     letters: {
 18 |       type: Array,
 19 |       default: () => ['A', 'E', 'G', 'O', 'N', 'P'],
 20 |       validator: letters => letters.length === 6
 21 |     },
 22 |     color: {
 23 |       default: '#41b883'
 24 |     }
 25 |   },
 26 |   computed: {
 27 |     innerStyles () {
 28 |       let size = parseInt(this.size) / 2
 29 |       return {
 30 |         transform: 'scale(' + (size / 75) + ')',
 31 |         '--bg-color': this.color
 32 |       }
 33 |     },
 34 |     styles () {
 35 |       return {
 36 |         width: this.size,
 37 |         height: this.size
 38 |       }
 39 |     },
 40 |     faces () {
 41 |       const faces = ['front', 'back', 'left', 'right', 'bottom', 'top']
 42 | 
 43 |       return faces.map((face, index) => ({
 44 |         side: face,
 45 |         letter: this.letters[index]
 46 |       }))
 47 |     }
 48 |   }
 49 | }
 50 | </script>
 51 | 
 52 | <style lang="scss" scoped>
 53 |   .spinner{
 54 |     overflow: hidden;
 55 |     display: flex;
 56 |     justify-content: center;
 57 |     align-items: center;
 58 |     * {
 59 |       box-sizing: border-box;
 60 |     }
 61 |   }
 62 |   .cube {
 63 |     width: 80px;
 64 |     height: 80px;
 65 |     line-height: 80px;
 66 |     text-align: center;
 67 |     transform-style: preserve-3d;
 68 |     transition: transform 0.5s 0.1s;
 69 |     perspective: 9999px;
 70 |     color: #333;
 71 |     opacity: 1;
 72 |     position: relative;
 73 |     &.panelLoad {
 74 |       z-index: 11;
 75 |       top: 50%;
 76 |       animation: letter-cube-panel 2.2s infinite forwards;
 77 |       .cube-face {
 78 |         font-family: "Open Sans",sans-serif;
 79 |         font-size: 50px;
 80 |         color: var(--bg-color);
 81 |         box-shadow: inset 0 0 0 1px var(--bg-color), 0 0 1px 1px var(--bg-color);
 82 |       }
 83 |     }
 84 |     .cube-face {
 85 |       width: inherit;
 86 |       height: inherit;
 87 |       position: absolute;
 88 |       background: white;
 89 |       box-shadow: inset 0 0 0 1px #333, 0 0 1px 1px #333;
 90 |       opacity: 1;
 91 |     }
 92 |     .cube-face-front {
 93 |       transform: translate3d(0, 0, 40px);
 94 |       font-size: 57px;
 95 |     }
 96 |     .cube-face-back {
 97 |       transform: rotateY(180deg) translate3d(0, 0, 40px);
 98 |     }
 99 |     .cube-face-left {
100 |       transform: rotateY(-90deg) translate3d(0, 0, 40px);
101 |     }
102 |     .cube-face-right {
103 |       transform: rotateY(90deg) translate3d(0, 0, 40px);
104 |     }
105 |     .cube-face-top {
106 |       transform: rotateX(90deg) translate3d(0, 0, 40px);
107 |     }
108 |     .cube-face-bottom {
109 |       transform: rotateX(-90deg) translate3d(0, 0, 40px);
110 |     }
111 |   }
112 |   @keyframes letter-cube-panel {
113 |     0% {
114 |       transform: rotateY(0deg) rotateZ(0deg);
115 |     }
116 |     20% {
117 |       transform: rotateY(90deg) rotateZ(0deg);
118 |     }
119 |     40% {
120 |       transform: rotateX(45deg) rotateZ(45deg);
121 |     }
122 |     60% {
123 |       transform: rotateX(90deg) rotateY(180deg) rotateX(90deg);
124 |     }
125 |     80% {
126 |       transform: rotateX(310deg) rotateZ(230deg)
127 |     }
128 |     100% {
129 |       transform: rotateX(360deg) rotateZ(360deg)
130 |     }
131 |   }
132 | </style>
133 | 


--------------------------------------------------------------------------------
/src/components/RotateSquare3.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <svg  v-bind:style="styles" class="spinner spinner--cube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.00001 500.00001">
  3 |       <g :fill="color">
  4 |         <path class="b0" d="M66.734 66.734v366.533h366.532V66.734H66.734zm15 15h336.532v336.533H81.734V81.734z">
  5 |         </path>
  6 |         <path class="b2" d="M354.16 2.5v143.34H497.5V2.5H354.16zm10 10H487.5v123.34H364.16V12.5z">
  7 |         </path>
  8 |         <path class="b1" d="M0 2.5v143.34h143.34V2.5H0zm10 10h123.34v123.34H10V12.5z">
  9 |         </path>
 10 |         <path class="b3" d="M354.16 356.66V500H497.5V356.66H354.16zm10 10H487.5V490H364.16V366.66z">
 11 |         </path>
 12 |         <path class="b4" d="M0 356.66V500h143.34V356.66H0zm10 10h123.34V490H10V366.66z">
 13 |         </path>
 14 |       </g>
 15 |     </svg>
 16 | </template>
 17 | 
 18 | <script>
 19 | export default {
 20 |   props: {
 21 |     size: {
 22 |       default: '40px'
 23 |     },
 24 |     color: {
 25 |       default: '#41b883'
 26 |     }
 27 |   },
 28 |   computed: {
 29 |     styles () {
 30 |       return {
 31 |         width: this.size,
 32 |         height: this.size
 33 |       }
 34 |     }
 35 |   }
 36 | }
 37 | </script>
 38 | 
 39 | <style lang="scss" scoped>
 40 |   .spinner {
 41 |     height: 40px;
 42 |     width: 40px;
 43 |     * {
 44 |       line-height: 0;
 45 |       box-sizing: border-box;
 46 |     }
 47 |   }
 48 | 
 49 |   .b0 {
 50 |     animation: rotate-square-3-b0 4s infinite ease;
 51 |     transform-origin: 250px 250px;
 52 |   }
 53 | 
 54 |   .b1 {
 55 |     animation: rotate-square-3-b1 4s infinite ease;
 56 |   }
 57 | 
 58 |   .b2 {
 59 |     animation: rotate-square-3-b2 4s infinite ease;
 60 |   }
 61 | 
 62 |   .b3 {
 63 |     animation: rotate-square-3-b3 4s infinite ease;
 64 |   }
 65 | 
 66 |   .b4 {
 67 |     animation: rotate-square-3-b4 4s infinite ease;
 68 |   }
 69 | 
 70 |   @keyframes rotate-square-3-b0 {
 71 |     0% {
 72 |       transform: rotate(0);
 73 |     }
 74 | 
 75 |     25% {
 76 |       transform: rotate(-90deg);
 77 |     }
 78 | 
 79 |     50% {
 80 |       transform: rotate(-180deg);
 81 |     }
 82 | 
 83 |     75% {
 84 |       transform: rotate(-270deg);
 85 |     }
 86 | 
 87 |     100% {
 88 |       transform: rotate(-360deg);
 89 |     }
 90 |   }
 91 | 
 92 |   @keyframes rotate-square-3-b1 {
 93 |     0% {
 94 |       transform: translate(0, 0);
 95 |     }
 96 | 
 97 |     25% {
 98 |       transform: translate(0, 355px);
 99 |     }
100 | 
101 |     50% {
102 |       transform: translate(355px, 355px);
103 |     }
104 | 
105 |     75% {
106 |       transform: translate(355px, 0);
107 |     }
108 | 
109 |     100% {
110 |       transform: translate(0, 0);
111 |     }
112 |   }
113 | 
114 |   @keyframes rotate-square-3-b2 {
115 |     0% {
116 |       transform: translate(0, 0);
117 |     }
118 | 
119 |     25% {
120 |       transform: translate(-355px, 0);
121 |     }
122 | 
123 |     50% {
124 |       transform: translate(-355px, 355px);
125 |     }
126 | 
127 |     75% {
128 |       transform: translate(0, 355px);
129 |     }
130 | 
131 |     100% {
132 |       transform: translate(0, 0);
133 |     }
134 |   }
135 | 
136 |   @keyframes rotate-square-3-b3 {
137 |     0% {
138 |       transform: translate(0, 0);
139 |     }
140 | 
141 |     25% {
142 |       transform: translate(0, -355px);
143 |     }
144 | 
145 |     50% {
146 |       transform: translate(-355px, -355px);
147 |     }
148 | 
149 |     75% {
150 |       transform: translate(-355px, 0);
151 |     }
152 | 
153 |     100% {
154 |       transform: translate(0, 0);
155 |     }
156 |   }
157 | 
158 |   @keyframes rotate-square-3-b4 {
159 |     0% {
160 |       transform: translate(0, 0);
161 |     }
162 | 
163 |     25% {
164 |       transform: translate(355px, 0);
165 |     }
166 | 
167 |     50% {
168 |       transform: translate(355px, -355px);
169 |     }
170 | 
171 |     75% {
172 |       transform: translate(0, -355px);
173 |     }
174 | 
175 |     100% {
176 |       transform: translate(0, 0);
177 |     }
178 |   }
179 | </style>
180 | 


--------------------------------------------------------------------------------
/src/components/Plane.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--plane">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner">
  4 |       <div id="top" class="mask">
  5 |         <div class="plane"></div>
  6 |       </div>
  7 |       <div id="middle" class="mask">
  8 |         <div class="plane"></div>
  9 |       </div>
 10 | 
 11 |       <div id="bottom" class="mask">
 12 |         <div class="plane"></div>
 13 |       </div>
 14 |     </div>
 15 |   </div>
 16 | </template>
 17 | <script>
 18 | export default {
 19 |   props: {
 20 |     size: {
 21 |       default: '40px'
 22 |     },
 23 |     color: {
 24 |       default: '#41b883'
 25 |     },
 26 |     secondaryColor: {
 27 |       default: '#32855f'
 28 |     }
 29 |   },
 30 |   computed: {
 31 |     innerStyles () {
 32 |       let size = parseInt(this.size)
 33 |       return {
 34 |         width: size + 'px',
 35 |         height: this.size,
 36 |         transform: 'scale(' + (size / 70) + ')',
 37 |         '--bg-color': this.color,
 38 |         '--secondary-color': this.secondaryColor
 39 |       }
 40 |     },
 41 |     styles () {
 42 |       let size = parseInt(this.size)
 43 |       return {
 44 |         width: size + 'px',
 45 |         height: this.size
 46 |       }
 47 |     }
 48 |   }
 49 | }
 50 | </script>
 51 | <style lang="scss" scoped>
 52 |   .spinner{
 53 |     position:relative;
 54 |     cursor:pointer;
 55 |     display: flex;
 56 |     justify-content: center;
 57 |     align-items: center;
 58 |     * {
 59 |       line-height: 0;
 60 |       box-sizing: border-box;
 61 |     }
 62 |   }
 63 |   .mask{
 64 |     position:absolute;
 65 |     border-radius:2px;
 66 |     overflow:hidden;
 67 |     perspective: 1000;
 68 |     backface-visibility: hidden;
 69 |   }
 70 | 
 71 |   .plane{
 72 |     background:var(--bg-color);
 73 |     width:400%;
 74 |     height:100%;
 75 |     position:absolute;
 76 |     transform : translate3d(0px,0,0);
 77 |     z-index:100;
 78 |     perspective: 1000;
 79 |     backface-visibility: hidden;
 80 | 
 81 |   }
 82 | 
 83 |   .animation{
 84 |     transition: all 0.3s ease;
 85 |   }
 86 | 
 87 | 
 88 | 
 89 |   #top .plane{
 90 |     z-index:2000;
 91 |     animation : trans1 1.3s ease-in infinite  0s backwards;
 92 |   }
 93 |   #middle .plane{
 94 |     transform : translate3d(0px,0,0);
 95 |     background : var(--secondary-color);
 96 |     animation : trans2 1.3s linear infinite  0.3s  backwards;
 97 | 
 98 |   }
 99 |   #bottom .plane{
100 |     z-index:2000;
101 |     animation : trans3 1.3s ease-out infinite  0.7s backwards;
102 |   }
103 | 
104 | 
105 | 
106 |   #top{
107 |     width:53px;
108 |     height:20px;
109 |     left:20px;
110 |     top:5px;
111 |     transform: skew(-15deg, 0);
112 |     z-index:100;
113 |   }
114 | 
115 |   #middle{
116 |     width:33px;
117 |     height:20px;
118 |     left:20px;
119 |     top:21px;
120 | 
121 |     transform: skew(-15deg, 40deg)
122 |   }
123 |   #bottom{
124 |     width:53px;
125 |     height:20px;
126 |     top:35px;
127 |     transform: skew(-15deg, 0)
128 |   }
129 | 
130 |   p{
131 |     color:#fff;
132 |     position:absolute;
133 |     left: -3px;
134 |     top:45px;
135 |     font-family:Arial;
136 |     text-align:center;
137 |     font-size:10px;
138 |   }
139 | 
140 |   @keyframes trans1{
141 |     from {
142 |       transform : translate3d(53px,0,0)
143 |     }
144 |     to {
145 |       transform : translate3d(-250px,0,0)
146 |     }
147 |   }
148 | 
149 |   @keyframes trans2{
150 |     from {
151 |       transform : translate3d(-160px,0,0)
152 |     }
153 |     to {
154 |       transform : translate3d(53px,0,0)
155 |     }
156 |   }
157 | 
158 |   @keyframes trans3{
159 |     from {
160 |       transform : translate3d(53px,0,0)
161 |     }
162 |     to {
163 |       transform : translate3d(-220px,0,0)
164 |     }
165 |   }
166 | 
167 |   @keyframes animColor{
168 |     from {
169 |       background : red;
170 |     }
171 |     25%{
172 |       background : yellow;
173 |     }
174 |     50%{
175 |       background : green;
176 |     }
177 |     75%{
178 |       background : brown;
179 |     }
180 |     to {
181 |       background : blue;
182 |     }
183 |   }
184 | </style>
185 | 


--------------------------------------------------------------------------------
/src/components/RotateSquare5.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--rotate-square-5">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner">
  4 |       <span class="load3 one"></span>
  5 |       <span class="load3 two"></span>
  6 |       <span class="load3-center"></span>
  7 |     </div>
  8 |   </div>
  9 | </template>
 10 | <script>
 11 | export default {
 12 |   props: {
 13 |     size: {
 14 |       default: '40px'
 15 |     },
 16 |     color: {
 17 |       default: '#41b883'
 18 |     }
 19 |   },
 20 |   computed: {
 21 |     innerStyles () {
 22 |       let size = parseInt(this.size)
 23 |       return {
 24 |         transform: 'scale(' + (size / 80) + ')',
 25 |         '--bg-color': this.color
 26 |       }
 27 |     },
 28 |     styles () {
 29 |       return {
 30 |         width: this.size,
 31 |         height: this.size
 32 |       }
 33 |     }
 34 |   }
 35 | }
 36 | </script>
 37 | <style lang="scss" scoped>
 38 |   .spinner{
 39 |     display: flex;
 40 |     justify-content: center;
 41 |     align-items: center;
 42 |     line-height: 0;
 43 |     * {
 44 |       line-height: 0;
 45 |       box-sizing: border-box;
 46 |     }
 47 |   }
 48 |   .spinner-inner{
 49 |     position: relative;
 50 |     width: 75px;
 51 |     height: 75px;
 52 |   }
 53 |   .load3-center {
 54 |     display: inline-block;
 55 |     position: absolute;
 56 |     background: var(--bg-color);
 57 |     transform: rotate(45deg);
 58 |     height: 30px;
 59 |     width: 30px;
 60 |     left: 23px;
 61 |     top: 23px;
 62 |     border-radius: 3px;
 63 |     animation: rotate-square-5-pulse 1s ease infinite;
 64 |   }
 65 | 
 66 |   .load3 {
 67 |     display: inline-block;
 68 |     position: relative;
 69 |     width: 75px;
 70 |     height: 75px;
 71 |     transform: rotate(45deg);
 72 |     &:after, &:before {
 73 |       position: absolute;
 74 |       content: '';
 75 |       height: 10px;
 76 |       width: 10px;
 77 |       display: block;
 78 |       top: 0;
 79 |       border-radius: 3px;
 80 |       background: var(--bg-color);
 81 |       animation-delay: -.5s;
 82 |     }
 83 | 
 84 |     &:after {
 85 |       right: 0;
 86 |       animation: rotate-square-5-square-tr 2s ease infinite;
 87 |       animation-delay: .125s;
 88 |     }
 89 | 
 90 |     &:before {
 91 |       animation: rotate-square-5-square-tl 2s ease infinite;
 92 |       animation-delay: .125s;
 93 |     }
 94 |   }
 95 | 
 96 |   .load3.two {
 97 |     position: relative;
 98 |     top: -75px;
 99 | 
100 |     &:after, &:before {
101 |       bottom: 0;
102 |       top: initial;
103 |     }
104 | 
105 |     &:after {
106 |       animation: rotate-square-5-square-br 2s ease infinite;
107 |       animation-direction: reverse;
108 |     }
109 | 
110 |     &:before {
111 |       animation: rotate-square-5-square-bl 2s ease infinite;
112 |       animation-direction: reverse;
113 |     }
114 | 
115 |   }
116 | 
117 |   @keyframes rotate-square-5-square-tl {
118 |     0% {
119 |       transform: translate(0, 0);
120 |     }
121 |     25% {
122 |       transform: translate(0, 62.5px);
123 |     }
124 |     50% {
125 |       transform: translate(62.5px, 62.5px);
126 |     }
127 |     75% {
128 |       transform: translate(62.5px, 0);
129 |     }
130 |   }
131 | 
132 |   @keyframes rotate-square-5-square-bl {
133 |     0% {
134 |       transform: translate(0, 0);
135 |     }
136 |     25% {
137 |       transform: translate(0, -62.5px);
138 |     }
139 |     50% {
140 |       transform: translate(62.5px, -62.5px);
141 |     }
142 |     75% {
143 |       transform: translate(62.5px, 0);
144 |     }
145 |   }
146 | 
147 |   @keyframes rotate-square-5-square-tr {
148 |     0% {
149 |       transform: translate(0, 0);
150 |     }
151 |     25% {
152 |       transform: translate(-62.5px, 0);
153 |     }
154 |     50% {
155 |       transform: translate(-62.5px, 62.5px);
156 |     }
157 |     75% {
158 |       transform: translate(0, 62.5px);
159 |     }
160 |   }
161 | 
162 |   @keyframes rotate-square-5-square-br {
163 |     0% {
164 |       transform: translate(0, 0);
165 |     }
166 |     25% {
167 |       transform: translate(-62.5px, 0);
168 |     }
169 |     50% {
170 |       transform: translate(-62.5px, -62.5px);
171 |     }
172 |     75% {
173 |       transform: translate(0, -62.5px);
174 |     }
175 |   }
176 | 
177 |   @keyframes rotate-square-5-pulse {
178 |     0%, 100% {
179 |       transform: scale(1) rotate(45deg);
180 |     }
181 |     75% {
182 |       transform: scale(.25) rotate(45deg)
183 |     }
184 |   }
185 | </style>
186 | 


--------------------------------------------------------------------------------
/src/components/Google.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--google"></div>
  3 | </template>
  4 | <script>
  5 | export default {
  6 |   props: {
  7 |     size: {
  8 |       default: '40px'
  9 |     }
 10 |   },
 11 |   computed: {
 12 |     styles () {
 13 |       return {
 14 |         width: this.size,
 15 |         height: this.size
 16 |       }
 17 |     }
 18 |   }
 19 | }
 20 | </script>
 21 | <style lang="scss" scoped>
 22 |   .spinner {
 23 |     overflow: hidden;
 24 |     position: relative;
 25 |     text-indent: -9999px;
 26 |     display: inline-block;
 27 |     background: #f86;
 28 |     border-radius: 50%;
 29 |     transform: rotateZ(90deg);
 30 |     transform-origin: 50% 50%;
 31 |     animation: plus-loader-background 3s infinite ease-in-out;
 32 |   }
 33 |   .spinner::after {
 34 |     background: #f86;
 35 |     border-radius: 50% 0 0 50%;
 36 |     content: '';
 37 |     position: absolute;
 38 |     right: 50%;
 39 |     top: 0;
 40 |     width: 50%;
 41 |     height: 100%;
 42 |     transform-origin: 100% 50%;
 43 |     animation: plus-loader-top 3s infinite linear;
 44 |   }
 45 |   .spinner::before {
 46 |     background: #fc6;
 47 |     border-radius: 50% 0 0 50%;
 48 |     content: '';
 49 |     position: absolute;
 50 |     right: 50%;
 51 |     top: 0;
 52 |     width: 50%;
 53 |     height: 100%;
 54 |     transform-origin: 100% 50%;
 55 |     animation: plus-loader-bottom 3s infinite linear;
 56 |   }
 57 |   @keyframes plus-loader-top {
 58 |     2.5% {
 59 |       background: #f86;
 60 |       transform: rotateY(0deg);
 61 |       animation-timing-function: ease-in;
 62 |     }
 63 |     13.75% {
 64 |       background: #ff430d;
 65 |       transform: rotateY(90deg);
 66 |       animation-timing-function: step-start;
 67 |     }
 68 |     13.76% {
 69 |       background: #ffae0d;
 70 |       transform: rotateY(90deg);
 71 |       animation-timing-function: ease-out;
 72 |     }
 73 |     25% {
 74 |       background: #fc6;
 75 |       transform: rotateY(180deg);
 76 |     }
 77 |     27.5% {
 78 |       background: #fc6;
 79 |       transform: rotateY(180deg);
 80 |       animation-timing-function: ease-in;
 81 |     }
 82 |     41.25% {
 83 |       background: #ffae0d;
 84 |       transform: rotateY(90deg);
 85 |       animation-timing-function: step-start;
 86 |     }
 87 |     41.26% {
 88 |       background: #2cc642;
 89 |       transform: rotateY(90deg);
 90 |       animation-timing-function: ease-out;
 91 |     }
 92 |     50% {
 93 |       background: #6d7;
 94 |       transform: rotateY(0deg);
 95 |     }
 96 |     52.5% {
 97 |       background: #6d7;
 98 |       transform: rotateY(0deg);
 99 |       animation-timing-function: ease-in;
100 |     }
101 |     63.75% {
102 |       background: #2cc642;
103 |       transform: rotateY(90deg);
104 |       animation-timing-function: step-start;
105 |     }
106 |     63.76% {
107 |       background: #1386d2;
108 |       transform: rotateY(90deg);
109 |       animation-timing-function: ease-out;
110 |     }
111 |     75% {
112 |       background: #4ae;
113 |       transform: rotateY(180deg);
114 |     }
115 |     77.5% {
116 |       background: #4ae;
117 |       transform: rotateY(180deg);
118 |       animation-timing-function: ease-in;
119 |     }
120 |     91.25% {
121 |       background: #1386d2;
122 |       transform: rotateY(90deg);
123 |       animation-timing-function: step-start;
124 |     }
125 |     91.26% {
126 |       background: #ff430d;
127 |       transform: rotateY(90deg);
128 |       animation-timing-function: ease-in;
129 |     }
130 |     100% {
131 |       background: #f86;
132 |       transform: rotateY(0deg);
133 |       animation-timing-function: step-start;
134 |     }
135 |   }
136 |   @keyframes plus-loader-bottom {
137 |     0% {
138 |       background: #fc6;
139 |       animation-timing-function: step-start;
140 |     }
141 |     50% {
142 |       background: #fc6;
143 |       animation-timing-function: step-start;
144 |     }
145 |     75% {
146 |       background: #4ae;
147 |       animation-timing-function: step-start;
148 |     }
149 |     100% {
150 |       background: #4ae;
151 |       animation-timing-function: step-start;
152 |     }
153 |   }
154 |   @keyframes plus-loader-background {
155 |     0% {
156 |       background: #f86;
157 |       transform: rotateZ(180deg);
158 |     }
159 |     25% {
160 |       background: #f86;
161 |       transform: rotateZ(180deg);
162 |       animation-timing-function: step-start;
163 |     }
164 |     27.5% {
165 |       background: #6d7;
166 |       transform: rotateZ(90deg);
167 |     }
168 |     50% {
169 |       background: #6d7;
170 |       transform: rotateZ(90deg);
171 |       animation-timing-function: step-start;
172 |     }
173 |     52.5% {
174 |       background: #6d7;
175 |       transform: rotateZ(0deg);
176 |     }
177 |     75% {
178 |       background: #6d7;
179 |       transform: rotateZ(0deg);
180 |       animation-timing-function: step-start;
181 |     }
182 |     77.5% {
183 |       background: #f86;
184 |       transform: rotateZ(270deg);
185 |     }
186 |     100% {
187 |       background: #f86;
188 |       transform: rotateZ(270deg);
189 |       animation-timing-function: step-start;
190 |     }
191 |   }
192 | </style>
193 | 


--------------------------------------------------------------------------------
/src/components/Hexagon.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--hexagon">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner">
  4 |       <ul class="hexagon-container">
  5 |         <li class="hexagon hex_1"></li>
  6 |         <li class="hexagon hex_2"></li>
  7 |         <li class="hexagon hex_3"></li>
  8 |         <li class="hexagon hex_4"></li>
  9 |         <li class="hexagon hex_5"></li>
 10 |         <li class="hexagon hex_6"></li>
 11 |         <li class="hexagon hex_7"></li>
 12 |       </ul>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | export default {
 19 |   props: {
 20 |     size: {
 21 |       default: '40px'
 22 |     },
 23 |     color: {
 24 |       default: '#41b883'
 25 |     },
 26 |     spinnerColor: {
 27 |       default: '#41b883'
 28 |     }
 29 |   },
 30 |   computed: {
 31 |     innerStyles () {
 32 |       let size = parseInt(this.size)
 33 |       return {
 34 |         transform: 'scale(' + (size / 164) + ')',
 35 |         '--bg-color': this.color,
 36 |         '--spinner-color': this.spinnerColor
 37 |       }
 38 |     },
 39 |     styles () {
 40 |       return {
 41 |         width: this.size,
 42 |         height: this.size
 43 |       }
 44 |     }
 45 |   }
 46 | }
 47 | </script>
 48 | 
 49 | <style lang="scss" scoped>
 50 |   .spinner{
 51 |     overflow: hidden;
 52 |   }
 53 |   .spinner-inner {
 54 |     position: relative;
 55 |     width: 160px;
 56 |     height: 160px;
 57 |     background-color: transparent;
 58 |     border-radius: 50%;
 59 |     border: 2px solid #a5a69e;
 60 |     transform-origin: top left;
 61 |     display: block;
 62 |     &:before {
 63 |       content: '';
 64 |       width: 164px;
 65 |       height: 164px;
 66 |       display: block;
 67 |       position: absolute;
 68 |       border: 7px solid var(--spinner-color);
 69 |       border-radius: 50%;
 70 |       top: -2px;
 71 |       left: -2px;
 72 |       box-sizing: border-box;
 73 |       // border-bottom-color: transparent;
 74 |       // border-left-color: transparent;
 75 |       // border-right-color: transparent;
 76 |       clip: rect(0px, 35px, 35px, 0px);
 77 |       z-index: 10;
 78 |       animation: hexagon-rotate infinite;
 79 |       animation-duration: 3s;
 80 |       animation-timing-function: linear;
 81 |     }
 82 |     &:after {
 83 |       content: '';
 84 |       width: 164px;
 85 |       height: 164px;
 86 |       display: block;
 87 |       position: absolute;
 88 |       border: 2px solid #c1bebb;
 89 |       border-radius: 50%;
 90 |       top: -2px;
 91 |       left: -2px;
 92 |       box-sizing: border-box;
 93 |       // transform: hexagon-rotate(30deg);
 94 |       // border-bottom-color: transparent;
 95 |       // border-left-color: transparent;
 96 |       // border-right-color: transparent;
 97 |       clip: rect(0px, 164px, 150px, 0px);
 98 |       z-index: 9;
 99 |       // animation: hexagon-rotate2 infinite, hexagon-rotate3 infinite;
100 |       // animation-duration: 3s;
101 |       // animation-timing-function: linner;
102 |       animation: hexagon-rotate2 3s linear infinite;
103 |     }
104 |   }
105 | 
106 |   .hexagon-container {
107 |     list-style: none;
108 |     margin: 0;
109 |     padding: 0;
110 |     position: relative;
111 |     top: 33px;
112 |     left: 41px;
113 |     border-radius: 50%;
114 |   }
115 | 
116 |   .hexagon {
117 |     position: absolute;
118 |     width: 40px;
119 |     height: 23px;
120 |     background-color: var(--bg-color);
121 |     &:before {
122 |       content: "";
123 |       position: absolute;
124 |       top: -11px;
125 |       left: 0;
126 |       width: 0;
127 |       height: 0;
128 |       border-left: 20px solid transparent;
129 |       border-right: 20px solid transparent;
130 |       border-bottom: 11.5px solid var(--bg-color);
131 |     }
132 |     &:after {
133 |       content: "";
134 |       position: absolute;
135 |       top: 23px;
136 |       left: 0;
137 |       width: 0;
138 |       height: 0;
139 |       border-left: 20px solid transparent;
140 |       border-right: 20px solid transparent;
141 |       border-top: 11.5px solid var(--bg-color);
142 |     }
143 |   }
144 | 
145 |   @each $index,
146 |   $top,
147 |   $left in (1, 0px, 0px),
148 |           (2, 0px, 42px),
149 |           (3, 36px, 63px),
150 |           (4, 72px, 42px),
151 |           (5, 72px, 0px),
152 |           (6, 36px, -21px),
153 |           (7, 36px, 21px) {
154 |     $time: 3s; // thx to @zeakd for this formula
155 |     $delay: $time / 14;
156 |     .hexagon.hex_#{$index} {
157 |       top: $top;
158 |       left: $left;
159 |       //cubic-bezier(.155,1.105,.295,1.12)
160 |       animation: hexagon-Animasearch $time ease-in-out infinite;
161 |       animation-delay: $delay*$index;
162 |     }
163 |   }
164 | 
165 |   @keyframes hexagon-Animasearch {
166 |     0% {
167 |       transform: scale(1);
168 |       opacity: 1;
169 |     }
170 |     15%,
171 |     50% {
172 |       transform: scale(0.5);
173 |       opacity: 0;
174 |     }
175 |     65% {
176 |       transform: scale(1);
177 |       opacity: 1;
178 |     }
179 |   }
180 | 
181 |   @keyframes hexagon-rotate {
182 |     0% {
183 |       transform: rotate(0);
184 |       clip: rect(0px, 35px, 35px, 0px);
185 |     }
186 |     50% {
187 |       clip: rect(0px, 40px, 40px, 0px);
188 |     }
189 |     100% {
190 |       transform: rotate(360deg);
191 |       clip: rect(0px, 35px, 35px, 0px);
192 |     }
193 |   }
194 | 
195 |   @keyframes hexagon-rotate2 {
196 |     0% {
197 |       transform: rotate(0deg);
198 |       clip: rect(0px, 164px, 150px, 0px);
199 |     }
200 |     50% {
201 |       clip: rect(0px, 164px, 0px, 0px);
202 |       transform: rotate(360deg);
203 |     }
204 |     100% {
205 |       transform: rotate(720deg);
206 |       clip: rect(0px, 164px, 150px, 0px);
207 |     }
208 |   }
209 | 
210 |   @keyframes hexagon-rotate3 {
211 |     0% {
212 |       transform: rotate(0deg);
213 |     }
214 |     100% {
215 |       transform: rotate(360deg);
216 |     }
217 |   }
218 | </style>
219 | 


--------------------------------------------------------------------------------
/src/components/Socket.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-bind:style="styles" class="spinner spinner--socker">
  3 |     <div v-bind:style="innerStyles" class="spinner-inner">
  4 |       <div class="gel center-gel">
  5 |         <div class="hex-brick h1"></div>
  6 |         <div class="hex-brick h2"></div>
  7 |         <div class="hex-brick h3"></div>
  8 |       </div>
  9 |       <div class="gel c1 r1">
 10 |         <div class="hex-brick h1"></div>
 11 |         <div class="hex-brick h2"></div>
 12 |         <div class="hex-brick h3"></div>
 13 |       </div>
 14 |       <div class="gel c2 r1">
 15 |         <div class="hex-brick h1"></div>
 16 |         <div class="hex-brick h2"></div>
 17 |         <div class="hex-brick h3"></div>
 18 |       </div>
 19 |       <div class="gel c3 r1">
 20 |         <div class="hex-brick h1"></div>
 21 |         <div class="hex-brick h2"></div>
 22 |         <div class="hex-brick h3"></div>
 23 |       </div>
 24 |       <div class="gel c4 r1">
 25 |         <div class="hex-brick h1"></div>
 26 |         <div class="hex-brick h2"></div>
 27 |         <div class="hex-brick h3"></div>
 28 |       </div>
 29 |       <div class="gel c5 r1">
 30 |         <div class="hex-brick h1"></div>
 31 |         <div class="hex-brick h2"></div>
 32 |         <div class="hex-brick h3"></div>
 33 |       </div>
 34 |       <div class="gel c6 r1">
 35 |         <div class="hex-brick h1"></div>
 36 |         <div class="hex-brick h2"></div>
 37 |         <div class="hex-brick h3"></div>
 38 |       </div>
 39 | 
 40 |       <div class="gel c7 r2">
 41 |         <div class="hex-brick h1"></div>
 42 |         <div class="hex-brick h2"></div>
 43 |         <div class="hex-brick h3"></div>
 44 |       </div>
 45 | 
 46 |       <div class="gel c8 r2">
 47 |         <div class="hex-brick h1"></div>
 48 |         <div class="hex-brick h2"></div>
 49 |         <div class="hex-brick h3"></div>
 50 |       </div>
 51 |       <div class="gel c9 r2">
 52 |         <div class="hex-brick h1"></div>
 53 |         <div class="hex-brick h2"></div>
 54 |         <div class="hex-brick h3"></div>
 55 |       </div>
 56 |       <div class="gel c10 r2">
 57 |         <div class="hex-brick h1"></div>
 58 |         <div class="hex-brick h2"></div>
 59 |         <div class="hex-brick h3"></div>
 60 |       </div>
 61 |       <div class="gel c11 r2">
 62 |         <div class="hex-brick h1"></div>
 63 |         <div class="hex-brick h2"></div>
 64 |         <div class="hex-brick h3"></div>
 65 |       </div>
 66 |       <div class="gel c12 r2">
 67 |         <div class="hex-brick h1"></div>
 68 |         <div class="hex-brick h2"></div>
 69 |         <div class="hex-brick h3"></div>
 70 |       </div>
 71 |       <div class="gel c13 r2">
 72 |         <div class="hex-brick h1"></div>
 73 |         <div class="hex-brick h2"></div>
 74 |         <div class="hex-brick h3"></div>
 75 |       </div>
 76 |       <div class="gel c14 r2">
 77 |         <div class="hex-brick h1"></div>
 78 |         <div class="hex-brick h2"></div>
 79 |         <div class="hex-brick h3"></div>
 80 |       </div>
 81 |       <div class="gel c15 r2">
 82 |         <div class="hex-brick h1"></div>
 83 |         <div class="hex-brick h2"></div>
 84 |         <div class="hex-brick h3"></div>
 85 |       </div>
 86 |       <div class="gel c16 r2">
 87 |         <div class="hex-brick h1"></div>
 88 |         <div class="hex-brick h2"></div>
 89 |         <div class="hex-brick h3"></div>
 90 |       </div>
 91 |       <div class="gel c17 r2">
 92 |         <div class="hex-brick h1"></div>
 93 |         <div class="hex-brick h2"></div>
 94 |         <div class="hex-brick h3"></div>
 95 |       </div>
 96 |       <div class="gel c18 r2">
 97 |         <div class="hex-brick h1"></div>
 98 |         <div class="hex-brick h2"></div>
 99 |         <div class="hex-brick h3"></div>
100 |       </div>
101 |       <div class="gel c19 r3">
102 |         <div class="hex-brick h1"></div>
103 |         <div class="hex-brick h2"></div>
104 |         <div class="hex-brick h3"></div>
105 |       </div>
106 |       <div class="gel c20 r3">
107 |         <div class="hex-brick h1"></div>
108 |         <div class="hex-brick h2"></div>
109 |         <div class="hex-brick h3"></div>
110 |       </div>
111 |       <div class="gel c21 r3">
112 |         <div class="hex-brick h1"></div>
113 |         <div class="hex-brick h2"></div>
114 |         <div class="hex-brick h3"></div>
115 |       </div>
116 |       <div class="gel c22 r3">
117 |         <div class="hex-brick h1"></div>
118 |         <div class="hex-brick h2"></div>
119 |         <div class="hex-brick h3"></div>
120 |       </div>
121 |       <div class="gel c23 r3">
122 |         <div class="hex-brick h1"></div>
123 |         <div class="hex-brick h2"></div>
124 |         <div class="hex-brick h3"></div>
125 |       </div>
126 |       <div class="gel c24 r3">
127 |         <div class="hex-brick h1"></div>
128 |         <div class="hex-brick h2"></div>
129 |         <div class="hex-brick h3"></div>
130 |       </div>
131 |       <div class="gel c25 r3">
132 |         <div class="hex-brick h1"></div>
133 |         <div class="hex-brick h2"></div>
134 |         <div class="hex-brick h3"></div>
135 |       </div>
136 |       <div class="gel c26 r3">
137 |         <div class="hex-brick h1"></div>
138 |         <div class="hex-brick h2"></div>
139 |         <div class="hex-brick h3"></div>
140 |       </div>
141 |       <div class="gel c28 r3">
142 |         <div class="hex-brick h1"></div>
143 |         <div class="hex-brick h2"></div>
144 |         <div class="hex-brick h3"></div>
145 |       </div>
146 |       <div class="gel c29 r3">
147 |         <div class="hex-brick h1"></div>
148 |         <div class="hex-brick h2"></div>
149 |         <div class="hex-brick h3"></div>
150 |       </div>
151 |       <div class="gel c30 r3">
152 |         <div class="hex-brick h1"></div>
153 |         <div class="hex-brick h2"></div>
154 |         <div class="hex-brick h3"></div>
155 |       </div>
156 |       <div class="gel c31 r3">
157 |         <div class="hex-brick h1"></div>
158 |         <div class="hex-brick h2"></div>
159 |         <div class="hex-brick h3"></div>
160 |       </div>
161 |       <div class="gel c32 r3">
162 |         <div class="hex-brick h1"></div>
163 |         <div class="hex-brick h2"></div>
164 |         <div class="hex-brick h3"></div>
165 |       </div>
166 |       <div class="gel c33 r3">
167 |         <div class="hex-brick h1"></div>
168 |         <div class="hex-brick h2"></div>
169 |         <div class="hex-brick h3"></div>
170 |       </div>
171 |       <div class="gel c34 r3">
172 |         <div class="hex-brick h1"></div>
173 |         <div class="hex-brick h2"></div>
174 |         <div class="hex-brick h3"></div>
175 |       </div>
176 |       <div class="gel c35 r3">
177 |         <div class="hex-brick h1"></div>
178 |         <div class="hex-brick h2"></div>
179 |         <div class="hex-brick h3"></div>
180 |       </div>
181 |       <div class="gel c36 r3">
182 |         <div class="hex-brick h1"></div>
183 |         <div class="hex-brick h2"></div>
184 |         <div class="hex-brick h3"></div>
185 |       </div>
186 |       <div class="gel c37 r3">
187 |         <div class="hex-brick h1"></div>
188 |         <div class="hex-brick h2"></div>
189 |         <div class="hex-brick h3"></div>
190 |       </div>
191 |     </div>
192 |   </div>
193 | </template>
194 | 
195 | <script>
196 | export default {
197 |   props: {
198 |     size: {
199 |       default: '40px'
200 |     },
201 |     color: {
202 |       default: '#41b883'
203 |     },
204 |     secondaryColor: {
205 |       default: '#286b4b'
206 |     }
207 |   },
208 |   computed: {
209 |     innerStyles () {
210 |       let size = parseInt(this.size)
211 |       return {
212 |         transform: 'scale(' + (size / 220) + ')',
213 |         '--bg-color': this.color,
214 |         '--secondary-color': this.secondaryColor
215 |       }
216 |     },
217 |     styles () {
218 |       return {
219 |         width: this.size,
220 |         height: this.size
221 |       }
222 |     }
223 |   }
224 | }
225 | </script>
226 | 
227 | <style lang="scss" scoped>
228 |   .spinner{
229 |     overflow: hidden;
230 |     display: flex;
231 |     justify-content: center;
232 |     align-items: center;
233 |     * {
234 |       line-height: 0;
235 |       box-sizing: border-box;
236 |     }
237 |   }
238 |   .spinner-inner{
239 |     transform-origin: center center;
240 |     width: 200px;
241 |     height: 200px;
242 |     position: relative;
243 |   }
244 | 
245 |   .hex-brick{
246 |     background: var(--bg-color);
247 |     width: 30px;
248 |     height: 17px;
249 |     position: absolute;
250 |     top: 5px;
251 |     animation-name: socket-fade;
252 |     animation-duration: 2s;
253 |     animation-iteration-count: infinite;
254 |   }
255 | 
256 |   .h2{
257 |     transform: rotate(60deg);
258 |   }
259 | 
260 |   .h3{
261 |     transform: rotate(-60deg);
262 |   }
263 | 
264 |   .gel{
265 |     height: 30px;
266 |     width: 30px;
267 |     transition: all .3s;
268 |     position: absolute;
269 |     top: 50%;
270 |     left: 50%;
271 |   }
272 | 
273 |   .center-gel{
274 |     margin-left: -15px;
275 |     margin-top: -15px;
276 | 
277 |     animation-name: socket-pulse;
278 |     animation-duration: 2s;
279 |     animation-iteration-count: infinite;
280 |   }
281 | 
282 |   .c1{
283 |     margin-left: -47px;
284 |     margin-top: -15px;
285 |   }
286 | 
287 |   .c2{
288 |     margin-left: -31px;
289 |     margin-top: -43px;
290 |   }
291 | 
292 |   .c3{
293 |     margin-left: 1px;
294 |     margin-top: -43px;
295 |   }
296 | 
297 |   .c4{
298 |     margin-left: 17px;
299 |     margin-top: -15px;
300 |   }
301 |   .c5{
302 |     margin-left: -31px;
303 |     margin-top: 13px;
304 |   }
305 | 
306 |   .c6{
307 |     margin-left: 1px;
308 |     margin-top: 13px;
309 |   }
310 | 
311 |   .c7{
312 |     margin-left: -63px;
313 |     margin-top: -43px;
314 |   }
315 | 
316 |   .c8{
317 |     margin-left: 33px;
318 |     margin-top: -43px;
319 |   }
320 | 
321 |   .c9{
322 |     margin-left: -15px;
323 |     margin-top: 41px;
324 |   }
325 | 
326 |   .c10{
327 |     margin-left: -63px;
328 |     margin-top: 13px;
329 |   }
330 | 
331 |   .c11{
332 |     margin-left: 33px;
333 |     margin-top: 13px;
334 |   }
335 | 
336 |   .c12{
337 |     margin-left: -15px;
338 |     margin-top: -71px;
339 |   }
340 | 
341 |   .c13{
342 |     margin-left: -47px;
343 |     margin-top: -71px;
344 |   }
345 | 
346 |   .c14{
347 |     margin-left: 17px;
348 |     margin-top: -71px;
349 |   }
350 | 
351 |   .c15{
352 |     margin-left: -47px;
353 |     margin-top: 41px;
354 |   }
355 | 
356 |   .c16{
357 |     margin-left: 17px;
358 |     margin-top: 41px;
359 |   }
360 | 
361 |   .c17{
362 |     margin-left: -79px;
363 |     margin-top: -15px;
364 |   }
365 | 
366 |   .c18{
367 |     margin-left: 49px;
368 |     margin-top: -15px;
369 |   }
370 | 
371 |   .c19{
372 |     margin-left: -63px;
373 |     margin-top: -99px;
374 |   }
375 | 
376 |   .c20{
377 |     margin-left: 33px;
378 |     margin-top: -99px;
379 |   }
380 | 
381 |   .c21{
382 |     margin-left: 1px;
383 |     margin-top: -99px;
384 |   }
385 | 
386 |   .c22{
387 |     margin-left: -31px;
388 |     margin-top: -99px;
389 |   }
390 | 
391 |   .c23{
392 |     margin-left: -63px;
393 |     margin-top: 69px;
394 |   }
395 | 
396 |   .c24{
397 |     margin-left: 33px;
398 |     margin-top: 69px;
399 |   }
400 | 
401 |   .c25{
402 |     margin-left: 1px;
403 |     margin-top: 69px;
404 |   }
405 | 
406 |   .c26{
407 |     margin-left: -31px;
408 |     margin-top: 69px;
409 |   }
410 | 
411 |   .c27{
412 |     margin-left: -79px;
413 |     margin-top: -15px;
414 |   }
415 | 
416 |   .c28{
417 |     margin-left: -95px;
418 |     margin-top: -43px;
419 |   }
420 | 
421 |   .c29{
422 |     margin-left: -95px;
423 |     margin-top: 13px;
424 |   }
425 | 
426 |   .c30{
427 |     margin-left: 49px;
428 |     margin-top: 41px;
429 |   }
430 | 
431 |   .c31{
432 |     margin-left: -79px;
433 |     margin-top: -71px;
434 |   }
435 | 
436 |   .c32{
437 |     margin-left: -111px;
438 |     margin-top: -15px;
439 |   }
440 | 
441 |   .c33{
442 |     margin-left: 65px;
443 |     margin-top: -43px;
444 |   }
445 | 
446 |   .c34{
447 |     margin-left: 65px;
448 |     margin-top: 13px;
449 |   }
450 | 
451 |   .c35{
452 |     margin-left: -79px;
453 |     margin-top: 41px;
454 |   }
455 | 
456 |   .c36{
457 |     margin-left: 49px;
458 |     margin-top: -71px;
459 |   }
460 | 
461 |   .c37{
462 |     margin-left: 81px;
463 |     margin-top: -15px;
464 |   }
465 | 
466 |   .r1{
467 |     animation-name: socket-pulse;
468 |     animation-duration: 2s;
469 |     animation-iteration-count: infinite;
470 |     animation-delay: .2s;
471 |   }
472 | 
473 |   .r2{
474 |     animation-name: socket-pulse;
475 |     animation-duration: 2s;
476 |     animation-iteration-count: infinite;
477 |     animation-delay: .4s;
478 |   }
479 | 
480 |   .r3{
481 |     animation-name: socket-pulse;
482 |     animation-duration: 2s;
483 |     animation-iteration-count: infinite;
484 |     animation-delay: .6s;
485 |   }
486 | 
487 |   .r1 > .hex-brick{
488 |     animation-name: socket-fade;
489 |     animation-duration: 2s;
490 |     animation-iteration-count: infinite;
491 |     animation-delay: .2s;
492 |   }
493 | 
494 |   .r2 > .hex-brick{
495 |     animation-name: socket-fade;
496 |     animation-duration: 2s;
497 |     animation-iteration-count: infinite;
498 |     animation-delay: .4s;
499 |   }
500 | 
501 |   .r3 > .hex-brick{
502 |     animation-name: socket-fade;
503 |     animation-duration: 2s;
504 |     animation-iteration-count: infinite;
505 |     animation-delay: .6s;
506 |   }
507 | 
508 | 
509 |   @keyframes socket-pulse{
510 |     0%{
511 |       transform: scale(1);
512 |     }
513 | 
514 |     50%{
515 |       transform: scale(0.01);
516 |     }
517 | 
518 |     100%{
519 |       transform: scale(1);
520 |     }
521 |   }
522 | 
523 |   @keyframes socket-fade{
524 |     0%{
525 |       background: var(--bg-color);
526 |     }
527 | 
528 |     50%{
529 |       background: var(--secondary-color);
530 |     }
531 | 
532 |     100%{
533 |       background: var(--bg-color);
534 |     }
535 |   }
536 | </style>
537 | 


--------------------------------------------------------------------------------
/dist/vue-loading-spinner.js:
--------------------------------------------------------------------------------
1 | var VueLoadingSpinner=function(t){function e(i){if(s[i])return s[i].exports;var n=s[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var s={};return e.m=t,e.c=s,e.i=function(t){return t},e.d=function(t,s,i){e.o(t,s)||Object.defineProperty(t,s,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var s=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(s,"a",s),s},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=41)}([function(t,e){t.exports=function(t,e,s,i,n){var r,a=t=t||{},c=typeof t.default;"object"!==c&&"function"!==c||(r=t,a=t.default);var l="function"==typeof a?a.options:a;e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns),i&&(l._scopeId=i);var u;if(n?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(n)},l._ssrRegister=u):s&&(u=s),u){var o=l.functional,d=o?l.render:l.beforeCreate;o?l.render=function(t,e){return u.call(e),d(t,e)}:l.beforeCreate=d?[].concat(d,u):[u]}return{esModule:r,exports:a,options:l}}},function(t,e,s){function i(t){s(120)}var n=s(0)(s(42),s(160),i,"data-v-d65da49c",null);t.exports=n.exports},function(t,e,s){function i(t){s(118)}var n=s(0)(s(43),s(158),i,"data-v-b33ea45e",null);t.exports=n.exports},function(t,e,s){function i(t){s(117)}var n=s(0)(s(44),s(157),i,"data-v-b322755c",null);t.exports=n.exports},function(t,e,s){function i(t){s(83)}var n=s(0)(s(45),s(123),i,"data-v-056c31f0",null);t.exports=n.exports},function(t,e,s){function i(t){s(84)}var n=s(0)(s(46),s(124),i,"data-v-057a4971",null);t.exports=n.exports},function(t,e,s){function i(t){s(85)}var n=s(0)(s(47),s(125),i,"data-v-058860f2",null);t.exports=n.exports},function(t,e,s){function i(t){s(86)}var n=s(0)(s(48),s(126),i,"data-v-05967873",null);t.exports=n.exports},function(t,e,s){function i(t){s(87)}var n=s(0)(s(49),s(127),i,"data-v-05a48ff4",null);t.exports=n.exports},function(t,e,s){function i(t){s(88)}var n=s(0)(s(50),s(128),i,"data-v-05b2a775",null);t.exports=n.exports},function(t,e,s){function i(t){s(89)}var n=s(0)(s(51),s(129),i,"data-v-05c0bef6",null);t.exports=n.exports},function(t,e,s){function i(t){s(90)}var n=s(0)(s(52),s(130),i,"data-v-05ced677",null);t.exports=n.exports},function(t,e,s){function i(t){s(93)}var n=s(0)(s(53),s(133),i,"data-v-1192a1d2",null);t.exports=n.exports},function(t,e,s){function i(t){s(121)}var n=s(0)(s(54),s(161),i,"data-v-fd3fa63c",null);t.exports=n.exports},function(t,e,s){function i(t){s(110)}var n=s(0)(s(55),s(150),i,"data-v-7ae8f29b",null);t.exports=n.exports},function(t,e,s){function i(t){s(82)}var n=s(0)(s(56),s(122),i,"data-v-041d70f2",null);t.exports=n.exports},function(t,e,s){function i(t){s(112)}var n=s(0)(s(57),s(152),i,"data-v-7b86f29b",null);t.exports=n.exports},function(t,e,s){function i(t){s(105)}var n=s(0)(s(58),s(145),i,"data-v-5b1608a4",null);t.exports=n.exports},function(t,e,s){function i(t){s(103)}var n=s(0)(s(59),s(143),i,"data-v-544d37f4",null);t.exports=n.exports},function(t,e,s){function i(t){s(100)}var n=s(0)(s(60),s(140),i,"data-v-3f1f92a0",null);t.exports=n.exports},function(t,e,s){function i(t){s(104)}var n=s(0)(s(61),s(144),i,"data-v-59ce3e86",null);t.exports=n.exports},function(t,e,s){function i(t){s(111)}var n=s(0)(s(62),s(151),i,"data-v-7b46c7dd",null);t.exports=n.exports},function(t,e,s){function i(t){s(107)}var n=s(0)(s(63),s(147),i,"data-v-67c49feb",null);t.exports=n.exports},function(t,e,s){function i(t){s(108)}var n=s(0)(s(64),s(148),i,"data-v-6ac0c12c",null);t.exports=n.exports},function(t,e,s){function i(t){s(91)}var n=s(0)(s(65),s(131),i,"data-v-0739976f",null);t.exports=n.exports},function(t,e,s){function i(t){s(116)}var n=s(0)(s(66),s(156),i,"data-v-ac63c428",null);t.exports=n.exports},function(t,e,s){function i(t){s(119)}var n=s(0)(s(67),s(159),i,"data-v-d609312c",null);t.exports=n.exports},function(t,e,s){function i(t){s(92)}var n=s(0)(s(68),s(132),i,"data-v-09607fba",null);t.exports=n.exports},function(t,e,s){function i(t){s(94)}var n=s(0)(s(69),s(134),i,"data-v-22c720e8",null);t.exports=n.exports},function(t,e,s){function i(t){s(95)}var n=s(0)(s(70),s(135),i,"data-v-22d53869",null);t.exports=n.exports},function(t,e,s){function i(t){s(96)}var n=s(0)(s(71),s(136),i,"data-v-22e34fea",null);t.exports=n.exports},function(t,e,s){function i(t){s(97)}var n=s(0)(s(72),s(137),i,"data-v-22f1676b",null);t.exports=n.exports},function(t,e,s){function i(t){s(114)}var n=s(0)(s(73),s(154),i,"data-v-9306a3f4",null);t.exports=n.exports},function(t,e,s){function i(t){s(102)}var n=s(0)(s(74),s(142),i,"data-v-4e36f256",null);t.exports=n.exports},function(t,e,s){function i(t){s(99)}var n=s(0)(s(75),s(139),i,"data-v-3e8d7eb8",null);t.exports=n.exports},function(t,e,s){function i(t){s(113)}var n=s(0)(s(76),s(153),i,"data-v-83aa2736",null);t.exports=n.exports},function(t,e,s){function i(t){s(101)}var n=s(0)(s(77),s(141),i,"data-v-4962b213",null);t.exports=n.exports},function(t,e,s){function i(t){s(109)}var n=s(0)(s(78),s(149),i,"data-v-6c1aa529",null);t.exports=n.exports},function(t,e,s){function i(t){s(115)}var n=s(0)(s(79),s(155),i,"data-v-9a4929d4",null);t.exports=n.exports},function(t,e,s){function i(t){s(106)}var n=s(0)(s(80),s(146),i,"data-v-657591af",null);t.exports=n.exports},function(t,e,s){function i(t){s(98)}var n=s(0)(s(81),s(138),i,"data-v-24abd1db",null);t.exports=n.exports},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=s(1),n=s.n(i),r=s(4),a=s.n(r),c=s(5),l=s.n(c),u=s(6),o=s.n(u),d=s(7),v=s.n(d),f=s(8),h=s.n(f),p=s(9),_=s.n(p),x=s(10),b=s.n(x),C=s(11),y=s.n(C),m=s(2),k=s.n(m),g=s(3),z=s.n(g),w=s(12),E=s.n(w),$=s(13),S=s.n($),M=s(14),R=s.n(M),O=s(15),P=s.n(O),j=s(16),F=s.n(j),V=s(17),I=s.n(V),H=s(18),q=s.n(H),D=s(19),B=s.n(D),T=s(20),L=s.n(T),G=s(21),N=s.n(G),A=s(22),J=s.n(A),U=s(23),X=s.n(U),W=s(24),K=s.n(W),Q=s(25),Y=s.n(Q),Z=s(26),tt=s.n(Z),et=s(27),st=s.n(et),it=s(28),nt=s.n(it),rt=s(29),at=s.n(rt),ct=s(30),lt=s.n(ct),ut=s(31),ot=s.n(ut),dt=s(32),vt=s.n(dt),ft=s(33),ht=s.n(ft),pt=s(34),_t=s.n(pt),xt=s(35),bt=s.n(xt),Ct=s(36),yt=s.n(Ct),mt=s(37),kt=s.n(mt),gt=s(38),zt=s.n(gt),wt=s(39),Et=s.n(wt),$t=s(40),St=s.n($t);s.d(e,"Circle",function(){return n.a}),s.d(e,"Circle2",function(){return a.a}),s.d(e,"Circle3",function(){return l.a}),s.d(e,"Circle4",function(){return o.a}),s.d(e,"Circle5",function(){return v.a}),s.d(e,"Circle6",function(){return h.a}),s.d(e,"Circle7",function(){return _.a}),s.d(e,"Circle8",function(){return b.a}),s.d(e,"Circle9",function(){return y.a}),s.d(e,"Circle10",function(){return k.a}),s.d(e,"Circle11",function(){return z.a}),s.d(e,"CubeShadow",function(){return E.a}),s.d(e,"Diamond",function(){return S.a}),s.d(e,"DoubleBounce",function(){return R.a}),s.d(e,"Gauge",function(){return P.a}),s.d(e,"Google",function(){return F.a}),s.d(e,"Hexagon",function(){return I.a}),s.d(e,"HourGlass",function(){return q.a}),s.d(e,"Jawn",function(){return B.a}),s.d(e,"Jumper",function(){return L.a}),s.d(e,"LetterCube",function(){return N.a}),s.d(e,"MikePad",function(){return J.a}),s.d(e,"Origami",function(){return X.a}),s.d(e,"Pencil",function(){return K.a}),s.d(e,"PingPong",function(){return Y.a}),s.d(e,"Plane",function(){return tt.a}),s.d(e,"RotateSquare",function(){return st.a}),s.d(e,"RotateSquare2",function(){return nt.a}),s.d(e,"RotateSquare3",function(){return at.a}),s.d(e,"RotateSquare4",function(){return lt.a}),s.d(e,"RotateSquare5",function(){return ot.a}),s.d(e,"ScaleOut",function(){return vt.a}),s.d(e,"Socket",function(){return ht.a}),s.d(e,"SpinLine",function(){return _t.a}),s.d(e,"SquareGrid",function(){return bt.a}),s.d(e,"Stretch",function(){return yt.a}),s.d(e,"Texture",function(){return kt.a}),s.d(e,"ThreeDots",function(){return zt.a}),s.d(e,"TwoCube",function(){return Et.a}),s.d(e,"Wave",function(){return St.a})},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/100+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"},color:{default:"#35495e"},stroke:{default:"5px"}},computed:{styles:function(){return{width:this.size,height:this.size,border:this.stroke+" solid "+this.background,borderTopColor:this.color}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"},dotSize:{default:function(){return parseInt(this.size)/3+1}}},computed:{styles:function(){var t=parseInt(this.size),e=t/3;return{width:this.size,height:this.size,border:"0px solid "+this.background,boxShadow:"0 -"+e+"px 0 "+this.dotSize+"px "+this.background+" inset"}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{styles:function(){var t=parseInt(this.size);return{width:this.size,height:this.size,transform:"scale("+t/75+")"}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/44+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/120+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"},duration:{default:"1.8s"}},computed:{styles:function(){return{width:this.size,height:this.size,backgroundColor:this.background,animationDuration:this.duration}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},color:{default:"#41b883"}},computed:{diamondStyle:function(){var t=parseInt(this.size);return{width:t/4+"px",height:t/4+"px"}},styles:function(){var t=parseInt(this.size);return{width:this.size,height:t/4+"px"}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"},duration:{default:"2.0s"}},computed:{bounceStyle:function(){return{backgroundColor:this.background,animationDuration:this.duration}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/60+")"}},styles:function(){var t=parseInt(this.size);return{width:this.size,height:t/2+"px"}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/164+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/64+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},color:{default:"#41b883"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/70+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/2/75+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/31+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/60+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},color:{default:"#41b883"}},computed:{styles:function(){return{width:this.size,height:"auto",fill:this.color}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/250+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},color:{default:"#41b883"}},computed:{innerStyles:function(){var t=parseInt(this.size);return{width:t+"px",height:this.size,transform:"scale("+t/70+")"}},styles:function(){return{width:parseInt(this.size)+"px",height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"},duration:{default:"1.2s"}},computed:{styles:function(){return{backgroundColor:this.background,width:this.size,height:this.size,animationDuration:this.duration}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},color:{default:"#41b883"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},color:{default:"#41b883"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},color:{default:"#41b883"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/80+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"},duration:{default:"1.0s"}},computed:{styles:function(){return{width:this.size,height:this.size,backgroundColor:this.background,animationDuration:this.duration}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{innerStyles:function(){return{transform:"scale("+parseInt(this.size)/220+")"}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},color:{default:"#41b883"},stroke:{default:"5px"}},computed:{lineStyles:function(){return{width:this.size,height:this.stroke,background:this.color,borderRadius:this.stroke}},styles:function(){var t=parseInt(this.size);return{width:this.size,height:this.size,transform:"scale("+t/75+")"}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"},duration:{default:"1.3s"}},computed:{cubeStyles:function(){return{backgroundColor:this.background,animationDuration:this.duration}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"},duration:{default:"1.2s"}},computed:{rectStyles:function(){return{backgroundColor:this.background,animationDuration:this.duration}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},color:{default:"#41b883"}},computed:{blobStyles:function(){return{borderColor:this.color}},moveBlobStyles:function(){return{borderColor:this.color,background:this.color}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"},background:{default:"#41b883"},duration:{default:"1.8s"}},computed:{cubeStyles:function(){return{backgroundColor:this.background,animationName:"sk-cubemove",animationDuration:this.duration}},styles:function(){return{width:this.size,height:this.size}}}}},function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{size:{default:"40px"}},computed:{styles:function(){return{width:this.size,height:this.size}}}}},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--gauge",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--circle-2",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--circle-3",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--circle-4",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--circle-5",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("svg",{staticClass:"spinner spinner--circle-6",style:t.styles,attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100"}},[s("g",{staticClass:"anim-0"},[s("circle",{attrs:{cx:"50",cy:"50",r:"50",fill:t.background}})]),t._v(" "),s("g",{staticClass:"anim-1"},[s("circle",{attrs:{cx:"50",cy:"50",r:"5",fill:"white"}})]),t._v(" "),s("g",{staticClass:"anim-2"},[s("circle",{attrs:{cx:"75",cy:"50",r:"5",fill:"white"}}),t._v(" "),s("line",{attrs:{x1:"25",y1:"50",x2:"75",y2:"50",stroke:"white","stroke-width":"3"}})]),t._v(" "),s("g",{staticClass:"anim-3"},[s("circle",{attrs:{cx:"50",cy:"25",r:"5",fill:"white"}}),t._v(" "),s("line",{attrs:{x1:"50",y1:"25",x2:"25",y2:"75",stroke:"white","stroke-width":"3"}}),t._v(" "),s("line",{attrs:{x1:"50",y1:"25",x2:"75",y2:"75",stroke:"white","stroke-width":"3"}})]),t._v(" "),s("g",{staticClass:"anim-4"},[s("circle",{attrs:{cx:"75",cy:"25",r:"5",fill:"white"}}),t._v(" "),s("line",{attrs:{x1:"75",y1:"25",x2:"25",y2:"25",stroke:"white","stroke-width":"3"}})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--circle-7",style:t.styles},[s("div",{staticClass:"spinner-inner"})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--circle-8",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[t._m(0)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"ball-container"},[s("div",{staticClass:"contener_mixte"},[s("div",{staticClass:"ballcolor ball_1"},[t._v(" ")])]),t._v(" "),s("div",{staticClass:"contener_mixte"},[s("div",{staticClass:"ballcolor ball_2"},[t._v(" ")])]),t._v(" "),s("div",{staticClass:"contener_mixte"},[s("div",{staticClass:"ballcolor ball_3"},[t._v(" ")])]),t._v(" "),s("div",{staticClass:"contener_mixte"},[s("div",{staticClass:"ballcolor ball_4"},[t._v(" ")])])])}]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--circle-9",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[t._m(0)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"loading spin-1"},[s("div",{staticClass:"loading spin-2"},[s("div",{staticClass:"loading spin-3"},[s("div",{staticClass:"loading spin-4"},[s("div",{staticClass:"loading spin-5"},[s("div",{staticClass:"loading spin-6"})])])])])])}]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("svg",{staticClass:"spinner spinner--pencil",style:t.styles,attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 677.34762 182.15429"}},[s("g",[s("path",{staticClass:"body-pencil",attrs:{d:"M128.273 0l-3.9 2.77L0 91.078l128.273 91.076 549.075-.006V.008L128.273 0zm20.852 30l498.223.006V152.15l-498.223.007V30zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z"}}),t._v(" "),s("path",{staticClass:"line",attrs:{d:"M134.482 157.147v25l518.57.008.002-25-518.572-.008z"}})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--rotate-square",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--cube-shadow",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--rotate-square-2",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("svg",{staticClass:"spinner spinner--cube",style:t.styles,attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 500.00001 500.00001"}},[s("g",{attrs:{fill:t.color}},[s("path",{staticClass:"b0",attrs:{d:"M66.734 66.734v366.533h366.532V66.734H66.734zm15 15h336.532v336.533H81.734V81.734z"}}),t._v(" "),s("path",{staticClass:"b2",attrs:{d:"M354.16 2.5v143.34H497.5V2.5H354.16zm10 10H487.5v123.34H364.16V12.5z"}}),t._v(" "),s("path",{staticClass:"b1",attrs:{d:"M0 2.5v143.34h143.34V2.5H0zm10 10h123.34v123.34H10V12.5z"}}),t._v(" "),s("path",{staticClass:"b3",attrs:{d:"M354.16 356.66V500H497.5V356.66H354.16zm10 10H487.5V490H364.16V366.66z"}}),t._v(" "),s("path",{staticClass:"b4",attrs:{d:"M0 356.66V500h143.34V356.66H0zm10 10h123.34V490H10V366.66z"}})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("span",{staticClass:"spinner spinner--rotate-square4",style:t.styles},[s("span",{staticClass:"loader-inner"})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--rotate-square-5",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[s("span",{staticClass:"load3 one"}),t._v(" "),s("span",{staticClass:"load3 two"}),t._v(" "),s("span",{staticClass:"load3-center"})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--wave",style:t.styles},[s("div"),t._v(" "),s("div"),t._v(" "),s("div")])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--spin-line",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.lineStyles})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--jawn"},[s("div",{staticClass:"spinner-inner",style:t.styles},[s("div",{staticClass:"jawn",style:t.innerStyles})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--stretch",style:t.styles},[s("div",{staticClass:"rect rect-1",style:t.rectStyles}),t._v(" "),s("div",{staticClass:"rect rect-2",style:t.rectStyles}),t._v(" "),s("div",{staticClass:"rect rect-3",style:t.rectStyles}),t._v(" "),s("div",{staticClass:"rect rect-4",style:t.rectStyles}),t._v(" "),s("div",{staticClass:"rect rect-5",style:t.rectStyles})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--socker",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[t._m(0),t._v(" "),t._m(1),t._v(" "),t._m(2),t._v(" "),t._m(3),t._v(" "),t._m(4),t._v(" "),t._m(5),t._v(" "),t._m(6),t._v(" "),t._m(7),t._v(" "),t._m(8),t._v(" "),t._m(9),t._v(" "),t._m(10),t._v(" "),t._m(11),t._v(" "),t._m(12),t._v(" "),t._m(13),t._v(" "),t._m(14),t._v(" "),t._m(15),t._v(" "),t._m(16),t._v(" "),t._m(17),t._v(" "),t._m(18),t._v(" "),t._m(19),t._v(" "),t._m(20),t._v(" "),t._m(21),t._v(" "),t._m(22),t._v(" "),t._m(23),t._v(" "),t._m(24),t._v(" "),t._m(25),t._v(" "),t._m(26),t._v(" "),t._m(27),t._v(" "),t._m(28),t._v(" "),t._m(29),t._v(" "),t._m(30),t._v(" "),t._m(31),t._v(" "),t._m(32),t._v(" "),t._m(33),t._v(" "),t._m(34),t._v(" "),t._m(35),t._v(" "),t._m(36)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel center-gel"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c1 r1"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c2 r1"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c3 r1"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c4 r1"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c5 r1"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c6 r1"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c7 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c8 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c9 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c10 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c11 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c12 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c13 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c14 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c15 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c16 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c17 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c18 r2"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c19 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c20 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c21 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c22 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c23 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c24 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c25 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c26 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c28 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c29 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c30 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c31 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c32 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c33 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c34 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c35 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c36 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"gel c37 r3"},[s("div",{staticClass:"hex-brick h1"}),t._v(" "),s("div",{staticClass:"hex-brick h2"}),t._v(" "),s("div",{staticClass:"hex-brick h3"})])}]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--hour-glass",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[s("svg",{staticClass:"hourglass",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 120 206",preserveAspectRatio:"none"}},[s("path",{staticClass:"middle",attrs:{d:"M120 0H0v206h120V0zM77.1 133.2C87.5 140.9 92 145 92 152.6V178H28v-25.4c0-7.6 4.5-11.7 14.9-19.4 6-4.5 13-9.6 17.1-17 4.1 7.4 11.1 12.6 17.1 17zM60 89.7c-4.1-7.3-11.1-12.5-17.1-17C32.5 65.1 28 61 28 53.4V28h64v25.4c0 7.6-4.5 11.7-14.9 19.4-6 4.4-13 9.6-17.1 16.9z"}}),t._v(" "),s("path",{staticClass:"outer",attrs:{d:"M93.7 95.3c10.5-7.7 26.3-19.4 26.3-41.9V0H0v53.4c0 22.5 15.8 34.2 26.3 41.9 3 2.2 7.9 5.8 9 7.7-1.1 1.9-6 5.5-9 7.7C15.8 118.4 0 130.1 0 152.6V206h120v-53.4c0-22.5-15.8-34.2-26.3-41.9-3-2.2-7.9-5.8-9-7.7 1.1-2 6-5.5 9-7.7zM70.6 103c0 18 35.4 21.8 35.4 49.6V192H14v-39.4c0-27.9 35.4-31.6 35.4-49.6S14 81.2 14 53.4V14h92v39.4C106 81.2 70.6 85 70.6 103z"}})])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--jumper",style:t.styles},[s("div"),t._v(" "),s("div"),t._v(" "),s("div")])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--hexagon",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[t._m(0)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ul",{staticClass:"hexagon-container"},[s("li",{staticClass:"hexagon hex_1"}),t._v(" "),s("li",{staticClass:"hexagon hex_2"}),t._v(" "),s("li",{staticClass:"hexagon hex_3"}),t._v(" "),s("li",{staticClass:"hexagon hex_4"}),t._v(" "),s("li",{staticClass:"hexagon hex_5"}),t._v(" "),s("li",{staticClass:"hexagon hex_6"}),t._v(" "),s("li",{staticClass:"hexagon hex_7"})])}]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--two-cube",style:t.styles},[s("div",{staticClass:"cube1",style:t.cubeStyles}),t._v(" "),s("div",{staticClass:"cube2",style:t.cubeStyles})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--mikepad",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[s("div",{staticClass:"binding"}),t._v(" "),t._m(0)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"pad"},[s("div",{staticClass:"line line1"}),t._v(" "),s("div",{staticClass:"line line2"}),t._v(" "),s("div",{staticClass:"line line3"})])}]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner-origami",style:t.styles},[s("div",{staticClass:"spinner-inner loading",style:t.innerStyles},[s("span",{staticClass:"slice"}),t._v(" "),s("span",{staticClass:"slice"}),t._v(" "),s("span",{staticClass:"slice"}),t._v(" "),s("span",{staticClass:"slice"}),t._v(" "),s("span",{staticClass:"slice"}),t._v(" "),s("span",{staticClass:"slice"})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--texture",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--double-bounce",style:t.styles},[s("div",{staticClass:"double-bounce1",style:t.bounceStyle}),t._v(" "),s("div",{staticClass:"double-bounce2",style:t.bounceStyle})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--socker",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[t._m(0)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"cube panelLoad"},[s("div",{staticClass:"cube-face cube-face-front"},[t._v("L")]),t._v(" "),s("div",{staticClass:"cube-face cube-face-back"},[t._v("O")]),t._v(" "),s("div",{staticClass:"cube-face cube-face-left"},[t._v("A")]),t._v(" "),s("div",{staticClass:"cube-face cube-face-right"},[t._v("D")]),t._v(" "),s("div",{staticClass:"cube-face cube-face-bottom"},[t._v("I")]),t._v(" "),s("div",{staticClass:"cube-face cube-face-top"},[t._v("N'")])])}]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--google",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--square-grid",style:t.styles},[s("div",{staticClass:"sk-cube sk-cube1",style:t.cubeStyles}),t._v(" "),s("div",{staticClass:"sk-cube sk-cube2",style:t.cubeStyles}),t._v(" "),s("div",{staticClass:"sk-cube sk-cube3",style:t.cubeStyles}),t._v(" "),s("div",{staticClass:"sk-cube sk-cube4",style:t.cubeStyles}),t._v(" "),s("div",{staticClass:"sk-cube sk-cube5",style:t.cubeStyles}),t._v(" "),s("div",{staticClass:"sk-cube sk-cube6",style:t.cubeStyles}),t._v(" "),s("div",{staticClass:"sk-cube sk-cube7",style:t.cubeStyles}),t._v(" "),s("div",{staticClass:"sk-cube sk-cube8",style:t.cubeStyles}),t._v(" "),s("div",{staticClass:"sk-cube sk-cube9",style:t.cubeStyles})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"spinner spinner--scale-out",style:t.styles})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner",style:t.styles},[s("div",{staticClass:"blob top",style:t.blobStyles}),t._v(" "),s("div",{staticClass:"blob bottom",style:t.blobStyles}),t._v(" "),s("div",{staticClass:"blob left",style:t.blobStyles}),t._v(" "),s("div",{staticClass:"blob move-blob",style:t.moveBlobStyles})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--ping-pong",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[t._m(0)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"board"},[s("div",{staticClass:"left"}),t._v(" "),s("div",{staticClass:"right"}),t._v(" "),s("div",{staticClass:"ball"})])}]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--circle-11",style:t.styles},[s("div",{staticClass:"spinner-inner"})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--circle-10",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[s("div",{staticClass:"loader-xbox"})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"spinner spinner--plane",style:t.styles},[s("div",{staticClass:"spinner-inner",style:t.innerStyles},[t._m(0),t._v(" "),t._m(1),t._v(" "),t._m(2)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"mask",attrs:{id:"top"}},[s("div",{staticClass:"plane"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"mask",attrs:{id:"middle"}},[s("div",{staticClass:"plane"})])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"mask",attrs:{id:"bottom"}},[s("div",{staticClass:"plane"})])}]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("svg",{staticClass:"spinner spinner--circle",style:t.styles,attrs:{viewBox:"0 0 66 66",xmlns:"http://www.w3.org/2000/svg"}},[s("circle",{staticClass:"path",attrs:{fill:"none","stroke-width":"6","stroke-linecap":"round",cx:"33",cy:"33",r:"30"}})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("span",{staticClass:"spinner spinner--rotate-diamond",style:t.styles},[s("div",{staticClass:"diamond",style:t.diamondStyle}),t._v(" "),s("div",{staticClass:"diamond",style:t.diamondStyle}),t._v(" "),s("div",{staticClass:"diamond",style:t.diamondStyle})])},staticRenderFns:[]}}]);
2 | //# sourceMappingURL=vue-loading-spinner.js.map


--------------------------------------------------------------------------------
/src/components/Circle6.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <svg v-bind:style="styles" class="spinner spinner--circle-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  3 |       <g class="anim-0">
  4 |         <circle cx="50" cy="50" r="50" v-bind:fill="background" />
  5 |       </g>
  6 |       <g class="anim-1">
  7 |         <circle cx="50" cy="50" r="5" fill="white" />
  8 |       </g>
  9 |       <g class="anim-2">
 10 |         <circle cx="75" cy="50" r="5" fill="white" />
 11 |         <line x1="25" y1="50" x2="75" y2="50" stroke="white" stroke-width="3" />
 12 |       </g>
 13 |       <g class="anim-3">
 14 |         <circle cx="50" cy="25" r="5" fill="white" />
 15 |         <line x1="50" y1="25" x2="25" y2="75" stroke="white" stroke-width="3" />
 16 |         <line x1="50" y1="25" x2="75" y2="75" stroke="white" stroke-width="3" />
 17 |       </g>
 18 |       <g class="anim-4">
 19 |         <circle cx="75" cy="25" r="5" fill="white" />
 20 |         <line x1="75" y1="25" x2="25" y2="25" stroke="white" stroke-width="3" />
 21 |       </g>
 22 |     </svg>
 23 | </template>
 24 | <script>
 25 | export default {
 26 |   props: {
 27 |     size: {
 28 |       default: '40px'
 29 |     },
 30 |     background: {
 31 |       default: '#41b883'
 32 |     }
 33 |   },
 34 |   computed: {
 35 |     styles () {
 36 |       return {
 37 |         width: this.size,
 38 |         height: this.size
 39 |       }
 40 |     }
 41 |   }
 42 | }
 43 | </script>
 44 | <style lang="scss" scoped>
 45 |   /* Generated with Bounce.js. Edit at http://goo.gl/hYAzd9 */
 46 |   @keyframes circle-6-rotateAll {
 47 |     0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 48 |     77.777778% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 49 |     78.518519% { transform: matrix3d(0.80259, 0.59653, 0, 0, -0.59653, 0.80259, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 50 |     79.259259% { transform: matrix3d(0.52673, 0.85004, 0, 0, -0.85004, 0.52673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 51 |     80% { transform: matrix3d(0.60234, 0.79824, 0, 0, -0.79824, 0.60234, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 52 |     80.740741% { transform: matrix3d(0.72936, 0.68413, 0, 0, -0.68413, 0.72936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 53 |     81.481481% { transform: matrix3d(0.7498, 0.66167, 0, 0, -0.66167, 0.7498, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 54 |     82.222222% { transform: matrix3d(0.71527, 0.69885, 0, 0, -0.69885, 0.71527, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 55 |     82.962963% { transform: matrix3d(0.69404, 0.71994, 0, 0, -0.71994, 0.69404, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 56 |     83.703704% { transform: matrix3d(0.69926, 0.71487, 0, 0, -0.71487, 0.69926, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 57 |     84.444444% { transform: matrix3d(0.7089, 0.70531, 0, 0, -0.70531, 0.7089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 58 |     85.185185% { transform: matrix3d(0.7106, 0.7036, 0, 0, -0.7036, 0.7106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 59 |     85.925926% { transform: matrix3d(0.70776, 0.70645, 0, 0, -0.70645, 0.70776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 60 |     86.666667% { transform: matrix3d(0.70608, 0.70813, 0, 0, -0.70813, 0.70608, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 61 |     87.407407% { transform: matrix3d(0.70649, 0.70773, 0, 0, -0.70773, 0.70649, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 62 |     88.148148% { transform: matrix3d(0.70725, 0.70696, 0, 0, -0.70696, 0.70725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 63 |     88.888889% { transform: matrix3d(0.70738, 0.70683, 0, 0, -0.70683, 0.70738, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 64 |     89.62963% { transform: matrix3d(0.70711, 0.70711, 0, 0, -0.70711, 0.70711, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 65 |     100% { transform: matrix3d(0.70711, 0.70711, 0, 0, -0.70711, 0.70711, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 66 |   }
 67 | 
 68 |   /* Generated with Bounce.js. Edit at http://goo.gl/DEm6fe */
 69 | 
 70 |   @keyframes circle-6-anim-1-circle {
 71 |     0% { transform: scale(0); }
 72 |     0.740741% { transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 73 |     1.481481% { transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 74 |     2.222222% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 75 |     2.962963% { transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 76 |     3.703704% { transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 77 |     4.444444% { transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 78 |     5.185185% { transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 79 |     5.925926% { transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 80 |     6.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 81 |     7.407407% { transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 82 |     8.148148% { transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 83 |     8.888889% { transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 84 |     9.62963% { transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 85 |     10.37037% { transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 86 |     11.111111% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
 87 |     11.851852% { transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, -9.51676, 0, 0, 1); }
 88 |     12.592593% { transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, -18.75576, 0, 0, 1); }
 89 |     13.333333% { transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, -25.26155, 0, 0, 1); }
 90 |     14.074074% { transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, -28.53849, 0, 0, 1); }
 91 |     14.814815% { transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, -29.2499, 0, 0, 1); }
 92 |     15.555556% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.45173, 0, 0, 1); }
 93 |     16.296296% { transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, -27.09752, 0, 0, 1); }
 94 |     17.037037% { transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, -25.82591, 0, 0, 1); }
 95 |     17.777778% { transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, -24.9428, 0, 0, 1); }
 96 |     18.518519% { transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, -24.50122, 0, 0, 1); }
 97 |     19.259259% { transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, -24.40907, 0, 0, 1); }
 98 |     20% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -24.52342, 0, 0, 1); }
 99 |     20.740741% { transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, -24.71354, 0, 0, 1); }
100 |     21.481481% { transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, -24.89073, 0, 0, 1); }
101 |     22.222222% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
102 |     22.962963% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25.06366, 0, 0, 1); }
103 |     23.703704% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25.07926, 0, 0, 1); }
104 |     24.444444% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25.0658, 0, 0, 1); }
105 |     25.185185% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25.04097, 0, 0, 1); }
106 |     25.925926% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25.017, 0, 0, 1); }
107 |     26.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
108 |     27.407407% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -24.99121, 0, 0, 1); }
109 |     28.148148% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -24.98906, 0, 0, 1); }
110 |     28.888889% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -24.99091, 0, 0, 1); }
111 |     29.62963% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -24.99434, 0, 0, 1); }
112 |     30.37037% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -24.99765, 0, 0, 1); }
113 |     31.111111% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
114 |     31.851852% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25.00121, 0, 0, 1); }
115 |     32.592593% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25.00151, 0, 0, 1); }
116 |     33.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
117 |     88.888889% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
118 |     89.62963% { transform: matrix3d(0.32628, 0, 0, 0, 0, 0.32628, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
119 |     90.37037% { transform: matrix3d(0.10646, 0, 0, 0, 0, 0.10646, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
120 |     91.111111% { transform: matrix3d(0.03474, 0, 0, 0, 0, 0.03474, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
121 |     91.851852% { transform: matrix3d(0.01133, 0, 0, 0, 0, 0.01133, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
122 |     92.592593% { transform: matrix3d(0.0037, 0, 0, 0, 0, 0.0037, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
123 |     93.333333% { transform: matrix3d(0.00121, 0, 0, 0, 0, 0.00121, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
124 |     94.074074% { transform: matrix3d(0.00039, 0, 0, 0, 0, 0.00039, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
125 |     94.814815% { transform: matrix3d(0.00013, 0, 0, 0, 0, 0.00013, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
126 |     95.555556% { transform: matrix3d(0.00004, 0, 0, 0, 0, 0.00004, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
127 |     96.296296% { transform: matrix3d(0.00001, 0, 0, 0, 0, 0.00001, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
128 |     97.037037% { transform: scale(0) translateX(-25px); }
129 |     100% { transform: scale(0) translateX(-25px); }
130 |   }
131 | 
132 |   /* Generated with Bounce.js. Edit at http://goo.gl/e10ASq */
133 | 
134 |   @keyframes circle-6-anim-3-circle {
135 |     0% { transform: scale(0); }
136 |     44.444444% { transform: scale(0); }
137 |     45.185185% { transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
138 |     45.925926% { transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
139 |     46.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
140 |     47.407407% { transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
141 |     48.148148% { transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
142 |     48.888889% { transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
143 |     49.62963% { transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
144 |     50.37037% { transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
145 |     51.111111% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
146 |     51.851852% { transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
147 |     52.592593% { transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
148 |     53.333333% { transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
149 |     54.074074% { transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
150 |     54.814815% { transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
151 |     55.555556% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
152 |     56.296296% { transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, -15.05076, 0, 0, 1); }
153 |     57.037037% { transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, -26.2515, 0, 0, 1); }
154 |     57.777778% { transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, -29.73137, 0, 0, 1); }
155 |     58.518519% { transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, -28.42084, 0, 0, 1); }
156 |     59.259259% { transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, -26.07434, 0, 0, 1); }
157 |     60% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -24.63046, 0, 0, 1); }
158 |     60.740741% { transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, -24.29556, 0, 0, 1); }
159 |     61.481481% { transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, -24.54061, 0, 0, 1); }
160 |     62.222222% { transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, -24.86216, 0, 0, 1); }
161 |     62.962963% { transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, -25.04022, 0, 0, 1); }
162 |     63.703704% { transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, -25.07557, 0, 0, 1); }
163 |     64.444444% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25.04628, 0, 0, 1); }
164 |     65.185185% { transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, -25.01399, 0, 0, 1); }
165 |     65.925926% { transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, -25.00006, 0, 0, 1); }
166 |     66.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -24.98749, 0, 0, 1); }
167 |     67.407407% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
168 |     88.888889% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
169 |     89.62963% { transform: matrix3d(0.32628, 0, 0, 0, 0, 0.32628, 0, 0, 0, 0, 1, 0, -8.15699, 0, 0, 1); }
170 |     90.37037% { transform: matrix3d(0.10646, 0, 0, 0, 0, 0.10646, 0, 0, 0, 0, 1, 0, -2.66146, 0, 0, 1); }
171 |     91.111111% { transform: matrix3d(0.03474, 0, 0, 0, 0, 0.03474, 0, 0, 0, 0, 1, 0, -0.86838, 0, 0, 1); }
172 |     91.851852% { transform: matrix3d(0.01133, 0, 0, 0, 0, 0.01133, 0, 0, 0, 0, 1, 0, -0.28334, 0, 0, 1); }
173 |     92.592593% { transform: matrix3d(0.0037, 0, 0, 0, 0, 0.0037, 0, 0, 0, 0, 1, 0, -0.09245, 0, 0, 1); }
174 |     93.333333% { transform: matrix3d(0.00121, 0, 0, 0, 0, 0.00121, 0, 0, 0, 0, 1, 0, -0.03016, 0, 0, 1); }
175 |     94.074074% { transform: matrix3d(0.00039, 0, 0, 0, 0, 0.00039, 0, 0, 0, 0, 1, 0, -0.00984, 0, 0, 1); }
176 |     94.814815% { transform: matrix3d(0.00013, 0, 0, 0, 0, 0.00013, 0, 0, 0, 0, 1, 0, -0.00321, 0, 0, 1); }
177 |     95.555556% { transform: matrix3d(0.00004, 0, 0, 0, 0, 0.00004, 0, 0, 0, 0, 1, 0, -0.00105, 0, 0, 1); }
178 |     96.296296% { transform: matrix3d(0.00001, 0, 0, 0, 0, 0.00001, 0, 0, 0, 0, 1, 0, -0.00034, 0, 0, 1); }
179 |     97.037037% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, -0.00011, 0, 0, 1); }
180 |     97.777778% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, -0.00004, 0, 0, 1); }
181 |     98.518519% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, -0.00001, 0, 0, 1); }
182 |     99.259259% { transform: scale(0); }
183 |     100% { transform: scale(0); }
184 |   }
185 | 
186 |   /* Generated with Bounce.js. Edit at http://goo.gl/uIqwYq */
187 | 
188 |   @keyframes circle-6-anim-2-circle {
189 |     0% { transform: scale(0); }
190 |     22.222222% { transform: scale(0); }
191 |     22.962963% { transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
192 |     23.703704% { transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
193 |     24.444444% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
194 |     25.185185% { transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
195 |     25.925926% { transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
196 |     26.666667% { transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
197 |     27.407407% { transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
198 |     28.148148% { transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
199 |     28.888889% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
200 |     29.62963% { transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
201 |     30.37037% { transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
202 |     31.111111% { transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
203 |     31.851852% { transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
204 |     32.592593% { transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
205 |     33.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
206 |     34.074074% { transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
207 |     34.814815% { transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
208 |     35.555556% { transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
209 |     36.296296% { transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
210 |     37.037037% { transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
211 |     37.777778% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
212 |     38.518519% { transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
213 |     39.259259% { transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
214 |     40% { transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
215 |     40.740741% { transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
216 |     41.481481% { transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
217 |     42.222222% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
218 |     42.962963% { transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
219 |     43.703704% { transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
220 |     44.444444% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
221 |     88.888889% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
222 |     89.62963% { transform: matrix3d(0.32628, 0, 0, 0, 0, 0.32628, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
223 |     90.37037% { transform: matrix3d(0.10646, 0, 0, 0, 0, 0.10646, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
224 |     91.111111% { transform: matrix3d(0.03474, 0, 0, 0, 0, 0.03474, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
225 |     91.851852% { transform: matrix3d(0.01133, 0, 0, 0, 0, 0.01133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
226 |     92.592593% { transform: matrix3d(0.0037, 0, 0, 0, 0, 0.0037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
227 |     93.333333% { transform: matrix3d(0.00121, 0, 0, 0, 0, 0.00121, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
228 |     94.074074% { transform: matrix3d(0.00039, 0, 0, 0, 0, 0.00039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
229 |     94.814815% { transform: matrix3d(0.00013, 0, 0, 0, 0, 0.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
230 |     95.555556% { transform: matrix3d(0.00004, 0, 0, 0, 0, 0.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
231 |     96.296296% { transform: matrix3d(0.00001, 0, 0, 0, 0, 0.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
232 |     97.037037% { transform: scale(0); }
233 |     100% { transform: scale(0); }
234 |   }
235 | 
236 |   /* Generated with Bounce.js. Edit at http://goo.gl/Kdj66E */
237 | 
238 |   @keyframes circle-6-anim-4-circle {
239 |     0% { transform: scale(0); }
240 |     66.666667% { transform: scale(0); }
241 |     67.407407% { transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
242 |     68.148148% { transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
243 |     68.888889% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
244 |     69.62963% { transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
245 |     70.37037% { transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
246 |     71.111111% { transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
247 |     71.851852% { transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
248 |     72.592593% { transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
249 |     73.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
250 |     74.074074% { transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
251 |     74.814815% { transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
252 |     75.555556% { transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
253 |     76.296296% { transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
254 |     77.037037% { transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
255 |     77.777778% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
256 |     78.518519% { transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
257 |     79.259259% { transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
258 |     80% { transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
259 |     80.740741% { transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
260 |     81.481481% { transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
261 |     82.222222% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
262 |     82.962963% { transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
263 |     83.703704% { transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
264 |     84.444444% { transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
265 |     85.185185% { transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
266 |     85.925926% { transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
267 |     86.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
268 |     87.407407% { transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
269 |     88.148148% { transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
270 |     88.888889% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
271 |     89.62963% { transform: matrix3d(0.32628, 0, 0, 0, 0, 0.32628, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
272 |     90.37037% { transform: matrix3d(0.10646, 0, 0, 0, 0, 0.10646, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
273 |     91.111111% { transform: matrix3d(0.03474, 0, 0, 0, 0, 0.03474, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
274 |     91.851852% { transform: matrix3d(0.01133, 0, 0, 0, 0, 0.01133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
275 |     92.592593% { transform: matrix3d(0.0037, 0, 0, 0, 0, 0.0037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
276 |     93.333333% { transform: matrix3d(0.00121, 0, 0, 0, 0, 0.00121, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
277 |     94.074074% { transform: matrix3d(0.00039, 0, 0, 0, 0, 0.00039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
278 |     94.814815% { transform: matrix3d(0.00013, 0, 0, 0, 0, 0.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
279 |     95.555556% { transform: matrix3d(0.00004, 0, 0, 0, 0, 0.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
280 |     96.296296% { transform: matrix3d(0.00001, 0, 0, 0, 0, 0.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
281 |     97.037037% { transform: scale(0); }
282 |     100% { transform: scale(0); }
283 |   }
284 | 
285 |   /* Generated with Bounce.js. Edit at http://goo.gl/2SMi6x */
286 | 
287 |   @keyframes circle-6-g-move-bottom {
288 |     0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
289 |     33.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
290 |     34.074074% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 16.35397, 0, 1); }
291 |     34.814815% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 25.69808, 0, 1); }
292 |     35.555556% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 27.79251, 0, 1); }
293 |     36.296296% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 26.74505, 0, 1); }
294 |     37.037037% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 25.46104, 0, 1); }
295 |     37.777778% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.85273, 0, 1); }
296 |     38.518519% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.77498, 0, 1); }
297 |     39.259259% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.8837, 0, 1); }
298 |     40% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.97967, 0, 1); }
299 |     40.740741% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 25.017, 0, 1); }
300 |     41.481481% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 25.01719, 0, 1); }
301 |     42.222222% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 25.00735, 0, 1); }
302 |     42.962963% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 25.00049, 0, 1); }
303 |     43.703704% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.99838, 0, 1); }
304 |     44.444444% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 25, 0, 1); }
305 |     100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 25, 0, 1); }
306 |   }
307 | 
308 |   /* Generated with Bounce.js. Edit at http://goo.gl/pKqSyP */
309 | 
310 |   @keyframes circle-6-line-grow-horizontal-1 {
311 |     0% { transform: scaleX(0); }
312 |     27.407407% { transform: scaleX(0); }
313 |     28.148148% { transform: matrix3d(0.34323, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
314 |     28.888889% { transform: matrix3d(0.88518, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
315 |     29.62963% { transform: matrix3d(1.09602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
316 |     30.37037% { transform: matrix3d(1.09709, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
317 |     31.111111% { transform: matrix3d(1.04151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
318 |     31.851852% { transform: matrix3d(1.00277, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
319 |     32.592593% { transform: matrix3d(0.99083, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
320 |     33.333333% { transform: matrix3d(0.99292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
321 |     34.074074% { transform: matrix3d(0.99755, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
322 |     34.814815% { transform: matrix3d(1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
323 |     35.555556% { transform: matrix3d(1.00079, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
324 |     36.296296% { transform: matrix3d(1.00049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
325 |     37.037037% { transform: matrix3d(1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
326 |     37.777778% { transform: matrix3d(0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
327 |     38.518519% { transform: matrix3d(0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
328 |     39.259259% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
329 |     88.888889% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
330 |     89.62963% { transform: matrix3d(0.32628, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
331 |     90.37037% { transform: matrix3d(0.10646, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
332 |     91.111111% { transform: matrix3d(0.03474, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
333 |     91.851852% { transform: matrix3d(0.01133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
334 |     92.592593% { transform: matrix3d(0.0037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
335 |     93.333333% { transform: matrix3d(0.00121, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
336 |     94.074074% { transform: matrix3d(0.00039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
337 |     94.814815% { transform: matrix3d(0.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
338 |     95.555556% { transform: matrix3d(0.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
339 |     96.296296% { transform: matrix3d(0.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
340 |     97.037037% { transform: scaleX(0); }
341 |     100% { transform: scaleX(0); }
342 |   }
343 | 
344 |   /* Generated with Bounce.js. Edit at http://goo.gl/NHi83y */
345 | 
346 |   @keyframes circle-6-line-grow-horizontal-2 {
347 |     0% { transform: scaleX(0); }
348 |     71.851852% { transform: scaleX(0); }
349 |     72.592593% { transform: matrix3d(0.34323, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
350 |     73.333333% { transform: matrix3d(0.88518, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
351 |     74.074074% { transform: matrix3d(1.09602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
352 |     74.814815% { transform: matrix3d(1.09709, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
353 |     75.555556% { transform: matrix3d(1.04151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
354 |     76.296296% { transform: matrix3d(1.00277, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
355 |     77.037037% { transform: matrix3d(0.99083, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
356 |     77.777778% { transform: matrix3d(0.99292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
357 |     78.518519% { transform: matrix3d(0.99755, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
358 |     79.259259% { transform: matrix3d(1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
359 |     80% { transform: matrix3d(1.00079, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
360 |     80.740741% { transform: matrix3d(1.00049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
361 |     81.481481% { transform: matrix3d(1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
362 |     82.222222% { transform: matrix3d(0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
363 |     82.962963% { transform: matrix3d(0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
364 |     83.703704% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
365 |     88.888889% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
366 |     89.62963% { transform: matrix3d(0.58933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
367 |     90.37037% { transform: matrix3d(0.33162, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
368 |     91.111111% { transform: matrix3d(0.17694, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
369 |     91.851852% { transform: matrix3d(0.08817, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
370 |     92.592593% { transform: matrix3d(0.0397, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
371 |     93.333333% { transform: matrix3d(0.01478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
372 |     94.074074% { transform: matrix3d(0.00301, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
373 |     94.814815% { transform: matrix3d(-0.00182, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
374 |     95.555556% { transform: matrix3d(-0.00323, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
375 |     96.296296% { transform: matrix3d(-0.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
376 |     97.037037% { transform: matrix3d(-0.00254, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
377 |     97.777778% { transform: matrix3d(-0.00185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
378 |     98.518519% { transform: matrix3d(-0.00126, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
379 |     99.259259% { transform: matrix3d(-0.00081, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
380 |     100% { transform: scaleX(0); }
381 |   }
382 | 
383 |   /* Generated with Bounce.js. Edit at http://goo.gl/21oylQ */
384 | 
385 |   @keyframes circle-6-line-grow-vertical-1 {
386 |     0% { transform: scaleY(0); }
387 |     49.62963% { transform: scaleY(0); }
388 |     50.37037% { transform: matrix3d(1, 0, 0, 0, 0, 0.34323, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
389 |     51.111111% { transform: matrix3d(1, 0, 0, 0, 0, 0.88518, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
390 |     51.851852% { transform: matrix3d(1, 0, 0, 0, 0, 1.09602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
391 |     52.592593% { transform: matrix3d(1, 0, 0, 0, 0, 1.09709, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
392 |     53.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1.04151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
393 |     54.074074% { transform: matrix3d(1, 0, 0, 0, 0, 1.00277, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
394 |     54.814815% { transform: matrix3d(1, 0, 0, 0, 0, 0.99083, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
395 |     55.555556% { transform: matrix3d(1, 0, 0, 0, 0, 0.99292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
396 |     56.296296% { transform: matrix3d(1, 0, 0, 0, 0.28328, 0.99755, 0, 0, 0, 0, 1, 0, -14.92121, 0, 0, 1); }
397 |     57.037037% { transform: matrix3d(1, 0, 0, 0, 0.52069, 1.0002, 0, 0, 0, 0, 1, 0, -25.94861, 0, 0, 1); }
398 |     57.777778% { transform: matrix3d(1, 0, 0, 0, 0.60536, 1.00079, 0, 0, 0, 0, 1, 0, -29.42354, 0, 0, 1); }
399 |     58.518519% { transform: matrix3d(1, 0, 0, 0, 0.57539, 1.00049, 0, 0, 0, 0, 1, 0, -28.22236, 0, 0, 1); }
400 |     59.259259% { transform: matrix3d(1, 0, 0, 0, 0.52172, 1.00013, 0, 0, 0, 0, 1, 0, -25.99242, 0, 0, 1); }
401 |     60% { transform: matrix3d(1, 0, 0, 0, 0.49007, 0.99996, 0, 0, 0, 0, 1, 0, -24.63046, 0, 0, 1); }
402 |     60.740741% { transform: matrix3d(1, 0, 0, 0, 0.48347, 0.99994, 0, 0, 0, 0, 1, 0, -24.34178, 0, 0, 1); }
403 |     61.481481% { transform: matrix3d(1, 0, 0, 0, 0.48945, 1, 0, 0, 0, 0, 1, 0, -24.60342, 0, 0, 1); }
404 |     62.222222% { transform: matrix3d(1, 0, 0, 0, 0.49672, 1, 0, 0, 0, 0, 1, 0, -24.91918, 0, 0, 1); }
405 |     62.962963% { transform: matrix3d(1, 0, 0, 0, 0.5004, 1, 0, 0, 0, 0, 1, 0, -25.07879, 0, 0, 1); }
406 |     63.703704% { transform: matrix3d(1, 0, 0, 0, 0.50073, 1, 0, 0, 0, 0, 1, 0, -25.09287, 0, 0, 1); }
407 |     64.444444% { transform: matrix3d(1, 0, 0, 0, 0.49965, 1, 0, 0, 0, 0, 1, 0, -25.04628, 0, 0, 1); }
408 |     65.185185% { transform: matrix3d(1, 0, 0, 0, 0.49866, 1, 0, 0, 0, 0, 1, 0, -25.0036, 0, 0, 1); }
409 |     65.925926% { transform: matrix3d(1, 0, 0, 0, 0.49826, 1, 0, 0, 0, 0, 1, 0, -24.98611, 0, 0, 1); }
410 |     66.666667% { transform: matrix3d(1, 0, 0, 0, 0.49829, 1, 0, 0, 0, 0, 1, 0, -24.98749, 0, 0, 1); }
411 |     67.407407% { transform: matrix3d(1, 0, 0, 0, 0.49858, 1, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
412 |     88.888889% { transform: matrix3d(1, 0, 0, 0, 0.49858, 1, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
413 |     89.62963% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.51685, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
414 |     90.37037% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.26714, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
415 |     91.111111% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.13807, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
416 |     91.851852% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.07136, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
417 |     92.592593% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.03688, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
418 |     93.333333% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.01906, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
419 |     94.074074% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.00985, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
420 |     94.814815% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.00509, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
421 |     95.555556% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.00263, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
422 |     96.296296% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.00136, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
423 |     97.037037% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.0007, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
424 |     97.777778% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.00036, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
425 |     98.518519% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.00019, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
426 |     99.259259% { transform: matrix3d(1, 0, 0, 0, 0.49858, 0.0001, 0, 0, 0, 0, 1, 0, -25, 0, 0, 1); }
427 |     100% { transform: scaleY(0) skewX(26.5deg); }
428 |   }
429 | 
430 |   /* Generated with Bounce.js. Edit at http://goo.gl/taI49K */
431 | 
432 |   @keyframes circle-6-line-grow-vertical-2 {
433 |     0% { transform: scaleY(0); }
434 |     49.62963% { transform: scaleY(0); }
435 |     50.37037% { transform: matrix3d(1, 0, 0, 0, 0, 0.34323, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
436 |     51.111111% { transform: matrix3d(1, 0, 0, 0, 0, 0.88518, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
437 |     51.851852% { transform: matrix3d(1, 0, 0, 0, 0, 1.09602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
438 |     52.592593% { transform: matrix3d(1, 0, 0, 0, 0, 1.09709, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
439 |     53.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1.04151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
440 |     54.074074% { transform: matrix3d(1, 0, 0, 0, 0, 1.00277, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
441 |     54.814815% { transform: matrix3d(1, 0, 0, 0, 0, 0.99083, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
442 |     55.555556% { transform: matrix3d(1, 0, 0, 0, 0, 0.99292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
443 |     56.296296% { transform: matrix3d(1, 0, 0, 0, -0.28328, 0.99755, 0, 0, 0, 0, 1, 0, 14.92121, 0, 0, 1); }
444 |     57.037037% { transform: matrix3d(1, 0, 0, 0, -0.52069, 1.0002, 0, 0, 0, 0, 1, 0, 25.94861, 0, 0, 1); }
445 |     57.777778% { transform: matrix3d(1, 0, 0, 0, -0.60536, 1.00079, 0, 0, 0, 0, 1, 0, 29.42354, 0, 0, 1); }
446 |     58.518519% { transform: matrix3d(1, 0, 0, 0, -0.57539, 1.00049, 0, 0, 0, 0, 1, 0, 28.22236, 0, 0, 1); }
447 |     59.259259% { transform: matrix3d(1, 0, 0, 0, -0.52172, 1.00013, 0, 0, 0, 0, 1, 0, 25.99242, 0, 0, 1); }
448 |     60% { transform: matrix3d(1, 0, 0, 0, -0.49007, 0.99996, 0, 0, 0, 0, 1, 0, 24.63046, 0, 0, 1); }
449 |     60.740741% { transform: matrix3d(1, 0, 0, 0, -0.48347, 0.99994, 0, 0, 0, 0, 1, 0, 24.34178, 0, 0, 1); }
450 |     61.481481% { transform: matrix3d(1, 0, 0, 0, -0.48945, 1, 0, 0, 0, 0, 1, 0, 24.60342, 0, 0, 1); }
451 |     62.222222% { transform: matrix3d(1, 0, 0, 0, -0.49672, 1, 0, 0, 0, 0, 1, 0, 24.91918, 0, 0, 1); }
452 |     62.962963% { transform: matrix3d(1, 0, 0, 0, -0.5004, 1, 0, 0, 0, 0, 1, 0, 25.07879, 0, 0, 1); }
453 |     63.703704% { transform: matrix3d(1, 0, 0, 0, -0.50073, 1, 0, 0, 0, 0, 1, 0, 25.09287, 0, 0, 1); }
454 |     64.444444% { transform: matrix3d(1, 0, 0, 0, -0.49965, 1, 0, 0, 0, 0, 1, 0, 25.04628, 0, 0, 1); }
455 |     65.185185% { transform: matrix3d(1, 0, 0, 0, -0.49866, 1, 0, 0, 0, 0, 1, 0, 25.0036, 0, 0, 1); }
456 |     65.925926% { transform: matrix3d(1, 0, 0, 0, -0.49826, 1, 0, 0, 0, 0, 1, 0, 24.98611, 0, 0, 1); }
457 |     66.666667% { transform: matrix3d(1, 0, 0, 0, -0.49829, 1, 0, 0, 0, 0, 1, 0, 24.98749, 0, 0, 1); }
458 |     67.407407% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
459 |     68.148148% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
460 |     68.888889% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
461 |     69.62963% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
462 |     70.37037% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
463 |     71.111111% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
464 |     71.851852% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
465 |     72.592593% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
466 |     73.333333% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
467 |     74.074074% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
468 |     74.814815% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
469 |     75.555556% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
470 |     76.296296% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
471 |     77.037037% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
472 |     77.777778% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
473 |     78.518519% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
474 |     79.259259% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
475 |     80% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
476 |     80.740741% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
477 |     81.481481% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
478 |     82.222222% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
479 |     82.962963% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
480 |     83.703704% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
481 |     84.444444% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
482 |     85.185185% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
483 |     85.925926% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
484 |     86.666667% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
485 |     87.407407% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
486 |     88.148148% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
487 |     88.888889% { transform: matrix3d(1, 0, 0, 0, -0.49858, 1, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
488 |     89.62963% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.51685, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
489 |     90.37037% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.26714, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
490 |     91.111111% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.13807, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
491 |     91.851852% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.07136, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
492 |     92.592593% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.03688, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
493 |     93.333333% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.01906, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
494 |     94.074074% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.00985, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
495 |     94.814815% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.00509, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
496 |     95.555556% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.00263, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
497 |     96.296296% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.00136, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
498 |     97.037037% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.0007, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
499 |     97.777778% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.00036, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
500 |     98.518519% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.00019, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
501 |     99.259259% { transform: matrix3d(1, 0, 0, 0, -0.49858, 0.0001, 0, 0, 0, 0, 1, 0, 25, 0, 0, 1); }
502 |     100% { transform: scaleY(0) skewX(-26.5deg); }
503 |   }
504 |   .spinner {
505 |     animation: circle-6-rotateAll 4.5s linear infinite both;
506 |   }
507 | 
508 |   .anim-1 {
509 |     animation: circle-6-g-move-bottom 4.5s linear infinite both;
510 |     circle {
511 |       animation: circle-6-anim-1-circle 4.5s linear infinite both;
512 |       transform-origin: 50% 50%;
513 |     }
514 |   }
515 | 
516 |   .anim-2 {
517 |     animation: circle-6-g-move-bottom 4.5s linear infinite both;
518 |     circle {
519 |       animation: circle-6-anim-2-circle 4.5s linear infinite both;
520 |       transform-origin: 50% 50%;
521 |     }
522 | 
523 |     line {
524 |       animation: circle-6-line-grow-horizontal-1 4.5s linear infinite both;
525 |       transform-origin: 100% 50%;
526 |     }
527 |   }
528 | 
529 |   .anim-3 {
530 |     circle {
531 |       animation: circle-6-anim-3-circle 4.5s linear infinite both;
532 |       transform-origin: 50% 50%;
533 |     }
534 | 
535 |     line:first-of-type {
536 |       animation: circle-6-line-grow-vertical-1 4.5s linear infinite both;
537 |       transform-origin: 50% 0%;
538 |     }
539 | 
540 |     line:last-of-type {
541 |       animation: circle-6-line-grow-vertical-2 4.5s linear infinite both;
542 |       transform-origin: 50% 0%;
543 |     }
544 |   }
545 | 
546 |   .anim-4 {
547 |     circle {
548 |       animation: circle-6-anim-4-circle 4.5s linear infinite both;
549 |       transform-origin: 50% 50%;
550 |     }
551 | 
552 |     line {
553 |       animation: circle-6-line-grow-horizontal-2 4.5s linear infinite both;
554 |       transform-origin: 100% 50%;
555 |     }
556 |   }
557 | </style>
558 | 


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