From 2017ca0761ece1396af5aa9bcdfb6002e48fcda5 Mon Sep 17 00:00:00 2001 From: Hui Yiqun Date: Sun, 8 Jan 2017 17:07:29 +0800 Subject: [PATCH] add spin when loading --- _includes/head.html | 1 + index.html | 17 +- static/css/spinkit.css | 770 ++++++++++++++++++++++ static/css/spinners/1-rotating-plane.css | 35 + static/css/spinners/10-fading-circle.css | 129 ++++ static/css/spinners/11-folding-cube.css | 85 +++ static/css/spinners/2-double-bounce.css | 44 ++ static/css/spinners/3-wave.css | 56 ++ static/css/spinners/4-wandering-cubes.css | 68 ++ static/css/spinners/5-pulse.css | 32 + static/css/spinners/6-chasing-dots.css | 58 ++ static/css/spinners/7-three-bounce.css | 44 ++ static/css/spinners/8-circle.css | 133 ++++ static/css/spinners/9-cube-grid.css | 76 +++ 14 files changed, 1543 insertions(+), 5 deletions(-) create mode 100644 static/css/spinkit.css create mode 100644 static/css/spinners/1-rotating-plane.css create mode 100644 static/css/spinners/10-fading-circle.css create mode 100644 static/css/spinners/11-folding-cube.css create mode 100644 static/css/spinners/2-double-bounce.css create mode 100644 static/css/spinners/3-wave.css create mode 100644 static/css/spinners/4-wandering-cubes.css create mode 100644 static/css/spinners/5-pulse.css create mode 100644 static/css/spinners/6-chasing-dots.css create mode 100644 static/css/spinners/7-three-bounce.css create mode 100644 static/css/spinners/8-circle.css create mode 100644 static/css/spinners/9-cube-grid.css diff --git a/_includes/head.html b/_includes/head.html index 42f1e23..ae8f483 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -11,6 +11,7 @@ + diff --git a/index.html b/index.html index 61dd75a..9b9c8ea 100644 --- a/index.html +++ b/index.html @@ -12,17 +12,17 @@ permalink: /
-
+ {% raw %} +

้•œๅƒๅˆ—่กจ

