Skip to content

Commit

Permalink
Updated build.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jh3y
jh3y committed Apr 16, 2014
1 parent 804f62a commit 31baa73
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 91 deletions.
180 changes: 90 additions & 90 deletions csspinner.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,31 +69,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
transform: rotate(360deg);
}
}
/*(cs)spinner bar follow - a simple strafing bar animation that follows itself*/
.csspinner.bar.follow:after {
-webkit-animation: bar-follow 1s infinite linear;
animation: bar-follow 1s infinite linear;
}
@-webkit-keyframes bar-follow {
0% {
-webkit-box-shadow: inset 40px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 40px 0px 0px rgba(0, 0, 0, 0.5);
}
100% {
-webkit-box-shadow: inset -40px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset -40px 0px 0px rgba(0, 0, 0, 0.5);
}
}
@keyframes bar-follow {
0% {
-webkit-box-shadow: inset 40px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 40px 0px 0px rgba(0, 0, 0, 0.5);
}
100% {
-webkit-box-shadow: inset -40px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset -40px 0px 0px rgba(0, 0, 0, 0.5);
}
}
/*(cs)spinner bar - a simple strafing bar animation*/
.csspinner.bar:after {
height: 20px;
Expand Down Expand Up @@ -123,6 +98,31 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
box-shadow: inset 80px 0px 0px rgba(0, 0, 0, 0.5);
}
}
/*(cs)spinner bar follow - a simple strafing bar animation that follows itself*/
.csspinner.bar.follow:after {
-webkit-animation: bar-follow 1s infinite linear;
animation: bar-follow 1s infinite linear;
}
@-webkit-keyframes bar-follow {
0% {
-webkit-box-shadow: inset 40px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 40px 0px 0px rgba(0, 0, 0, 0.5);
}
100% {
-webkit-box-shadow: inset -40px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset -40px 0px 0px rgba(0, 0, 0, 0.5);
}
}
@keyframes bar-follow {
0% {
-webkit-box-shadow: inset 40px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 40px 0px 0px rgba(0, 0, 0, 0.5);
}
100% {
-webkit-box-shadow: inset -40px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset -40px 0px 0px rgba(0, 0, 0, 0.5);
}
}
/* (cs)spinner blade spinner.
experimental spinner that tries to create a blade effect.*/
.csspinner.blade:after {
Expand Down Expand Up @@ -165,25 +165,43 @@ experimental spinner that tries to create a blade effect.*/
transform-origin: center;
background-color: #8e44ad;
}
/*(cs)spinner line back and forth grow - a simple strafing line animation that goes back and forth and grows in the middle*/
.csspinner.line.back-and-forth.grow:after {
-webkit-animation: line-back-and-forth 1s infinite linear, line-back-and-forth-grow 1s infinite linear;
animation: line-back-and-forth 1s infinite linear, line-back-and-forth-grow 1s infinite linear;
/*(cs)spinner line - a simple strafing line animation*/
.csspinner.line:after {
height: 20px;
border-radius: 0;
border: none;
-webkit-box-shadow: inset -10px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset -10px 0px 0px rgba(0, 0, 0, 0.5);
-webkit-animation: line .75s infinite linear;
animation: line .75s infinite linear;
}
@-webkit-keyframes line-back-and-forth-grow {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
@-webkit-keyframes line {
from {
width: 10px;
}
25% {
-webkit-transform: scaleY(2);
transform: scaleY(2);
to {
width: 50px;
}
50% {
}
@keyframes line {
from {
width: 10px;
}
to {
width: 50px;
}
}
/*(cs)spinner line grow - a simple strafing line animation that grows in the middle*/
.csspinner.line.grow:after {
-webkit-animation: line 0.75s infinite linear, line-grow 0.75s infinite linear;
animation: line 0.75s infinite linear, line-grow 0.75s infinite linear;
}
@-webkit-keyframes line-grow {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
75% {
50% {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
Expand All @@ -192,20 +210,12 @@ experimental spinner that tries to create a blade effect.*/
transform: scaleY(1);
}
}
@keyframes line-back-and-forth-grow {
@keyframes line-grow {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
25% {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
50% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
75% {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
Expand Down Expand Up @@ -241,17 +251,25 @@ experimental spinner that tries to create a blade effect.*/
width: 10px;
}
}
/*(cs)spinner line grow - a simple strafing line animation that grows in the middle*/
.csspinner.line.grow:after {
-webkit-animation: line 0.75s infinite linear, line-grow 0.75s infinite linear;
animation: line 0.75s infinite linear, line-grow 0.75s infinite linear;
/*(cs)spinner line back and forth grow - a simple strafing line animation that goes back and forth and grows in the middle*/
.csspinner.line.back-and-forth.grow:after {
-webkit-animation: line-back-and-forth 1s infinite linear, line-back-and-forth-grow 1s infinite linear;
animation: line-back-and-forth 1s infinite linear, line-back-and-forth-grow 1s infinite linear;
}
@-webkit-keyframes line-grow {
@-webkit-keyframes line-back-and-forth-grow {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
25% {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
50% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
75% {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
Expand All @@ -260,44 +278,26 @@ experimental spinner that tries to create a blade effect.*/
transform: scaleY(1);
}
}
@keyframes line-grow {
@keyframes line-back-and-forth-grow {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
50% {
25% {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
100% {
50% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
/*(cs)spinner line - a simple strafing line animation*/
.csspinner.line:after {
height: 20px;
border-radius: 0;
border: none;
-webkit-box-shadow: inset -10px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset -10px 0px 0px rgba(0, 0, 0, 0.5);
-webkit-animation: line .75s infinite linear;
animation: line .75s infinite linear;
}
@-webkit-keyframes line {
from {
width: 10px;
}
to {
width: 50px;
}
}
@keyframes line {
from {
width: 10px;
75% {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
to {
width: 50px;
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
/* (cs)spinner ringed spinner.
Expand All @@ -309,14 +309,12 @@ a spinner with a static ring and no overlay.*/
border-bottom: 4px solid #2ecc71;
opacity: 1;
}
/* (cs)spinner shadow oval left - makes use of box shadowing effects
in addition to offsetting the width and the height to angle the shadow*/
.csspinner.shadow.oval.left:after,
.csspinner.shadow.oval:after {
/* (cs)spinner shadow - makes use of box shadowing effects */
.csspinner.shadow:after {
-webkit-animation: spin-shadow 0.25s infinite linear;
animation: spin-shadow 0.25s infinite linear;
border-radius: 100%;
border: none;
border-radius: 40% 100%;
}
@-webkit-keyframes spin-shadow {
0% {
Expand Down Expand Up @@ -354,13 +352,14 @@ in addition to offsetting the width and the height to angle the shadow*/
box-shadow: inset 5px -5px 5px rgba(0, 0, 0, 0.5);
}
}
/* (cs)spinner shadow oval right - makes use of box shadowing effects
/* (cs)spinner shadow oval left - makes use of box shadowing effects
in addition to offsetting the width and the height to angle the shadow*/
.csspinner.shadow.oval.right:after {
.csspinner.shadow.oval.left:after,
.csspinner.shadow.oval:after {
-webkit-animation: spin-shadow 0.25s infinite linear;
animation: spin-shadow 0.25s infinite linear;
border: none;
border-radius: 100% 40%;
border-radius: 40% 100%;
}
@keyframes spin-shadow {
0% {
Expand All @@ -380,12 +379,13 @@ in addition to offsetting the width and the height to angle the shadow*/
box-shadow: inset 5px -5px 5px rgba(0, 0, 0, 0.5);
}
}
/* (cs)spinner shadow - makes use of box shadowing effects */
.csspinner.shadow:after {
/* (cs)spinner shadow oval right - makes use of box shadowing effects
in addition to offsetting the width and the height to angle the shadow*/
.csspinner.shadow.oval.right:after {
-webkit-animation: spin-shadow 0.25s infinite linear;
animation: spin-shadow 0.25s infinite linear;
border-radius: 100%;
border: none;
border-radius: 100% 40%;
}
@keyframes spin-shadow {
0% {
Expand Down
Loading

0 comments on commit 31baa73

Please sign in to comment.