5 |
6 |
7 |
8 | *
9 | */
10 | @import "../variables";
11 |
12 | .sk-double-bounce {
13 | width: $spinkit-size;
14 | height: $spinkit-size;
15 | position: relative;
16 | margin: $spinkit-spinner-margin;
17 |
18 | .sk-child {
19 | width: 100%;
20 | height: 100%;
21 | border-radius: 50%;
22 | background-color: $spinkit-spinner-color;
23 | opacity: 0.6;
24 | position: absolute;
25 | top: 0;
26 | left: 0;
27 | animation: sk-doubleBounce 2.0s infinite ease-in-out;
28 | }
29 |
30 | .sk-double-bounce2 {
31 | animation-delay: -1.0s;
32 | }
33 | }
34 |
35 | @keyframes sk-doubleBounce {
36 | 0%, 100% { transform: scale(0) }
37 | 50% { transform: scale(1.0) }
38 | }
39 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/scss/spinners/7-three-bounce.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 |
9 | *
10 | */
11 | @import "../variables";
12 |
13 | .sk-three-bounce {
14 | $animationDuration: 1.4s;
15 | $delayRange: 0.32s;
16 | margin: $spinkit-spinner-margin;
17 | width: $spinkit-size * 2;
18 | text-align: center;
19 |
20 | .sk-child {
21 | width: $spinkit-size / 2;
22 | height: $spinkit-size / 2;
23 | background-color: $spinkit-spinner-color;
24 |
25 | border-radius: 100%;
26 | display: inline-block;
27 | animation: sk-three-bounce $animationDuration ease-in-out 0s infinite both;
28 | }
29 |
30 | .sk-bounce1 { animation-delay: -$delayRange; }
31 | .sk-bounce2 { animation-delay: -$delayRange / 2; }
32 | }
33 |
34 | @keyframes sk-three-bounce {
35 | 0%, 80%, 100% {
36 | transform: scale(0);
37 | } 40% {
38 | transform: scale(1.0);
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Gladeye
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/5-pulse.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | *
12 | */
13 | @import "../variables";
14 |
15 | .sk-wave {
16 | $rectCount: 5;
17 | $animationDuration: 1.2s;
18 | $delayRange: 0.4s;
19 |
20 | margin: $spinkit-spinner-margin;
21 | width: $spinkit-size * 1.25;
22 | height: $spinkit-size;
23 | text-align: center;
24 | font-size: 10px;
25 |
26 | .sk-rect {
27 | background-color: $spinkit-spinner-color;
28 | height: 100%;
29 | width: 6px;
30 | display: inline-block;
31 | animation: sk-waveStretchDelay $animationDuration infinite ease-in-out;
32 | }
33 |
34 | @for $i from 1 through $rectCount {
35 | .sk-rect#{$i} { animation-delay: - $animationDuration + $delayRange / ($rectCount - 1) * ($i - 1); }
36 | }
37 | }
38 |
39 | @keyframes sk-waveStretchDelay {
40 | 0%, 40%, 100% { transform: scaleY(0.4) }
41 | 20% { transform: scaleY(1.0) }
42 | }
43 |
--------------------------------------------------------------------------------
/tests/__init.test.js:
--------------------------------------------------------------------------------
1 | /* global sinon, setup, teardown */
2 |
3 | /**
4 | * __init.test.js is run before every test case.
5 | */
6 | window.debug = true;
7 | $ = jQuery = require('jquery');
8 | var AScene = require('aframe').AScene;
9 |
10 | navigator.getVRDisplays = function () {
11 | var resolvePromise = Promise.resolve();
12 | var mockVRDisplay = {
13 | requestPresent: resolvePromise,
14 | exitPresent: resolvePromise,
15 | getPose: function () { return {orientation: null, position: null}; },
16 | requestAnimationFrame: function () { return 1; }
17 | };
18 | return Promise.resolve([mockVRDisplay]);
19 | };
20 |
21 | setup(function () {
22 | this.sinon = sinon.sandbox.create();
23 | // Stubs to not create a WebGL context since Travis CI runs headless.
24 | this.sinon.stub(AScene.prototype, 'render');
25 | this.sinon.stub(AScene.prototype, 'resize');
26 | this.sinon.stub(AScene.prototype, 'setupRenderer');
27 | });
28 |
29 | teardown(function () {
30 | // Clean up any attached elements.
31 | var attachedEls = ['canvas', 'a-assets', 'a-scene'];
32 | var els = document.querySelectorAll(attachedEls.join(','));
33 | for (var i = 0; i < els.length; i++) {
34 | els[i].parentNode.removeChild(els[i]);
35 | }
36 | this.sinon.restore();
37 | });
38 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/scss/spinners/6-chasing-dots.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 | *
9 | */
10 | @import "../variables";
11 |
12 | .sk-chasing-dots {
13 | $animationDuration: 2.0s;
14 |
15 | margin: $spinkit-spinner-margin;
16 | width: $spinkit-size;
17 | height: $spinkit-size;
18 | position: relative;
19 | text-align: center;
20 | animation: sk-chasingDotsRotate $animationDuration infinite linear;
21 |
22 | .sk-child {
23 | width: 60%;
24 | height: 60%;
25 | display: inline-block;
26 | position: absolute;
27 | top: 0;
28 | background-color: $spinkit-spinner-color;
29 | border-radius: 100%;
30 | animation: sk-chasingDotsBounce $animationDuration infinite ease-in-out;
31 | }
32 |
33 | .sk-dot2 {
34 | top: auto;
35 | bottom: 0;
36 | animation-delay: - $animationDuration/2;
37 | }
38 | }
39 |
40 | @keyframes sk-chasingDotsRotate {
41 | 100% {
42 | transform: rotate(360deg);
43 | }
44 | }
45 |
46 | @keyframes sk-chasingDotsBounce {
47 | 0%, 100% {
48 | transform: scale(0);
49 | } 50% {
50 | transform: scale(1.0);
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/css/spinners/2-double-bounce.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 | *
9 | */
10 | .sk-double-bounce {
11 | width: 40px;
12 | height: 40px;
13 | position: relative;
14 | margin: 40px auto; }
15 | .sk-double-bounce .sk-child {
16 | width: 100%;
17 | height: 100%;
18 | border-radius: 50%;
19 | background-color: #333;
20 | opacity: 0.6;
21 | position: absolute;
22 | top: 0;
23 | left: 0;
24 | -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
25 | animation: sk-doubleBounce 2s infinite ease-in-out; }
26 | .sk-double-bounce .sk-double-bounce2 {
27 | -webkit-animation-delay: -1.0s;
28 | animation-delay: -1.0s; }
29 |
30 | @-webkit-keyframes sk-doubleBounce {
31 | 0%, 100% {
32 | -webkit-transform: scale(0);
33 | transform: scale(0); }
34 | 50% {
35 | -webkit-transform: scale(1);
36 | transform: scale(1); } }
37 |
38 | @keyframes sk-doubleBounce {
39 | 0%, 100% {
40 | -webkit-transform: scale(0);
41 | transform: scale(0); }
42 | 50% {
43 | -webkit-transform: scale(1);
44 | transform: scale(1); } }
45 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/css/spinners/7-three-bounce.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 |
9 | *
10 | */
11 | .sk-three-bounce {
12 | margin: 40px auto;
13 | width: 80px;
14 | text-align: center; }
15 | .sk-three-bounce .sk-child {
16 | width: 20px;
17 | height: 20px;
18 | background-color: #333;
19 | border-radius: 100%;
20 | display: inline-block;
21 | -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
22 | animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
23 | .sk-three-bounce .sk-bounce1 {
24 | -webkit-animation-delay: -0.32s;
25 | animation-delay: -0.32s; }
26 | .sk-three-bounce .sk-bounce2 {
27 | -webkit-animation-delay: -0.16s;
28 | animation-delay: -0.16s; }
29 |
30 | @-webkit-keyframes sk-three-bounce {
31 | 0%, 80%, 100% {
32 | -webkit-transform: scale(0);
33 | transform: scale(0); }
34 | 40% {
35 | -webkit-transform: scale(1);
36 | transform: scale(1); } }
37 |
38 | @keyframes sk-three-bounce {
39 | 0%, 80%, 100% {
40 | -webkit-transform: scale(0);
41 | transform: scale(0); }
42 | 40% {
43 | -webkit-transform: scale(1);
44 | transform: scale(1); } }
45 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/scss/spinners/4-wandering-cubes.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 | *
9 | */
10 | @import "../variables";
11 |
12 | .sk-wandering-cubes {
13 | $animationDuration: 1.8s;
14 |
15 | margin: $spinkit-spinner-margin;
16 | width: $spinkit-size;
17 | height: $spinkit-size;
18 | position: relative;
19 |
20 | .sk-cube {
21 | background-color: $spinkit-spinner-color;
22 | width: 10px;
23 | height: 10px;
24 | position: absolute;
25 | top: 0;
26 | left: 0;
27 | animation: sk-wanderingCube $animationDuration ease-in-out #{-$animationDuration} infinite both;
28 | }
29 |
30 | .sk-cube2 {
31 | animation-delay: -$animationDuration / 2;
32 | }
33 | }
34 |
35 | @keyframes sk-wanderingCube {
36 | $cubeDistance: 30px;
37 | 0% {
38 | transform: rotate(0deg);
39 | } 25% {
40 | transform: translateX($cubeDistance) rotate(-90deg) scale(0.5);
41 | } 50% {
42 | /* Hack to make FF rotate in the right direction */
43 | transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-179deg);
44 | } 50.1% {
45 | transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-180deg);
46 | } 75% {
47 | transform: translateX(0) translateY($cubeDistance) rotate(-270deg) scale(0.5);
48 | } 100% {
49 | transform: rotate(-360deg);
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/css/spinners/1-rotating-plane.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 | *
6 | */
7 | .sk-rotating-plane {
8 | width: 40px;
9 | height: 40px;
10 | background-color: #333;
11 | margin: 40px auto;
12 | -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
13 | animation: sk-rotatePlane 1.2s infinite ease-in-out; }
14 |
15 | @-webkit-keyframes sk-rotatePlane {
16 | 0% {
17 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
18 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
19 | 50% {
20 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
21 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
22 | 100% {
23 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
24 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
25 |
26 | @keyframes sk-rotatePlane {
27 | 0% {
28 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
29 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
30 | 50% {
31 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
32 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
33 | 100% {
34 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
35 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
36 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/2-double-bounce.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
57 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/scss/spinners/9-cube-grid.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | *
16 | */
17 | @import "../variables";
18 |
19 | .sk-cube-grid {
20 | $delayRange: 0.4s;
21 |
22 | width: $spinkit-size;
23 | height: $spinkit-size;
24 | margin: $spinkit-spinner-margin;
25 |
26 | .sk-cube {
27 | width: 33.33%;
28 | height: 33.33%;
29 | background-color: $spinkit-spinner-color;
30 | float: left;
31 | animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
32 | }
33 |
34 | /*
35 | * Spinner positions
36 | * 1 2 3
37 | * 4 5 6
38 | * 7 8 9
39 | */
40 |
41 | .sk-cube1 { animation-delay: $delayRange * 0.50 }
42 | .sk-cube2 { animation-delay: $delayRange * 0.75 }
43 | .sk-cube3 { animation-delay: $delayRange }
44 | .sk-cube4 { animation-delay: $delayRange * 0.25 }
45 | .sk-cube5 { animation-delay: $delayRange * 0.50 }
46 | .sk-cube6 { animation-delay: $delayRange * 0.75 }
47 | .sk-cube7 { animation-delay: 0.0s }
48 | .sk-cube8 { animation-delay: $delayRange * 0.25 }
49 | .sk-cube9 { animation-delay: $delayRange * 0.50 }
50 | }
51 |
52 | @keyframes sk-cubeGridScaleDelay {
53 | 0%, 70%, 100% { transform:scale3D(1.0, 1.0, 1.0) }
54 | 35% { transform:scale3D(0.0, 0.0, 1.0) }
55 | }
56 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/1-rotating-plane.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | *
9 | */
10 | .sk-chasing-dots {
11 | margin: 40px auto;
12 | width: 40px;
13 | height: 40px;
14 | position: relative;
15 | text-align: center;
16 | -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
17 | animation: sk-chasingDotsRotate 2s infinite linear; }
18 | .sk-chasing-dots .sk-child {
19 | width: 60%;
20 | height: 60%;
21 | display: inline-block;
22 | position: absolute;
23 | top: 0;
24 | background-color: #333;
25 | border-radius: 100%;
26 | -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
27 | animation: sk-chasingDotsBounce 2s infinite ease-in-out; }
28 | .sk-chasing-dots .sk-dot2 {
29 | top: auto;
30 | bottom: 0;
31 | -webkit-animation-delay: -1s;
32 | animation-delay: -1s; }
33 |
34 | @-webkit-keyframes sk-chasingDotsRotate {
35 | 100% {
36 | -webkit-transform: rotate(360deg);
37 | transform: rotate(360deg); } }
38 |
39 | @keyframes sk-chasingDotsRotate {
40 | 100% {
41 | -webkit-transform: rotate(360deg);
42 | transform: rotate(360deg); } }
43 |
44 | @-webkit-keyframes sk-chasingDotsBounce {
45 | 0%, 100% {
46 | -webkit-transform: scale(0);
47 | transform: scale(0); }
48 | 50% {
49 | -webkit-transform: scale(1);
50 | transform: scale(1); } }
51 |
52 | @keyframes sk-chasingDotsBounce {
53 | 0%, 100% {
54 | -webkit-transform: scale(0);
55 | transform: scale(0); }
56 | 50% {
57 | -webkit-transform: scale(1);
58 | transform: scale(1); } }
59 |
--------------------------------------------------------------------------------
/tests/helpers.js:
--------------------------------------------------------------------------------
1 | /* global suite */
2 |
3 | /**
4 | * Helper method to create a scene, create an entity, add entity to scene,
5 | * add scene to document.
6 | *
7 | * @returns {object} An `
5 |
6 |
7 |
8 |
9 |
10 |
11 | *
12 | */
13 | .sk-wave {
14 | margin: 40px auto;
15 | width: 50px;
16 | height: 40px;
17 | text-align: center;
18 | font-size: 10px; }
19 | .sk-wave .sk-rect {
20 | background-color: #333;
21 | height: 100%;
22 | width: 6px;
23 | display: inline-block;
24 | -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
25 | animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
26 | .sk-wave .sk-rect1 {
27 | -webkit-animation-delay: -1.2s;
28 | animation-delay: -1.2s; }
29 | .sk-wave .sk-rect2 {
30 | -webkit-animation-delay: -1.1s;
31 | animation-delay: -1.1s; }
32 | .sk-wave .sk-rect3 {
33 | -webkit-animation-delay: -1s;
34 | animation-delay: -1s; }
35 | .sk-wave .sk-rect4 {
36 | -webkit-animation-delay: -0.9s;
37 | animation-delay: -0.9s; }
38 | .sk-wave .sk-rect5 {
39 | -webkit-animation-delay: -0.8s;
40 | animation-delay: -0.8s; }
41 |
42 | @-webkit-keyframes sk-waveStretchDelay {
43 | 0%, 40%, 100% {
44 | -webkit-transform: scaleY(0.4);
45 | transform: scaleY(0.4); }
46 | 20% {
47 | -webkit-transform: scaleY(1);
48 | transform: scaleY(1); } }
49 |
50 | @keyframes sk-waveStretchDelay {
51 | 0%, 40%, 100% {
52 | -webkit-transform: scaleY(0.4);
53 | transform: scaleY(0.4); }
54 | 20% {
55 | -webkit-transform: scaleY(1);
56 | transform: scaleY(1); } }
57 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/scss/spinners/11-folding-cube.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 |
9 |
10 | *
11 | */
12 | @import "../variables";
13 |
14 | .sk-folding-cube {
15 | $cubeCount: 4;
16 | $animationDuration: 2.4s;
17 | $delayRange: $animationDuration/2;
18 |
19 | margin: $spinkit-spinner-margin;
20 | width: $spinkit-size;
21 | height: $spinkit-size;
22 | position: relative;
23 | transform: rotateZ(45deg);
24 |
25 | .sk-cube {
26 | float: left;
27 | width: 50%;
28 | height: 50%;
29 | position: relative;
30 | transform: scale(1.1);
31 | }
32 |
33 | .sk-cube:before {
34 | content: '';
35 | position: absolute;
36 | top: 0;
37 | left: 0;
38 | width: 100%;
39 | height: 100%;
40 | background-color: $spinkit-spinner-color;
41 | animation: sk-foldCubeAngle $animationDuration infinite linear both;
42 | transform-origin: 100% 100%;
43 | }
44 |
45 | // Rotation / angle
46 | @for $i from 2 through $cubeCount {
47 | .sk-cube#{$i} {
48 | transform: scale(1.1) rotateZ(90deg * ($i - 1));
49 | }
50 | }
51 |
52 | @for $i from 2 through $cubeCount {
53 | .sk-cube#{$i}:before {
54 | animation-delay: $delayRange / $cubeCount * ($i - 1);
55 | }
56 | }
57 | }
58 |
59 | @keyframes sk-foldCubeAngle {
60 | 0%, 10% {
61 | transform: perspective(140px) rotateX(-180deg);
62 | opacity: 0;
63 | } 25%, 75% {
64 | transform: perspective(140px) rotateX(0deg);
65 | opacity: 1;
66 | } 90%, 100% {
67 | transform: perspective(140px) rotateY(180deg);
68 | opacity: 0;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/7-three-bounce.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
57 |
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/scss/spinners/8-circle.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | *
19 | */
20 | @import "../variables";
21 |
22 | .sk-circle {
23 | $circleCount: 12;
24 | $animationDuration: 1.2s;
25 |
26 | margin: $spinkit-spinner-margin;
27 | width: $spinkit-size;
28 | height: $spinkit-size;
29 | position: relative;
30 |
31 | .sk-child {
32 | width: 100%;
33 | height: 100%;
34 | position: absolute;
35 | left: 0;
36 | top: 0;
37 | }
38 |
39 | .sk-child:before {
40 | content: '';
41 | display: block;
42 | margin: 0 auto;
43 | width: 15%;
44 | height: 15%;
45 | background-color: $spinkit-spinner-color;
46 | border-radius: 100%;
47 | animation: sk-circleBounceDelay $animationDuration infinite ease-in-out both;
48 | }
49 |
50 | @for $i from 2 through $circleCount {
51 | .sk-circle#{$i} { transform: rotate(360deg / $circleCount * ($i - 1)); }
52 | }
53 |
54 | @for $i from 2 through $circleCount {
55 | .sk-circle#{$i}:before { animation-delay: - $animationDuration + $animationDuration / $circleCount * ($i - 1); }
56 | }
57 | }
58 |
59 | @keyframes sk-circleBounceDelay {
60 | 0%, 80%, 100% { transform: scale(0) }
61 | 40% { transform: scale(1.0) }
62 | }
63 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/scss/spinners/10-fading-circle.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | *
19 | */
20 | @import "../variables";
21 |
22 | .sk-fading-circle {
23 | $circleCount: 12;
24 | $animationDuration: 1.2s;
25 |
26 | margin: $spinkit-spinner-margin;
27 | width: $spinkit-size;
28 | height: $spinkit-size;
29 | position: relative;
30 |
31 | .sk-circle {
32 | width: 100%;
33 | height: 100%;
34 | position: absolute;
35 | left: 0;
36 | top: 0;
37 | }
38 |
39 | .sk-circle:before {
40 | content: '';
41 | display: block;
42 | margin: 0 auto;
43 | width: 15%;
44 | height: 15%;
45 | background-color: $spinkit-spinner-color;
46 | border-radius: 100%;
47 | animation: sk-circleFadeDelay $animationDuration infinite ease-in-out both;
48 | }
49 |
50 | @for $i from 2 through $circleCount {
51 | .sk-circle#{$i} { transform: rotate(360deg / $circleCount * ($i - 1)); }
52 | }
53 |
54 | @for $i from 2 through $circleCount {
55 | .sk-circle#{$i}:before { animation-delay: - $animationDuration + $animationDuration / $circleCount * ($i - 1); }
56 | }
57 |
58 | }
59 |
60 | @keyframes sk-circleFadeDelay {
61 | 0%, 39%, 100% { opacity: 0 }
62 | 40% { opacity: 1 }
63 | }
64 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Pull Request Guidelines
2 |
3 | We all love Pull Requests so if you have something you'd like to share with the community we'd be happy to help you out with contributing. But before you create your PR please read and understand the following. :heart:
4 |
5 | ## Code
6 |
7 | If you're submitting a new animation, make sure that it looks identical in [all browsers that support CSS animations](http://caniuse.com/css-animation).
8 |
9 | The animation styles should be put in an [SCSS](http://sass-lang.com/) file which you place in [scss/spinners/](https://github.com/tobiasahlin/SpinKit/blob/master/scss/spinners). It must also be imported in [scss/spinkit.scss](https://github.com/tobiasahlin/SpinKit/blob/master/scss/spinkit.scss). Carefully look at the existing spinners to make sure you follow the same conventions and that you list an example on top of the page exactly like the other spinners (we extract this when generating the HTML files). Don't use any browser prefixes as this will be added automatically to the generated CSS files by [autoprefixer](https://github.com/postcss/autoprefixer).
10 |
11 | To generate the CSS and HTML files you need to have [node.js](http://nodejs.org/) installed on your system. After that you need to issue `npm install` from the SpinKit project directory to install [gulp](https://github.com/gulpjs/gulp) and other dependencies listed in `package.json`. After doing this you should be able to just call `gulp build` to generate the files. These files should be included in your pull requests.
12 |
13 |
14 | ## Style
15 |
16 | Following the same code style makes all of our lives a bit easier, currently we ask that you use:
17 |
18 | - 2 spaces for indenting
19 | - No trailing spaces
20 | - One trailing newline at the end of each file
21 |
22 | If you use Sublime Text (or any other editor with the same capability) you can install EditorConfig (through [Sublime Package Control](https://sublime.wbond.net/installation)), which will pick up our project's `.editorconfig` and make your file conform to above rules on each save.
23 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/6-chasing-dots.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
71 |
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/3-wave.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/css/spinners/9-cube-grid.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | *
16 | */
17 | .sk-cube-grid {
18 | width: 40px;
19 | height: 40px;
20 | margin: 40px auto;
21 | /*
22 | * Spinner positions
23 | * 1 2 3
24 | * 4 5 6
25 | * 7 8 9
26 | */ }
27 | .sk-cube-grid .sk-cube {
28 | width: 33.33%;
29 | height: 33.33%;
30 | background-color: #333;
31 | float: left;
32 | -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
33 | animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
34 | .sk-cube-grid .sk-cube1 {
35 | -webkit-animation-delay: 0.2s;
36 | animation-delay: 0.2s; }
37 | .sk-cube-grid .sk-cube2 {
38 | -webkit-animation-delay: 0.3s;
39 | animation-delay: 0.3s; }
40 | .sk-cube-grid .sk-cube3 {
41 | -webkit-animation-delay: 0.4s;
42 | animation-delay: 0.4s; }
43 | .sk-cube-grid .sk-cube4 {
44 | -webkit-animation-delay: 0.1s;
45 | animation-delay: 0.1s; }
46 | .sk-cube-grid .sk-cube5 {
47 | -webkit-animation-delay: 0.2s;
48 | animation-delay: 0.2s; }
49 | .sk-cube-grid .sk-cube6 {
50 | -webkit-animation-delay: 0.3s;
51 | animation-delay: 0.3s; }
52 | .sk-cube-grid .sk-cube7 {
53 | -webkit-animation-delay: 0.0s;
54 | animation-delay: 0.0s; }
55 | .sk-cube-grid .sk-cube8 {
56 | -webkit-animation-delay: 0.1s;
57 | animation-delay: 0.1s; }
58 | .sk-cube-grid .sk-cube9 {
59 | -webkit-animation-delay: 0.2s;
60 | animation-delay: 0.2s; }
61 |
62 | @-webkit-keyframes sk-cubeGridScaleDelay {
63 | 0%, 70%, 100% {
64 | -webkit-transform: scale3D(1, 1, 1);
65 | transform: scale3D(1, 1, 1); }
66 | 35% {
67 | -webkit-transform: scale3D(0, 0, 1);
68 | transform: scale3D(0, 0, 1); } }
69 |
70 | @keyframes sk-cubeGridScaleDelay {
71 | 0%, 70%, 100% {
72 | -webkit-transform: scale3D(1, 1, 1);
73 | transform: scale3D(1, 1, 1); }
74 | 35% {
75 | -webkit-transform: scale3D(0, 0, 1);
76 | transform: scale3D(0, 0, 1); } }
77 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@gladeye/aframe-preloader-component",
3 | "version": "1.0.2",
4 | "description": "A preloading animation that automatically displays while scene assets load.",
5 | "main": "index.js",
6 | "cdn": "dist/aframe-preloader-component.min.js",
7 | "scripts": {
8 | "dev": "budo index.js:dist/aframe-preloader-component.min.js --port 7000 --live --open",
9 | "dist": "webpack index.js dist/aframe-preloader-component.js && webpack -p index.js dist/aframe-preloader-component.min.js",
10 | "lint": "semistandard -v | snazzy",
11 | "preghpages": "rm -rf gh-pages && mkdir gh-pages && cp index.html gh-pages && cp -r dist gh-pages && cp -r examples gh-pages",
12 | "ghpages": "npm run preghpages && ghpages -p gh-pages",
13 | "start": "npm run dev",
14 | "test": "karma start ./tests/karma.conf.js",
15 | "test:firefox": "karma start ./tests/karma.conf.js --browsers Firefox",
16 | "test:chrome": "karma start ./tests/karma.conf.js --browsers Chrome"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/gladeye/aframe-preloader-component.git"
21 | },
22 | "keywords": [
23 | "aframe",
24 | "aframe-component",
25 | "aframe-vr",
26 | "vr",
27 | "mozvr",
28 | "webvr",
29 | "preloader"
30 | ],
31 | "author": "Michael Andrew
5 |
6 |
7 |
8 | *
9 | */
10 | .sk-wandering-cubes {
11 | margin: 40px auto;
12 | width: 40px;
13 | height: 40px;
14 | position: relative; }
15 | .sk-wandering-cubes .sk-cube {
16 | background-color: #333;
17 | width: 10px;
18 | height: 10px;
19 | position: absolute;
20 | top: 0;
21 | left: 0;
22 | -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
23 | animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; }
24 | .sk-wandering-cubes .sk-cube2 {
25 | -webkit-animation-delay: -0.9s;
26 | animation-delay: -0.9s; }
27 |
28 | @-webkit-keyframes sk-wanderingCube {
29 | 0% {
30 | -webkit-transform: rotate(0deg);
31 | transform: rotate(0deg); }
32 | 25% {
33 | -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
34 | transform: translateX(30px) rotate(-90deg) scale(0.5); }
35 | 50% {
36 | /* Hack to make FF rotate in the right direction */
37 | -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
38 | transform: translateX(30px) translateY(30px) rotate(-179deg); }
39 | 50.1% {
40 | -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
41 | transform: translateX(30px) translateY(30px) rotate(-180deg); }
42 | 75% {
43 | -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
44 | transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
45 | 100% {
46 | -webkit-transform: rotate(-360deg);
47 | transform: rotate(-360deg); } }
48 |
49 | @keyframes sk-wanderingCube {
50 | 0% {
51 | -webkit-transform: rotate(0deg);
52 | transform: rotate(0deg); }
53 | 25% {
54 | -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
55 | transform: translateX(30px) rotate(-90deg) scale(0.5); }
56 | 50% {
57 | /* Hack to make FF rotate in the right direction */
58 | -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
59 | transform: translateX(30px) translateY(30px) rotate(-179deg); }
60 | 50.1% {
61 | -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
62 | transform: translateX(30px) translateY(30px) rotate(-180deg); }
63 | 75% {
64 | -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
65 | transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
66 | 100% {
67 | -webkit-transform: rotate(-360deg);
68 | transform: rotate(-360deg); } }
69 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/assets/js/main.js:
--------------------------------------------------------------------------------
1 | function getQueryVariable(variable)
2 | {
3 | var query = window.location.search.substring(1);
4 | var vars = query.split("&");
5 | for (var i=0;i
5 |
6 |
7 |
8 |
9 |
10 | *
11 | */
12 | .sk-folding-cube {
13 | margin: 40px auto;
14 | width: 40px;
15 | height: 40px;
16 | position: relative;
17 | -webkit-transform: rotateZ(45deg);
18 | transform: rotateZ(45deg); }
19 | .sk-folding-cube .sk-cube {
20 | float: left;
21 | width: 50%;
22 | height: 50%;
23 | position: relative;
24 | -webkit-transform: scale(1.1);
25 | -ms-transform: scale(1.1);
26 | transform: scale(1.1); }
27 | .sk-folding-cube .sk-cube:before {
28 | content: '';
29 | position: absolute;
30 | top: 0;
31 | left: 0;
32 | width: 100%;
33 | height: 100%;
34 | background-color: #333;
35 | -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
36 | animation: sk-foldCubeAngle 2.4s infinite linear both;
37 | -webkit-transform-origin: 100% 100%;
38 | -ms-transform-origin: 100% 100%;
39 | transform-origin: 100% 100%; }
40 | .sk-folding-cube .sk-cube2 {
41 | -webkit-transform: scale(1.1) rotateZ(90deg);
42 | transform: scale(1.1) rotateZ(90deg); }
43 | .sk-folding-cube .sk-cube3 {
44 | -webkit-transform: scale(1.1) rotateZ(180deg);
45 | transform: scale(1.1) rotateZ(180deg); }
46 | .sk-folding-cube .sk-cube4 {
47 | -webkit-transform: scale(1.1) rotateZ(270deg);
48 | transform: scale(1.1) rotateZ(270deg); }
49 | .sk-folding-cube .sk-cube2:before {
50 | -webkit-animation-delay: 0.3s;
51 | animation-delay: 0.3s; }
52 | .sk-folding-cube .sk-cube3:before {
53 | -webkit-animation-delay: 0.6s;
54 | animation-delay: 0.6s; }
55 | .sk-folding-cube .sk-cube4:before {
56 | -webkit-animation-delay: 0.9s;
57 | animation-delay: 0.9s; }
58 |
59 | @-webkit-keyframes sk-foldCubeAngle {
60 | 0%, 10% {
61 | -webkit-transform: perspective(140px) rotateX(-180deg);
62 | transform: perspective(140px) rotateX(-180deg);
63 | opacity: 0; }
64 | 25%, 75% {
65 | -webkit-transform: perspective(140px) rotateX(0deg);
66 | transform: perspective(140px) rotateX(0deg);
67 | opacity: 1; }
68 | 90%, 100% {
69 | -webkit-transform: perspective(140px) rotateY(180deg);
70 | transform: perspective(140px) rotateY(180deg);
71 | opacity: 0; } }
72 |
73 | @keyframes sk-foldCubeAngle {
74 | 0%, 10% {
75 | -webkit-transform: perspective(140px) rotateX(-180deg);
76 | transform: perspective(140px) rotateX(-180deg);
77 | opacity: 0; }
78 | 25%, 75% {
79 | -webkit-transform: perspective(140px) rotateX(0deg);
80 | transform: perspective(140px) rotateX(0deg);
81 | opacity: 1; }
82 | 90%, 100% {
83 | -webkit-transform: perspective(140px) rotateY(180deg);
84 | transform: perspective(140px) rotateY(180deg);
85 | opacity: 0; } }
86 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/4-wandering-cubes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
81 |
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/9-cube-grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/assets/css/style.css:
--------------------------------------------------------------------------------
1 | #preloader-modal .preloader-modal__spinner{
2 | display: inline-block;
3 | margin-bottom: 2em;
4 | }
5 |
6 | #preloader-modal .preloader-modal__spinner{
7 | transform: scale3d(2,2,1);
8 | }
9 |
10 | #preloader-modal .btn{
11 | margin-top: 2em;
12 | }
13 |
14 | /* SPINKIT CUSTOMIZATION CLASSES */
15 |
16 |
17 | /* sk-rotating-plane */
18 |
19 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-rotating-plane{
20 | background-color: #009900;
21 | }
22 |
23 | #preloader-modal .preloader-modal__spinner.sk-rotating-plane{
24 | background-color: #c8c8c8;
25 | }
26 |
27 | /* sk-double-bounce */
28 |
29 | #preloader-modal .preloader-modal__spinner.sk-double-bounce .sk-child{
30 | background-color: #c8c8c8;
31 | }
32 |
33 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-double-bounce .sk-child{
34 | background-color: #009900;
35 | }
36 |
37 | /* sk-wave */
38 |
39 | #preloader-modal .preloader-modal__spinner.sk-wave .sk-rect{
40 | background-color: #c8c8c8;
41 | }
42 |
43 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-wave .sk-rect{
44 | background-color: #009900;
45 | }
46 |
47 | /* sk-wandering-cubes */
48 |
49 | #preloader-modal .preloader-modal__spinner.sk-wandering-cubes .sk-cube{
50 | background-color: #c8c8c8;
51 | }
52 |
53 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-wandering-cubes .sk-cube{
54 | background-color: #009900;
55 | }
56 |
57 | /* sk-spinner-pulse */
58 |
59 | #preloader-modal .preloader-modal__spinner.sk-spinner-pulse{
60 | background-color: #c8c8c8;
61 | }
62 |
63 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-spinner-pulse{
64 | background-color: #009900;
65 | }
66 |
67 | /* sk-chasing-dots */
68 |
69 | #preloader-modal .preloader-modal__spinner.sk-chasing-dots{
70 | transform: none;
71 | }
72 |
73 | #preloader-modal .preloader-modal__spinner.sk-chasing-dots .sk-child{
74 | background-color: #c8c8c8;
75 | }
76 |
77 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-chasing-dots .sk-child{
78 | background-color: #009900;
79 | }
80 |
81 | /* sk-three-bounce */
82 |
83 | #preloader-modal .preloader-modal__spinner.sk-three-bounce .sk-child{
84 | background-color: #c8c8c8;
85 | }
86 |
87 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-three-bounce .sk-child{
88 | background-color: #009900;
89 | }
90 |
91 | /* sk-cube-grid */
92 |
93 | #preloader-modal .preloader-modal__spinner.sk-cube-grid .sk-cube{
94 | background-color: #c8c8c8;
95 | }
96 |
97 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-cube-grid .sk-cube{
98 | background-color: #009900;
99 | }
100 |
101 | /* sk-folding-cube */
102 |
103 | #preloader-modal .preloader-modal__spinner.sk-folding-cube .sk-cube{
104 | background-color: #c8c8c8;
105 | }
106 |
107 | #preloader-modal .preloader-modal__spinner.sk-folding-cube .sk-cube:before{
108 | background-color: #535353;
109 | }
110 |
111 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-folding-cube .sk-cube{
112 | background-color: #009900;
113 | }
114 |
115 | #preloader-modal.preloader-modal__complete .preloader-modal__spinner.sk-folding-cube .sk-cube:before{
116 | background-color: #004700;
117 | }
118 |
119 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/11-folding-cube.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/examples/bootstrap/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
25 | 
26 | A-Frame Preloader Component
51 | 52 |Basic Usage
53 | 54 |These examples demonstrate dropping in the preloader component to easily add a loading bar to your scenes.
55 | 56 |-
57 |
-
58 |
59 |
Bootstrap Default
60 |Example showing a full-screen Bootstrap modal preloader. Blocks the entire view until preloading is complete.
61 |
62 | -
63 |
64 |
Bootstrap Small
65 |Example showing a small Bootstrap modal preloader with close button. Useful if you want part of the scene to load while the user waits for large assets to download.
66 |
67 |
68 |
Advanced Usage
71 | 72 |These examples show how to specify your own preloader modal using Bootstrap and third party CSS libraries for 73 | displaying a custom spinner in place of the loading bar.
74 | 75 |-
76 |
-
77 |
78 |
Font Awesome + Bootstrap
79 |Uses custom preloader modal in HTML with custom animation and continue button. Spinner is provided by Font Awesome.
80 |
81 | -
82 |
83 |
Spinkit + Bootstrap
84 |Uses custom preloader modal in HTML with custom animation. Spinner is provided by Spinkit.
85 | 86 | Rotating Plane 87 | Double Bounce 88 | Wave 89 | Wandering Cubes 90 | Pulse 91 | Chasing Dots 92 | Three Bounce 93 | Cube Grid 94 | Folding Cube 95 |
96 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/examples/8-circle.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
--------------------------------------------------------------------------------
/dist/aframe-preloader-component.min.js:
--------------------------------------------------------------------------------
1 | !function(t){function e(s){if(a[s])return a[s].exports;var o=a[s]={exports:{},id:s,loaded:!1};return t[s].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e){if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");String.prototype.format||(String.prototype.format=function(){var t=arguments;return this.replace(/{(\d+)}/g,function(e,a){return"undefined"!=typeof t[a]?t[a]:e})}),AFRAME.registerSystem("preloader",{schema:{type:{type:"string",default:"bootstrap"},id:{type:"string",default:"preloader-modal"},autoInject:{type:"boolean",default:!0},target:{type:"selector",default:"#preloader-modal"},progressValueAttr:{type:"string",default:"aria-valuenow"},barProgressStyle:{type:"string",default:"width"},bar:{type:"selector",default:"#preloader-modal .progress-bar"},label:{type:"selector",default:"#preloader-modal .progress-label"},labelText:{type:"string",default:"{0}% Complete"},autoClose:{type:"boolean",default:!0},clickToClose:{type:"boolean",default:!1},closeLabelText:{type:"string",default:"Continue"},title:{type:"string",default:""},debug:{type:"boolean",default:!1},disableVRModeUI:{type:"boolean",default:!0},slowLoad:{type:"boolean",default:!1},doneLabelText:{type:"string",default:"Done"}},multiple:!1,loadedAssetCount:0,totalAssetCount:0,slowLoadTimeAssetUpdate:1e3,slowLoadTimePreloadFinish:4e3,init:function(){this.data.debug&&console.log("Initialized preloader"),"bootstrap"===this.data.type&&"undefined"==typeof $&&console.error("jQuery is not present, cannot instantiate Bootstrap modal for preloader!"),document.querySelector("a-assets").addEventListener("loaded",function(){this.data.debug&&console.info("All assets loaded"),this.triggerProgressComplete()}.bind(this));var t=document.querySelectorAll("a-assets a-asset-item,a-assets img,a-assets audio,a-assets video");if(this.totalAssetCount=t.length,this.watchPreloadProgress(t),!this.data.target&&this.data.autoInject)this.data.debug&&console.info("No preloader html found, auto-injecting"),this.injectHTML();else switch(this.data.type){case"bootstrap":this.initBootstrapModal($(this.data.target))}this.data.disableVRModeUI&&this.el.setAttribute("vr-mode-ui","enabled","false")},update:function(t){},watchPreloadProgress:function(t){for(var e=0;e");else var t=$('
'+
233 | '
'+
246 | '');
247 | }else{
248 | //regular modal
249 | var $modal = $('' +
250 | ''+
234 | ''+
244 | '
'+
245 | ''+
251 | '
'+
271 | '');
272 | }
273 |
274 | $('body').append($modal);
275 |
276 | this.data.target = $modal[0];
277 | this.data.label = $modal.find('.progress-label')[0];
278 | this.data.bar = $modal.find('.progress-bar')[0];
279 |
280 | this.initBootstrapModal($modal);
281 | },
282 |
283 | initBootstrapModal: function($modal){
284 | $modal.modal({
285 | backdrop: 'static',
286 | keyboard: false
287 | });
288 |
289 | if(!this.data.title){
290 | var $modalStyle = $('');
307 | $('head').append($modalStyle);
308 | }
309 |
310 | if(this.data.clickToClose){
311 | var $closeBtn = $modal.find('[data-dismiss=modal]');
312 |
313 | if($closeBtn.length > 0){
314 | this.closeBtn = $closeBtn[0];
315 |
316 | this.closeBtn.setAttribute('style','display: none');
317 |
318 | $modal.on('hidden.bs.modal', function (e) {
319 | this.triggerPreloadingComplete();
320 | }.bind(this))
321 | }else{
322 | console.error('No Bootstrap modal close button is set in the HTML. Please add a button with the data-dismiss="modal" attribute to use clickToClose.');
323 | }
324 | }
325 | },
326 |
327 | triggerPreloadingComplete: function(){
328 | if(this.data.debug){
329 | console.info('Preloading complete');
330 | }
331 | if(this.data.disableVRModeUI){
332 | this.sceneEl.setAttribute('vr-mode-ui','enabled','true');
333 | }
334 |
335 | this.sceneEl.emit('preloading-complete');
336 | },
337 |
338 | closeModal: function(){
339 | switch(this.data.type){
340 | case 'bootstrap':
341 | $(this.data.target).modal('hide');
342 | break;
343 | default:
344 | //do nothing
345 | break;
346 | }
347 | }
348 | });
349 |
--------------------------------------------------------------------------------
/dist/aframe-preloader-component.js:
--------------------------------------------------------------------------------
1 | /******/ (function(modules) { // webpackBootstrap
2 | /******/ // The module cache
3 | /******/ var installedModules = {};
4 |
5 | /******/ // The require function
6 | /******/ function __webpack_require__(moduleId) {
7 |
8 | /******/ // Check if module is in cache
9 | /******/ if(installedModules[moduleId])
10 | /******/ return installedModules[moduleId].exports;
11 |
12 | /******/ // Create a new module (and put it into the cache)
13 | /******/ var module = installedModules[moduleId] = {
14 | /******/ exports: {},
15 | /******/ id: moduleId,
16 | /******/ loaded: false
17 | /******/ };
18 |
19 | /******/ // Execute the module function
20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 |
22 | /******/ // Flag the module as loaded
23 | /******/ module.loaded = true;
24 |
25 | /******/ // Return the exports of the module
26 | /******/ return module.exports;
27 | /******/ }
28 |
29 |
30 | /******/ // expose the modules object (__webpack_modules__)
31 | /******/ __webpack_require__.m = modules;
32 |
33 | /******/ // expose the module cache
34 | /******/ __webpack_require__.c = installedModules;
35 |
36 | /******/ // __webpack_public_path__
37 | /******/ __webpack_require__.p = "";
38 |
39 | /******/ // Load entry module and return exports
40 | /******/ return __webpack_require__(0);
41 | /******/ })
42 | /************************************************************************/
43 | /******/ ([
44 | /* 0 */
45 | /***/ (function(module, exports) {
46 |
47 | /* global AFRAME */
48 |
49 | if (typeof AFRAME === 'undefined') {
50 | throw new Error('Component attempted to register before AFRAME was available.');
51 | }
52 |
53 | // First, checks if it isn't implemented yet.
54 | if (!String.prototype.format) {
55 | String.prototype.format = function() {
56 | var args = arguments;
57 | return this.replace(/{(\d+)}/g, function(match, number) {
58 | return typeof args[number] != 'undefined'
59 | ? args[number]
60 | : match
61 | ;
62 | });
63 | };
64 | }
65 |
66 | /**
67 | * Visual preloader system for A-Frame.
68 | *
69 | * When applied to the '+
252 | ''+
269 | '
'+
270 | ''+
279 | '
'+
292 | '');
293 | }else{
294 | //regular modal
295 | var $modal = $('' +
296 | ''+
280 | ''+
290 | '
'+
291 | ''+
297 | '
'+
317 | '');
318 | }
319 |
320 | $('body').append($modal);
321 |
322 | this.data.target = $modal[0];
323 | this.data.label = $modal.find('.progress-label')[0];
324 | this.data.bar = $modal.find('.progress-bar')[0];
325 |
326 | this.initBootstrapModal($modal);
327 | },
328 |
329 | initBootstrapModal: function($modal){
330 | $modal.modal({
331 | backdrop: 'static',
332 | keyboard: false
333 | });
334 |
335 | if(!this.data.title){
336 | var $modalStyle = $('');
353 | $('head').append($modalStyle);
354 | }
355 |
356 | if(this.data.clickToClose){
357 | var $closeBtn = $modal.find('[data-dismiss=modal]');
358 |
359 | if($closeBtn.length > 0){
360 | this.closeBtn = $closeBtn[0];
361 |
362 | this.closeBtn.setAttribute('style','display: none');
363 |
364 | $modal.on('hidden.bs.modal', function (e) {
365 | this.triggerPreloadingComplete();
366 | }.bind(this))
367 | }else{
368 | console.error('No Bootstrap modal close button is set in the HTML. Please add a button with the data-dismiss="modal" attribute to use clickToClose.');
369 | }
370 | }
371 | },
372 |
373 | triggerPreloadingComplete: function(){
374 | if(this.data.debug){
375 | console.info('Preloading complete');
376 | }
377 | if(this.data.disableVRModeUI){
378 | this.el.setAttribute('vr-mode-ui','enabled','true');
379 | }
380 | this.el.emit('preloading-complete');
381 | },
382 |
383 | closeModal: function(){
384 | switch(this.data.type){
385 | case 'bootstrap':
386 | $(this.data.target).modal('hide');
387 | break;
388 | default:
389 | //do nothing
390 | break;
391 | }
392 | }
393 | });
394 |
395 | /***/ })
396 | /******/ ]);
--------------------------------------------------------------------------------
/examples/bootstrap-advanced-spinkit/bower_components/SpinKit/css/spinkit.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Usage:
3 | *
4 |
5 | *
6 | */
7 | .sk-rotating-plane {
8 | width: 40px;
9 | height: 40px;
10 | background-color: #333;
11 | margin: 40px auto;
12 | -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
13 | animation: sk-rotatePlane 1.2s infinite ease-in-out; }
14 |
15 | @-webkit-keyframes sk-rotatePlane {
16 | 0% {
17 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
18 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
19 | 50% {
20 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
21 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
22 | 100% {
23 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
24 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
25 |
26 | @keyframes sk-rotatePlane {
27 | 0% {
28 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
29 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
30 | 50% {
31 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
32 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
33 | 100% {
34 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
35 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
36 |
37 | /*
38 | * Usage:
39 | *
40 | '+
298 | ''+
315 | '
'+
316 | '
41 |
42 |
43 |
44 | *
45 | */
46 | .sk-double-bounce {
47 | width: 40px;
48 | height: 40px;
49 | position: relative;
50 | margin: 40px auto; }
51 | .sk-double-bounce .sk-child {
52 | width: 100%;
53 | height: 100%;
54 | border-radius: 50%;
55 | background-color: #333;
56 | opacity: 0.6;
57 | position: absolute;
58 | top: 0;
59 | left: 0;
60 | -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
61 | animation: sk-doubleBounce 2s infinite ease-in-out; }
62 | .sk-double-bounce .sk-double-bounce2 {
63 | -webkit-animation-delay: -1.0s;
64 | animation-delay: -1.0s; }
65 |
66 | @-webkit-keyframes sk-doubleBounce {
67 | 0%, 100% {
68 | -webkit-transform: scale(0);
69 | transform: scale(0); }
70 | 50% {
71 | -webkit-transform: scale(1);
72 | transform: scale(1); } }
73 |
74 | @keyframes sk-doubleBounce {
75 | 0%, 100% {
76 | -webkit-transform: scale(0);
77 | transform: scale(0); }
78 | 50% {
79 | -webkit-transform: scale(1);
80 | transform: scale(1); } }
81 |
82 | /*
83 | * Usage:
84 | *
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | *
93 | */
94 | .sk-wave {
95 | margin: 40px auto;
96 | width: 50px;
97 | height: 40px;
98 | text-align: center;
99 | font-size: 10px; }
100 | .sk-wave .sk-rect {
101 | background-color: #333;
102 | height: 100%;
103 | width: 6px;
104 | display: inline-block;
105 | -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
106 | animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
107 | .sk-wave .sk-rect1 {
108 | -webkit-animation-delay: -1.2s;
109 | animation-delay: -1.2s; }
110 | .sk-wave .sk-rect2 {
111 | -webkit-animation-delay: -1.1s;
112 | animation-delay: -1.1s; }
113 | .sk-wave .sk-rect3 {
114 | -webkit-animation-delay: -1s;
115 | animation-delay: -1s; }
116 | .sk-wave .sk-rect4 {
117 | -webkit-animation-delay: -0.9s;
118 | animation-delay: -0.9s; }
119 | .sk-wave .sk-rect5 {
120 | -webkit-animation-delay: -0.8s;
121 | animation-delay: -0.8s; }
122 |
123 | @-webkit-keyframes sk-waveStretchDelay {
124 | 0%, 40%, 100% {
125 | -webkit-transform: scaleY(0.4);
126 | transform: scaleY(0.4); }
127 | 20% {
128 | -webkit-transform: scaleY(1);
129 | transform: scaleY(1); } }
130 |
131 | @keyframes sk-waveStretchDelay {
132 | 0%, 40%, 100% {
133 | -webkit-transform: scaleY(0.4);
134 | transform: scaleY(0.4); }
135 | 20% {
136 | -webkit-transform: scaleY(1);
137 | transform: scaleY(1); } }
138 |
139 | /*
140 | * Usage:
141 | *
142 |
143 |
144 |
145 |
146 | *
147 | */
148 | .sk-wandering-cubes {
149 | margin: 40px auto;
150 | width: 40px;
151 | height: 40px;
152 | position: relative; }
153 | .sk-wandering-cubes .sk-cube {
154 | background-color: #333;
155 | width: 10px;
156 | height: 10px;
157 | position: absolute;
158 | top: 0;
159 | left: 0;
160 | -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
161 | animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; }
162 | .sk-wandering-cubes .sk-cube2 {
163 | -webkit-animation-delay: -0.9s;
164 | animation-delay: -0.9s; }
165 |
166 | @-webkit-keyframes sk-wanderingCube {
167 | 0% {
168 | -webkit-transform: rotate(0deg);
169 | transform: rotate(0deg); }
170 | 25% {
171 | -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
172 | transform: translateX(30px) rotate(-90deg) scale(0.5); }
173 | 50% {
174 | /* Hack to make FF rotate in the right direction */
175 | -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
176 | transform: translateX(30px) translateY(30px) rotate(-179deg); }
177 | 50.1% {
178 | -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
179 | transform: translateX(30px) translateY(30px) rotate(-180deg); }
180 | 75% {
181 | -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
182 | transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
183 | 100% {
184 | -webkit-transform: rotate(-360deg);
185 | transform: rotate(-360deg); } }
186 |
187 | @keyframes sk-wanderingCube {
188 | 0% {
189 | -webkit-transform: rotate(0deg);
190 | transform: rotate(0deg); }
191 | 25% {
192 | -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
193 | transform: translateX(30px) rotate(-90deg) scale(0.5); }
194 | 50% {
195 | /* Hack to make FF rotate in the right direction */
196 | -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
197 | transform: translateX(30px) translateY(30px) rotate(-179deg); }
198 | 50.1% {
199 | -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
200 | transform: translateX(30px) translateY(30px) rotate(-180deg); }
201 | 75% {
202 | -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
203 | transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
204 | 100% {
205 | -webkit-transform: rotate(-360deg);
206 | transform: rotate(-360deg); } }
207 |
208 | /*
209 | * Usage:
210 | *
211 |
212 | *
213 | */
214 | .sk-spinner-pulse {
215 | width: 40px;
216 | height: 40px;
217 | margin: 40px auto;
218 | background-color: #333;
219 | border-radius: 100%;
220 | -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
221 | animation: sk-pulseScaleOut 1s infinite ease-in-out; }
222 |
223 | @-webkit-keyframes sk-pulseScaleOut {
224 | 0% {
225 | -webkit-transform: scale(0);
226 | transform: scale(0); }
227 | 100% {
228 | -webkit-transform: scale(1);
229 | transform: scale(1);
230 | opacity: 0; } }
231 |
232 | @keyframes sk-pulseScaleOut {
233 | 0% {
234 | -webkit-transform: scale(0);
235 | transform: scale(0); }
236 | 100% {
237 | -webkit-transform: scale(1);
238 | transform: scale(1);
239 | opacity: 0; } }
240 |
241 | /*
242 | * Usage:
243 | *
244 |
245 |
246 |
247 |
248 | *
249 | */
250 | .sk-chasing-dots {
251 | margin: 40px auto;
252 | width: 40px;
253 | height: 40px;
254 | position: relative;
255 | text-align: center;
256 | -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
257 | animation: sk-chasingDotsRotate 2s infinite linear; }
258 | .sk-chasing-dots .sk-child {
259 | width: 60%;
260 | height: 60%;
261 | display: inline-block;
262 | position: absolute;
263 | top: 0;
264 | background-color: #333;
265 | border-radius: 100%;
266 | -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
267 | animation: sk-chasingDotsBounce 2s infinite ease-in-out; }
268 | .sk-chasing-dots .sk-dot2 {
269 | top: auto;
270 | bottom: 0;
271 | -webkit-animation-delay: -1s;
272 | animation-delay: -1s; }
273 |
274 | @-webkit-keyframes sk-chasingDotsRotate {
275 | 100% {
276 | -webkit-transform: rotate(360deg);
277 | transform: rotate(360deg); } }
278 |
279 | @keyframes sk-chasingDotsRotate {
280 | 100% {
281 | -webkit-transform: rotate(360deg);
282 | transform: rotate(360deg); } }
283 |
284 | @-webkit-keyframes sk-chasingDotsBounce {
285 | 0%, 100% {
286 | -webkit-transform: scale(0);
287 | transform: scale(0); }
288 | 50% {
289 | -webkit-transform: scale(1);
290 | transform: scale(1); } }
291 |
292 | @keyframes sk-chasingDotsBounce {
293 | 0%, 100% {
294 | -webkit-transform: scale(0);
295 | transform: scale(0); }
296 | 50% {
297 | -webkit-transform: scale(1);
298 | transform: scale(1); } }
299 |
300 | /*
301 | * Usage:
302 | *
303 |
304 |
305 |
306 |
307 |
308 | *
309 | */
310 | .sk-three-bounce {
311 | margin: 40px auto;
312 | width: 80px;
313 | text-align: center; }
314 | .sk-three-bounce .sk-child {
315 | width: 20px;
316 | height: 20px;
317 | background-color: #333;
318 | border-radius: 100%;
319 | display: inline-block;
320 | -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
321 | animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
322 | .sk-three-bounce .sk-bounce1 {
323 | -webkit-animation-delay: -0.32s;
324 | animation-delay: -0.32s; }
325 | .sk-three-bounce .sk-bounce2 {
326 | -webkit-animation-delay: -0.16s;
327 | animation-delay: -0.16s; }
328 |
329 | @-webkit-keyframes sk-three-bounce {
330 | 0%, 80%, 100% {
331 | -webkit-transform: scale(0);
332 | transform: scale(0); }
333 | 40% {
334 | -webkit-transform: scale(1);
335 | transform: scale(1); } }
336 |
337 | @keyframes sk-three-bounce {
338 | 0%, 80%, 100% {
339 | -webkit-transform: scale(0);
340 | transform: scale(0); }
341 | 40% {
342 | -webkit-transform: scale(1);
343 | transform: scale(1); } }
344 |
345 | /*
346 | * Usage:
347 | *
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 | *
363 | */
364 | .sk-circle {
365 | margin: 40px auto;
366 | width: 40px;
367 | height: 40px;
368 | position: relative; }
369 | .sk-circle .sk-child {
370 | width: 100%;
371 | height: 100%;
372 | position: absolute;
373 | left: 0;
374 | top: 0; }
375 | .sk-circle .sk-child:before {
376 | content: '';
377 | display: block;
378 | margin: 0 auto;
379 | width: 15%;
380 | height: 15%;
381 | background-color: #333;
382 | border-radius: 100%;
383 | -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
384 | animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
385 | .sk-circle .sk-circle2 {
386 | -webkit-transform: rotate(30deg);
387 | -ms-transform: rotate(30deg);
388 | transform: rotate(30deg); }
389 | .sk-circle .sk-circle3 {
390 | -webkit-transform: rotate(60deg);
391 | -ms-transform: rotate(60deg);
392 | transform: rotate(60deg); }
393 | .sk-circle .sk-circle4 {
394 | -webkit-transform: rotate(90deg);
395 | -ms-transform: rotate(90deg);
396 | transform: rotate(90deg); }
397 | .sk-circle .sk-circle5 {
398 | -webkit-transform: rotate(120deg);
399 | -ms-transform: rotate(120deg);
400 | transform: rotate(120deg); }
401 | .sk-circle .sk-circle6 {
402 | -webkit-transform: rotate(150deg);
403 | -ms-transform: rotate(150deg);
404 | transform: rotate(150deg); }
405 | .sk-circle .sk-circle7 {
406 | -webkit-transform: rotate(180deg);
407 | -ms-transform: rotate(180deg);
408 | transform: rotate(180deg); }
409 | .sk-circle .sk-circle8 {
410 | -webkit-transform: rotate(210deg);
411 | -ms-transform: rotate(210deg);
412 | transform: rotate(210deg); }
413 | .sk-circle .sk-circle9 {
414 | -webkit-transform: rotate(240deg);
415 | -ms-transform: rotate(240deg);
416 | transform: rotate(240deg); }
417 | .sk-circle .sk-circle10 {
418 | -webkit-transform: rotate(270deg);
419 | -ms-transform: rotate(270deg);
420 | transform: rotate(270deg); }
421 | .sk-circle .sk-circle11 {
422 | -webkit-transform: rotate(300deg);
423 | -ms-transform: rotate(300deg);
424 | transform: rotate(300deg); }
425 | .sk-circle .sk-circle12 {
426 | -webkit-transform: rotate(330deg);
427 | -ms-transform: rotate(330deg);
428 | transform: rotate(330deg); }
429 | .sk-circle .sk-circle2:before {
430 | -webkit-animation-delay: -1.1s;
431 | animation-delay: -1.1s; }
432 | .sk-circle .sk-circle3:before {
433 | -webkit-animation-delay: -1s;
434 | animation-delay: -1s; }
435 | .sk-circle .sk-circle4:before {
436 | -webkit-animation-delay: -0.9s;
437 | animation-delay: -0.9s; }
438 | .sk-circle .sk-circle5:before {
439 | -webkit-animation-delay: -0.8s;
440 | animation-delay: -0.8s; }
441 | .sk-circle .sk-circle6:before {
442 | -webkit-animation-delay: -0.7s;
443 | animation-delay: -0.7s; }
444 | .sk-circle .sk-circle7:before {
445 | -webkit-animation-delay: -0.6s;
446 | animation-delay: -0.6s; }
447 | .sk-circle .sk-circle8:before {
448 | -webkit-animation-delay: -0.5s;
449 | animation-delay: -0.5s; }
450 | .sk-circle .sk-circle9:before {
451 | -webkit-animation-delay: -0.4s;
452 | animation-delay: -0.4s; }
453 | .sk-circle .sk-circle10:before {
454 | -webkit-animation-delay: -0.3s;
455 | animation-delay: -0.3s; }
456 | .sk-circle .sk-circle11:before {
457 | -webkit-animation-delay: -0.2s;
458 | animation-delay: -0.2s; }
459 | .sk-circle .sk-circle12:before {
460 | -webkit-animation-delay: -0.1s;
461 | animation-delay: -0.1s; }
462 |
463 | @-webkit-keyframes sk-circleBounceDelay {
464 | 0%, 80%, 100% {
465 | -webkit-transform: scale(0);
466 | transform: scale(0); }
467 | 40% {
468 | -webkit-transform: scale(1);
469 | transform: scale(1); } }
470 |
471 | @keyframes sk-circleBounceDelay {
472 | 0%, 80%, 100% {
473 | -webkit-transform: scale(0);
474 | transform: scale(0); }
475 | 40% {
476 | -webkit-transform: scale(1);
477 | transform: scale(1); } }
478 |
479 | /*
480 | * Usage:
481 | *
482 |
483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 | *
494 | */
495 | .sk-cube-grid {
496 | width: 40px;
497 | height: 40px;
498 | margin: 40px auto;
499 | /*
500 | * Spinner positions
501 | * 1 2 3
502 | * 4 5 6
503 | * 7 8 9
504 | */ }
505 | .sk-cube-grid .sk-cube {
506 | width: 33.33%;
507 | height: 33.33%;
508 | background-color: #333;
509 | float: left;
510 | -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
511 | animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
512 | .sk-cube-grid .sk-cube1 {
513 | -webkit-animation-delay: 0.2s;
514 | animation-delay: 0.2s; }
515 | .sk-cube-grid .sk-cube2 {
516 | -webkit-animation-delay: 0.3s;
517 | animation-delay: 0.3s; }
518 | .sk-cube-grid .sk-cube3 {
519 | -webkit-animation-delay: 0.4s;
520 | animation-delay: 0.4s; }
521 | .sk-cube-grid .sk-cube4 {
522 | -webkit-animation-delay: 0.1s;
523 | animation-delay: 0.1s; }
524 | .sk-cube-grid .sk-cube5 {
525 | -webkit-animation-delay: 0.2s;
526 | animation-delay: 0.2s; }
527 | .sk-cube-grid .sk-cube6 {
528 | -webkit-animation-delay: 0.3s;
529 | animation-delay: 0.3s; }
530 | .sk-cube-grid .sk-cube7 {
531 | -webkit-animation-delay: 0.0s;
532 | animation-delay: 0.0s; }
533 | .sk-cube-grid .sk-cube8 {
534 | -webkit-animation-delay: 0.1s;
535 | animation-delay: 0.1s; }
536 | .sk-cube-grid .sk-cube9 {
537 | -webkit-animation-delay: 0.2s;
538 | animation-delay: 0.2s; }
539 |
540 | @-webkit-keyframes sk-cubeGridScaleDelay {
541 | 0%, 70%, 100% {
542 | -webkit-transform: scale3D(1, 1, 1);
543 | transform: scale3D(1, 1, 1); }
544 | 35% {
545 | -webkit-transform: scale3D(0, 0, 1);
546 | transform: scale3D(0, 0, 1); } }
547 |
548 | @keyframes sk-cubeGridScaleDelay {
549 | 0%, 70%, 100% {
550 | -webkit-transform: scale3D(1, 1, 1);
551 | transform: scale3D(1, 1, 1); }
552 | 35% {
553 | -webkit-transform: scale3D(0, 0, 1);
554 | transform: scale3D(0, 0, 1); } }
555 |
556 | /*
557 | * Usage:
558 | *
559 |
560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 |
570 |
571 |
572 |
573 | *
574 | */
575 | .sk-fading-circle {
576 | margin: 40px auto;
577 | width: 40px;
578 | height: 40px;
579 | position: relative; }
580 | .sk-fading-circle .sk-circle {
581 | width: 100%;
582 | height: 100%;
583 | position: absolute;
584 | left: 0;
585 | top: 0; }
586 | .sk-fading-circle .sk-circle:before {
587 | content: '';
588 | display: block;
589 | margin: 0 auto;
590 | width: 15%;
591 | height: 15%;
592 | background-color: #333;
593 | border-radius: 100%;
594 | -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
595 | animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
596 | .sk-fading-circle .sk-circle2 {
597 | -webkit-transform: rotate(30deg);
598 | -ms-transform: rotate(30deg);
599 | transform: rotate(30deg); }
600 | .sk-fading-circle .sk-circle3 {
601 | -webkit-transform: rotate(60deg);
602 | -ms-transform: rotate(60deg);
603 | transform: rotate(60deg); }
604 | .sk-fading-circle .sk-circle4 {
605 | -webkit-transform: rotate(90deg);
606 | -ms-transform: rotate(90deg);
607 | transform: rotate(90deg); }
608 | .sk-fading-circle .sk-circle5 {
609 | -webkit-transform: rotate(120deg);
610 | -ms-transform: rotate(120deg);
611 | transform: rotate(120deg); }
612 | .sk-fading-circle .sk-circle6 {
613 | -webkit-transform: rotate(150deg);
614 | -ms-transform: rotate(150deg);
615 | transform: rotate(150deg); }
616 | .sk-fading-circle .sk-circle7 {
617 | -webkit-transform: rotate(180deg);
618 | -ms-transform: rotate(180deg);
619 | transform: rotate(180deg); }
620 | .sk-fading-circle .sk-circle8 {
621 | -webkit-transform: rotate(210deg);
622 | -ms-transform: rotate(210deg);
623 | transform: rotate(210deg); }
624 | .sk-fading-circle .sk-circle9 {
625 | -webkit-transform: rotate(240deg);
626 | -ms-transform: rotate(240deg);
627 | transform: rotate(240deg); }
628 | .sk-fading-circle .sk-circle10 {
629 | -webkit-transform: rotate(270deg);
630 | -ms-transform: rotate(270deg);
631 | transform: rotate(270deg); }
632 | .sk-fading-circle .sk-circle11 {
633 | -webkit-transform: rotate(300deg);
634 | -ms-transform: rotate(300deg);
635 | transform: rotate(300deg); }
636 | .sk-fading-circle .sk-circle12 {
637 | -webkit-transform: rotate(330deg);
638 | -ms-transform: rotate(330deg);
639 | transform: rotate(330deg); }
640 | .sk-fading-circle .sk-circle2:before {
641 | -webkit-animation-delay: -1.1s;
642 | animation-delay: -1.1s; }
643 | .sk-fading-circle .sk-circle3:before {
644 | -webkit-animation-delay: -1s;
645 | animation-delay: -1s; }
646 | .sk-fading-circle .sk-circle4:before {
647 | -webkit-animation-delay: -0.9s;
648 | animation-delay: -0.9s; }
649 | .sk-fading-circle .sk-circle5:before {
650 | -webkit-animation-delay: -0.8s;
651 | animation-delay: -0.8s; }
652 | .sk-fading-circle .sk-circle6:before {
653 | -webkit-animation-delay: -0.7s;
654 | animation-delay: -0.7s; }
655 | .sk-fading-circle .sk-circle7:before {
656 | -webkit-animation-delay: -0.6s;
657 | animation-delay: -0.6s; }
658 | .sk-fading-circle .sk-circle8:before {
659 | -webkit-animation-delay: -0.5s;
660 | animation-delay: -0.5s; }
661 | .sk-fading-circle .sk-circle9:before {
662 | -webkit-animation-delay: -0.4s;
663 | animation-delay: -0.4s; }
664 | .sk-fading-circle .sk-circle10:before {
665 | -webkit-animation-delay: -0.3s;
666 | animation-delay: -0.3s; }
667 | .sk-fading-circle .sk-circle11:before {
668 | -webkit-animation-delay: -0.2s;
669 | animation-delay: -0.2s; }
670 | .sk-fading-circle .sk-circle12:before {
671 | -webkit-animation-delay: -0.1s;
672 | animation-delay: -0.1s; }
673 |
674 | @-webkit-keyframes sk-circleFadeDelay {
675 | 0%, 39%, 100% {
676 | opacity: 0; }
677 | 40% {
678 | opacity: 1; } }
679 |
680 | @keyframes sk-circleFadeDelay {
681 | 0%, 39%, 100% {
682 | opacity: 0; }
683 | 40% {
684 | opacity: 1; } }
685 |
686 | /*
687 | * Usage:
688 | *
689 |
690 |
691 |
692 |
693 |
694 |
695 | *
696 | */
697 | .sk-folding-cube {
698 | margin: 40px auto;
699 | width: 40px;
700 | height: 40px;
701 | position: relative;
702 | -webkit-transform: rotateZ(45deg);
703 | transform: rotateZ(45deg); }
704 | .sk-folding-cube .sk-cube {
705 | float: left;
706 | width: 50%;
707 | height: 50%;
708 | position: relative;
709 | -webkit-transform: scale(1.1);
710 | -ms-transform: scale(1.1);
711 | transform: scale(1.1); }
712 | .sk-folding-cube .sk-cube:before {
713 | content: '';
714 | position: absolute;
715 | top: 0;
716 | left: 0;
717 | width: 100%;
718 | height: 100%;
719 | background-color: #333;
720 | -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
721 | animation: sk-foldCubeAngle 2.4s infinite linear both;
722 | -webkit-transform-origin: 100% 100%;
723 | -ms-transform-origin: 100% 100%;
724 | transform-origin: 100% 100%; }
725 | .sk-folding-cube .sk-cube2 {
726 | -webkit-transform: scale(1.1) rotateZ(90deg);
727 | transform: scale(1.1) rotateZ(90deg); }
728 | .sk-folding-cube .sk-cube3 {
729 | -webkit-transform: scale(1.1) rotateZ(180deg);
730 | transform: scale(1.1) rotateZ(180deg); }
731 | .sk-folding-cube .sk-cube4 {
732 | -webkit-transform: scale(1.1) rotateZ(270deg);
733 | transform: scale(1.1) rotateZ(270deg); }
734 | .sk-folding-cube .sk-cube2:before {
735 | -webkit-animation-delay: 0.3s;
736 | animation-delay: 0.3s; }
737 | .sk-folding-cube .sk-cube3:before {
738 | -webkit-animation-delay: 0.6s;
739 | animation-delay: 0.6s; }
740 | .sk-folding-cube .sk-cube4:before {
741 | -webkit-animation-delay: 0.9s;
742 | animation-delay: 0.9s; }
743 |
744 | @-webkit-keyframes sk-foldCubeAngle {
745 | 0%, 10% {
746 | -webkit-transform: perspective(140px) rotateX(-180deg);
747 | transform: perspective(140px) rotateX(-180deg);
748 | opacity: 0; }
749 | 25%, 75% {
750 | -webkit-transform: perspective(140px) rotateX(0deg);
751 | transform: perspective(140px) rotateX(0deg);
752 | opacity: 1; }
753 | 90%, 100% {
754 | -webkit-transform: perspective(140px) rotateY(180deg);
755 | transform: perspective(140px) rotateY(180deg);
756 | opacity: 0; } }
757 |
758 | @keyframes sk-foldCubeAngle {
759 | 0%, 10% {
760 | -webkit-transform: perspective(140px) rotateX(-180deg);
761 | transform: perspective(140px) rotateX(-180deg);
762 | opacity: 0; }
763 | 25%, 75% {
764 | -webkit-transform: perspective(140px) rotateX(0deg);
765 | transform: perspective(140px) rotateX(0deg);
766 | opacity: 1; }
767 | 90%, 100% {
768 | -webkit-transform: perspective(140px) rotateY(180deg);
769 | transform: perspective(140px) rotateY(180deg);
770 | opacity: 0; } }
771 |
--------------------------------------------------------------------------------