- +
- {% raw %} - + - {% endraw %}
Name Last Update
+
+
+
+
+
+
+
+ {% endraw %}
diff --git a/static/css/spinkit.css b/static/css/spinkit.css new file mode 100644 index 0000000..0b79b86 --- /dev/null +++ b/static/css/spinkit.css @@ -0,0 +1,770 @@ +/* + * Usage: + * +
+ * + */ +.sk-rotating-plane { + width: 40px; + height: 40px; + background-color: #333; + margin: 40px auto; + -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; + animation: sk-rotatePlane 1.2s infinite ease-in-out; } + +@-webkit-keyframes sk-rotatePlane { + 0% { + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + transform: perspective(120px) rotateX(0deg) rotateY(0deg); } + 50% { + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } + 100% { + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } + +@keyframes sk-rotatePlane { + 0% { + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + transform: perspective(120px) rotateX(0deg) rotateY(0deg); } + 50% { + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } + 100% { + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } + +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-double-bounce { + width: 40px; + height: 40px; + position: relative; + margin: 40px auto; } + .sk-double-bounce .sk-child { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #333; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; + animation: sk-doubleBounce 2s infinite ease-in-out; } + .sk-double-bounce .sk-double-bounce2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; } + +@-webkit-keyframes sk-doubleBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-doubleBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+ * + */ +.sk-wave { + margin: 40px auto; + width: 50px; + height: 40px; + text-align: center; + font-size: 10px; } + .sk-wave .sk-rect { + background-color: #333; + height: 100%; + width: 6px; + display: inline-block; + -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; + animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } + .sk-wave .sk-rect1 { + -webkit-animation-delay: -1.2s; + animation-delay: -1.2s; } + .sk-wave .sk-rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + .sk-wave .sk-rect3 { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + .sk-wave .sk-rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + .sk-wave .sk-rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + +@-webkit-keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); } + 20% { + -webkit-transform: scaleY(1); + transform: scaleY(1); } } + +@keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); } + 20% { + -webkit-transform: scaleY(1); + transform: scaleY(1); } } + +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-wandering-cubes { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-wandering-cubes .sk-cube { + background-color: #333; + width: 10px; + height: 10px; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; + animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; } + .sk-wandering-cubes .sk-cube2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + +@-webkit-keyframes sk-wanderingCube { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 25% { + -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); + transform: translateX(30px) rotate(-90deg) scale(0.5); } + 50% { + /* Hack to make FF rotate in the right direction */ + -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); + transform: translateX(30px) translateY(30px) rotate(-179deg); } + 50.1% { + -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); + transform: translateX(30px) translateY(30px) rotate(-180deg); } + 75% { + -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); + transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +@keyframes sk-wanderingCube { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 25% { + -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); + transform: translateX(30px) rotate(-90deg) scale(0.5); } + 50% { + /* Hack to make FF rotate in the right direction */ + -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); + transform: translateX(30px) translateY(30px) rotate(-179deg); } + 50.1% { + -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); + transform: translateX(30px) translateY(30px) rotate(-180deg); } + 75% { + -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); + transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +/* + * Usage: + * + + * + */ +.sk-spinner-pulse { + width: 40px; + height: 40px; + margin: 40px auto; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; + animation: sk-pulseScaleOut 1s infinite ease-in-out; } + +@-webkit-keyframes sk-pulseScaleOut { + 0% { + -webkit-transform: scale(0); + transform: scale(0); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; } } + +@keyframes sk-pulseScaleOut { + 0% { + -webkit-transform: scale(0); + transform: scale(0); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; } } + +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-chasing-dots { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; + text-align: center; + -webkit-animation: sk-chasingDotsRotate 2s infinite linear; + animation: sk-chasingDotsRotate 2s infinite linear; } + .sk-chasing-dots .sk-child { + width: 60%; + height: 60%; + display: inline-block; + position: absolute; + top: 0; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out; + animation: sk-chasingDotsBounce 2s infinite ease-in-out; } + .sk-chasing-dots .sk-dot2 { + top: auto; + bottom: 0; + -webkit-animation-delay: -1s; + animation-delay: -1s; } + +@-webkit-keyframes sk-chasingDotsRotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes sk-chasingDotsRotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@-webkit-keyframes sk-chasingDotsBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-chasingDotsBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+ * + */ +.sk-three-bounce { + margin: 40px auto; + width: 80px; + text-align: center; } + .sk-three-bounce .sk-child { + width: 20px; + height: 20px; + background-color: #333; + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; + animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } + .sk-three-bounce .sk-bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; } + .sk-three-bounce .sk-bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; } + +@-webkit-keyframes sk-three-bounce { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-three-bounce { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-circle { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-circle .sk-child { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; } + .sk-circle .sk-child:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; + animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } + .sk-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); } + .sk-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); } + .sk-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .sk-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); } + .sk-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); } + .sk-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .sk-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); } + .sk-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); } + .sk-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + .sk-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); } + .sk-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); } + .sk-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + .sk-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + .sk-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + .sk-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + .sk-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; } + .sk-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; } + .sk-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; } + .sk-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; } + .sk-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; } + .sk-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; } + .sk-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; } + +@-webkit-keyframes sk-circleBounceDelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-circleBounceDelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-cube-grid { + width: 40px; + height: 40px; + margin: 40px auto; + /* + * Spinner positions + * 1 2 3 + * 4 5 6 + * 7 8 9 + */ } + .sk-cube-grid .sk-cube { + width: 33.33%; + height: 33.33%; + background-color: #333; + float: left; + -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; + animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } + .sk-cube-grid .sk-cube1 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + .sk-cube-grid .sk-cube2 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-cube-grid .sk-cube3 { + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; } + .sk-cube-grid .sk-cube4 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; } + .sk-cube-grid .sk-cube5 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + .sk-cube-grid .sk-cube6 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-cube-grid .sk-cube7 { + -webkit-animation-delay: 0.0s; + animation-delay: 0.0s; } + .sk-cube-grid .sk-cube8 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; } + .sk-cube-grid .sk-cube9 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + +@-webkit-keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); } } + +@keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-fading-circle { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-fading-circle .sk-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; } + .sk-fading-circle .sk-circle:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } + .sk-fading-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); } + .sk-fading-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); } + .sk-fading-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .sk-fading-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); } + .sk-fading-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); } + .sk-fading-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .sk-fading-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); } + .sk-fading-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); } + .sk-fading-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + .sk-fading-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); } + .sk-fading-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); } + .sk-fading-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + .sk-fading-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + .sk-fading-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + .sk-fading-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + .sk-fading-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; } + .sk-fading-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; } + .sk-fading-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; } + .sk-fading-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; } + .sk-fading-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; } + .sk-fading-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; } + .sk-fading-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; } + +@-webkit-keyframes sk-circleFadeDelay { + 0%, 39%, 100% { + opacity: 0; } + 40% { + opacity: 1; } } + +@keyframes sk-circleFadeDelay { + 0%, 39%, 100% { + opacity: 0; } + 40% { + opacity: 1; } } + +/* + * Usage: + * +
+
+
+
+
+
+ * + */ +.sk-folding-cube { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; + -webkit-transform: rotateZ(45deg); + transform: rotateZ(45deg); } + .sk-folding-cube .sk-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); } + .sk-folding-cube .sk-cube:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #333; + -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; + animation: sk-foldCubeAngle 2.4s infinite linear both; + -webkit-transform-origin: 100% 100%; + -ms-transform-origin: 100% 100%; + transform-origin: 100% 100%; } + .sk-folding-cube .sk-cube2 { + -webkit-transform: scale(1.1) rotateZ(90deg); + transform: scale(1.1) rotateZ(90deg); } + .sk-folding-cube .sk-cube3 { + -webkit-transform: scale(1.1) rotateZ(180deg); + transform: scale(1.1) rotateZ(180deg); } + .sk-folding-cube .sk-cube4 { + -webkit-transform: scale(1.1) rotateZ(270deg); + transform: scale(1.1) rotateZ(270deg); } + .sk-folding-cube .sk-cube2:before { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-folding-cube .sk-cube3:before { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; } + .sk-folding-cube .sk-cube4:before { + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; } + +@-webkit-keyframes sk-foldCubeAngle { + 0%, 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; } + 25%, 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; } + 90%, 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; } } + +@keyframes sk-foldCubeAngle { + 0%, 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; } + 25%, 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; } + 90%, 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; } } diff --git a/static/css/spinners/1-rotating-plane.css b/static/css/spinners/1-rotating-plane.css new file mode 100644 index 0000000..b9cb2dd --- /dev/null +++ b/static/css/spinners/1-rotating-plane.css @@ -0,0 +1,35 @@ +/* + * Usage: + * +
+ * + */ +.sk-rotating-plane { + width: 40px; + height: 40px; + background-color: #333; + margin: 40px auto; + -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; + animation: sk-rotatePlane 1.2s infinite ease-in-out; } + +@-webkit-keyframes sk-rotatePlane { + 0% { + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + transform: perspective(120px) rotateX(0deg) rotateY(0deg); } + 50% { + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } + 100% { + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } + +@keyframes sk-rotatePlane { + 0% { + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + transform: perspective(120px) rotateX(0deg) rotateY(0deg); } + 50% { + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } + 100% { + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } diff --git a/static/css/spinners/10-fading-circle.css b/static/css/spinners/10-fading-circle.css new file mode 100644 index 0000000..b8138cb --- /dev/null +++ b/static/css/spinners/10-fading-circle.css @@ -0,0 +1,129 @@ +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-fading-circle { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-fading-circle .sk-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; } + .sk-fading-circle .sk-circle:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } + .sk-fading-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); } + .sk-fading-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); } + .sk-fading-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .sk-fading-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); } + .sk-fading-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); } + .sk-fading-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .sk-fading-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); } + .sk-fading-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); } + .sk-fading-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + .sk-fading-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); } + .sk-fading-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); } + .sk-fading-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + .sk-fading-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + .sk-fading-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + .sk-fading-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + .sk-fading-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; } + .sk-fading-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; } + .sk-fading-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; } + .sk-fading-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; } + .sk-fading-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; } + .sk-fading-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; } + .sk-fading-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; } + +@-webkit-keyframes sk-circleFadeDelay { + 0%, 39%, 100% { + opacity: 0; } + 40% { + opacity: 1; } } + +@keyframes sk-circleFadeDelay { + 0%, 39%, 100% { + opacity: 0; } + 40% { + opacity: 1; } } diff --git a/static/css/spinners/11-folding-cube.css b/static/css/spinners/11-folding-cube.css new file mode 100644 index 0000000..c41a519 --- /dev/null +++ b/static/css/spinners/11-folding-cube.css @@ -0,0 +1,85 @@ +/* + * Usage: + * +
+
+
+
+
+
+ * + */ +.sk-folding-cube { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; + -webkit-transform: rotateZ(45deg); + transform: rotateZ(45deg); } + .sk-folding-cube .sk-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); } + .sk-folding-cube .sk-cube:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #333; + -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; + animation: sk-foldCubeAngle 2.4s infinite linear both; + -webkit-transform-origin: 100% 100%; + -ms-transform-origin: 100% 100%; + transform-origin: 100% 100%; } + .sk-folding-cube .sk-cube2 { + -webkit-transform: scale(1.1) rotateZ(90deg); + transform: scale(1.1) rotateZ(90deg); } + .sk-folding-cube .sk-cube3 { + -webkit-transform: scale(1.1) rotateZ(180deg); + transform: scale(1.1) rotateZ(180deg); } + .sk-folding-cube .sk-cube4 { + -webkit-transform: scale(1.1) rotateZ(270deg); + transform: scale(1.1) rotateZ(270deg); } + .sk-folding-cube .sk-cube2:before { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-folding-cube .sk-cube3:before { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; } + .sk-folding-cube .sk-cube4:before { + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; } + +@-webkit-keyframes sk-foldCubeAngle { + 0%, 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; } + 25%, 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; } + 90%, 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; } } + +@keyframes sk-foldCubeAngle { + 0%, 10% { + -webkit-transform: perspective(140px) rotateX(-180deg); + transform: perspective(140px) rotateX(-180deg); + opacity: 0; } + 25%, 75% { + -webkit-transform: perspective(140px) rotateX(0deg); + transform: perspective(140px) rotateX(0deg); + opacity: 1; } + 90%, 100% { + -webkit-transform: perspective(140px) rotateY(180deg); + transform: perspective(140px) rotateY(180deg); + opacity: 0; } } diff --git a/static/css/spinners/2-double-bounce.css b/static/css/spinners/2-double-bounce.css new file mode 100644 index 0000000..2e78662 --- /dev/null +++ b/static/css/spinners/2-double-bounce.css @@ -0,0 +1,44 @@ +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-double-bounce { + width: 40px; + height: 40px; + position: relative; + margin: 40px auto; } + .sk-double-bounce .sk-child { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #333; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; + animation: sk-doubleBounce 2s infinite ease-in-out; } + .sk-double-bounce .sk-double-bounce2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; } + +@-webkit-keyframes sk-doubleBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-doubleBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } diff --git a/static/css/spinners/3-wave.css b/static/css/spinners/3-wave.css new file mode 100644 index 0000000..5cfa871 --- /dev/null +++ b/static/css/spinners/3-wave.css @@ -0,0 +1,56 @@ +/* + * Usage: + * +
+
+
+
+
+
+
+ * + */ +.sk-wave { + margin: 40px auto; + width: 50px; + height: 40px; + text-align: center; + font-size: 10px; } + .sk-wave .sk-rect { + background-color: #333; + height: 100%; + width: 6px; + display: inline-block; + -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; + animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } + .sk-wave .sk-rect1 { + -webkit-animation-delay: -1.2s; + animation-delay: -1.2s; } + .sk-wave .sk-rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + .sk-wave .sk-rect3 { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + .sk-wave .sk-rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + .sk-wave .sk-rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + +@-webkit-keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); } + 20% { + -webkit-transform: scaleY(1); + transform: scaleY(1); } } + +@keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); } + 20% { + -webkit-transform: scaleY(1); + transform: scaleY(1); } } diff --git a/static/css/spinners/4-wandering-cubes.css b/static/css/spinners/4-wandering-cubes.css new file mode 100644 index 0000000..b67483f --- /dev/null +++ b/static/css/spinners/4-wandering-cubes.css @@ -0,0 +1,68 @@ +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-wandering-cubes { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-wandering-cubes .sk-cube { + background-color: #333; + width: 10px; + height: 10px; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; + animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; } + .sk-wandering-cubes .sk-cube2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + +@-webkit-keyframes sk-wanderingCube { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 25% { + -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); + transform: translateX(30px) rotate(-90deg) scale(0.5); } + 50% { + /* Hack to make FF rotate in the right direction */ + -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); + transform: translateX(30px) translateY(30px) rotate(-179deg); } + 50.1% { + -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); + transform: translateX(30px) translateY(30px) rotate(-180deg); } + 75% { + -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); + transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +@keyframes sk-wanderingCube { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 25% { + -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); + transform: translateX(30px) rotate(-90deg) scale(0.5); } + 50% { + /* Hack to make FF rotate in the right direction */ + -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); + transform: translateX(30px) translateY(30px) rotate(-179deg); } + 50.1% { + -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); + transform: translateX(30px) translateY(30px) rotate(-180deg); } + 75% { + -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); + transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); } } diff --git a/static/css/spinners/5-pulse.css b/static/css/spinners/5-pulse.css new file mode 100644 index 0000000..6e4e8f4 --- /dev/null +++ b/static/css/spinners/5-pulse.css @@ -0,0 +1,32 @@ +/* + * Usage: + * + + * + */ +.sk-spinner-pulse { + width: 40px; + height: 40px; + margin: 40px auto; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; + animation: sk-pulseScaleOut 1s infinite ease-in-out; } + +@-webkit-keyframes sk-pulseScaleOut { + 0% { + -webkit-transform: scale(0); + transform: scale(0); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; } } + +@keyframes sk-pulseScaleOut { + 0% { + -webkit-transform: scale(0); + transform: scale(0); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; } } diff --git a/static/css/spinners/6-chasing-dots.css b/static/css/spinners/6-chasing-dots.css new file mode 100644 index 0000000..033e3e6 --- /dev/null +++ b/static/css/spinners/6-chasing-dots.css @@ -0,0 +1,58 @@ +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-chasing-dots { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; + text-align: center; + -webkit-animation: sk-chasingDotsRotate 2s infinite linear; + animation: sk-chasingDotsRotate 2s infinite linear; } + .sk-chasing-dots .sk-child { + width: 60%; + height: 60%; + display: inline-block; + position: absolute; + top: 0; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out; + animation: sk-chasingDotsBounce 2s infinite ease-in-out; } + .sk-chasing-dots .sk-dot2 { + top: auto; + bottom: 0; + -webkit-animation-delay: -1s; + animation-delay: -1s; } + +@-webkit-keyframes sk-chasingDotsRotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes sk-chasingDotsRotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@-webkit-keyframes sk-chasingDotsBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-chasingDotsBounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } diff --git a/static/css/spinners/7-three-bounce.css b/static/css/spinners/7-three-bounce.css new file mode 100644 index 0000000..a7c8e96 --- /dev/null +++ b/static/css/spinners/7-three-bounce.css @@ -0,0 +1,44 @@ +/* + * Usage: + * +
+
+
+
+
+ * + */ +.sk-three-bounce { + margin: 40px auto; + width: 80px; + text-align: center; } + .sk-three-bounce .sk-child { + width: 20px; + height: 20px; + background-color: #333; + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; + animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } + .sk-three-bounce .sk-bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; } + .sk-three-bounce .sk-bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; } + +@-webkit-keyframes sk-three-bounce { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-three-bounce { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } diff --git a/static/css/spinners/8-circle.css b/static/css/spinners/8-circle.css new file mode 100644 index 0000000..fb12126 --- /dev/null +++ b/static/css/spinners/8-circle.css @@ -0,0 +1,133 @@ +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-circle { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-circle .sk-child { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; } + .sk-circle .sk-child:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; + animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } + .sk-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); } + .sk-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); } + .sk-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .sk-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); } + .sk-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); } + .sk-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .sk-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); } + .sk-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); } + .sk-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + .sk-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); } + .sk-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); } + .sk-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + .sk-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + .sk-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + .sk-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + .sk-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; } + .sk-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; } + .sk-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; } + .sk-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; } + .sk-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; } + .sk-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; } + .sk-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; } + +@-webkit-keyframes sk-circleBounceDelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes sk-circleBounceDelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } diff --git a/static/css/spinners/9-cube-grid.css b/static/css/spinners/9-cube-grid.css new file mode 100644 index 0000000..a2ec2cc --- /dev/null +++ b/static/css/spinners/9-cube-grid.css @@ -0,0 +1,76 @@ +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-cube-grid { + width: 40px; + height: 40px; + margin: 40px auto; + /* + * Spinner positions + * 1 2 3 + * 4 5 6 + * 7 8 9 + */ } + .sk-cube-grid .sk-cube { + width: 33.33%; + height: 33.33%; + background-color: #333; + float: left; + -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; + animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } + .sk-cube-grid .sk-cube1 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + .sk-cube-grid .sk-cube2 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-cube-grid .sk-cube3 { + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; } + .sk-cube-grid .sk-cube4 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; } + .sk-cube-grid .sk-cube5 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + .sk-cube-grid .sk-cube6 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } + .sk-cube-grid .sk-cube7 { + -webkit-animation-delay: 0.0s; + animation-delay: 0.0s; } + .sk-cube-grid .sk-cube8 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; } + .sk-cube-grid .sk-cube9 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + +@-webkit-keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); } } + +@keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); } }