Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added wave spread animation #115

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added wave spread animation #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 47 additions & 28 deletions css/spinkit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down Expand Up @@ -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% {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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: '';
Expand All @@ -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);
Expand Down Expand Up @@ -768,3 +744,46 @@
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0; } }

/*
* Usage:
*
<div class="sk-wave-spread">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
*
*/
.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); } }
50 changes: 50 additions & 0 deletions css/spinners/12-wave-spread.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* Usage:
*
<div class="sk-wave-spread">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
*
*/
.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); } }
70 changes: 70 additions & 0 deletions examples/12-wave-spread.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<title>12 wave spread</title>
<style type="text/css">
/*
* Usage:
*
<div class="sk-wave-spread">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
*
*/
.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); } }

</style>
</head>
<body>


<div class="sk-wave-spread">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
</body>
</html>
3 changes: 2 additions & 1 deletion scss/spinkit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
45 changes: 45 additions & 0 deletions scss/spinners/12-wave-spread.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*
* Usage:
*
<div class="sk-wave-spread">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
*
*/
@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) }
}