diff --git a/css/spinkit.css b/css/spinkit.css
index 0b79b86..2c7c1f8 100644
--- a/css/spinkit.css
+++ b/css/spinkit.css
@@ -57,8 +57,8 @@
position: absolute;
top: 0;
left: 0;
- -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
- animation: sk-doubleBounce 2s infinite ease-in-out; }
+ -webkit-animation: sk-doubleBounce 2.0s infinite ease-in-out;
+ animation: sk-doubleBounce 2.0s infinite ease-in-out; }
.sk-double-bounce .sk-double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s; }
@@ -217,8 +217,8 @@
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-animation: sk-pulseScaleOut 1.0s infinite ease-in-out;
+ animation: sk-pulseScaleOut 1.0s infinite ease-in-out; }
@-webkit-keyframes sk-pulseScaleOut {
0% {
@@ -384,47 +384,36 @@
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;
@@ -595,47 +584,36 @@
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;
@@ -707,7 +685,6 @@
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: '';
@@ -720,7 +697,6 @@
-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);
@@ -768,3 +744,46 @@
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0; } }
+
+/*
+ * Usage:
+ *
+
+ *
+ */
+.sk-wave-spread {
+ margin: 40px auto;
+ width: 50px;
+ height: 40px;
+ text-align: center;
+ font-size: 10px; }
+ .sk-wave-spread .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-spread .sk-rect1, .sk-wave-spread .sk-rect5 {
+ -webkit-animation-delay: -0.7s;
+ animation-delay: -0.7s; }
+ .sk-wave-spread .sk-rect4, .sk-wave-spread .sk-rect2 {
+ -webkit-animation-delay: -0.95s;
+ animation-delay: -0.95s; }
+ .sk-wave-spread .sk-rect3 {
+ -webkit-animation-delay: -1.2s;
+ animation-delay: -1.2s; }
+
+@keyframes sk-waveStretchDelay {
+ 0%, 100% {
+ -webkit-transform: scaleY(0.4);
+ transform: scaleY(0.4); }
+ 50% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1); } }
diff --git a/css/spinners/12-wave-spread.css b/css/spinners/12-wave-spread.css
new file mode 100644
index 0000000..dc17b10
--- /dev/null
+++ b/css/spinners/12-wave-spread.css
@@ -0,0 +1,50 @@
+/*
+ * Usage:
+ *
+
+ *
+ */
+.sk-wave-spread {
+ margin: 40px auto;
+ width: 50px;
+ height: 40px;
+ text-align: center;
+ font-size: 10px; }
+ .sk-wave-spread .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-spread .sk-rect1, .sk-wave-spread .sk-rect5 {
+ -webkit-animation-delay: -0.7s;
+ animation-delay: -0.7s; }
+ .sk-wave-spread .sk-rect4, .sk-wave-spread .sk-rect2 {
+ -webkit-animation-delay: -0.95s;
+ animation-delay: -0.95s; }
+ .sk-wave-spread .sk-rect3 {
+ -webkit-animation-delay: -1.2s;
+ animation-delay: -1.2s; }
+
+@-webkit-keyframes sk-waveStretchDelay {
+ 0%, 100% {
+ -webkit-transform: scaleY(0.4);
+ transform: scaleY(0.4); }
+ 50% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1); } }
+
+@keyframes sk-waveStretchDelay {
+ 0%, 100% {
+ -webkit-transform: scaleY(0.4);
+ transform: scaleY(0.4); }
+ 50% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1); } }
diff --git a/examples/12-wave-spread.html b/examples/12-wave-spread.html
new file mode 100644
index 0000000..ba85e83
--- /dev/null
+++ b/examples/12-wave-spread.html
@@ -0,0 +1,70 @@
+
+
+
+ 12 wave spread
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scss/spinkit.scss b/scss/spinkit.scss
index 1434a92..42b1b8d 100644
--- a/scss/spinkit.scss
+++ b/scss/spinkit.scss
@@ -9,4 +9,5 @@
"spinners/8-circle",
"spinners/9-cube-grid",
"spinners/10-fading-circle",
- "spinners/11-folding-cube";
+ "spinners/11-folding-cube",
+ "spinners/12-wave-spread";
diff --git a/scss/spinners/12-wave-spread.scss b/scss/spinners/12-wave-spread.scss
new file mode 100644
index 0000000..53d4413
--- /dev/null
+++ b/scss/spinners/12-wave-spread.scss
@@ -0,0 +1,45 @@
+/*
+ * Usage:
+ *
+
+ *
+ */
+@import "../variables";
+
+.sk-wave-spread {
+ $rectCount: 5;
+ $animationDuration: 1.2s;
+ $delayRange: 0.4s;
+
+ margin: $spinkit-spinner-margin;
+ width: $spinkit-size * 1.25;
+ height: $spinkit-size;
+ text-align: center;
+ font-size: 10px;
+
+ .sk-rect {
+ background-color: $spinkit-spinner-color;
+ height: 100%;
+ width: 6px;
+ display: inline-block;
+ animation: sk-waveStretchDelay $animationDuration infinite ease-in-out;
+ }
+
+ .sk-rect1, .sk-rect5 { animation-delay: - $animationDuration + $delayRange / ($rectCount - 1) * 5; }
+
+ .sk-rect4, .sk-rect2 { animation-delay: - $animationDuration + $delayRange / ($rectCount - 1) * 2.5; }
+
+ .sk-rect3 { animation-delay: - $animationDuration + $delayRange / ($rectCount - 1) * 0; }
+
+}
+
+@keyframes sk-waveStretchDelay {
+ 0%, 100% { transform: scaleY(0.4) }
+ 50% { transform: scaleY(1.0) }
+}