Experimenting/evaluating with LESS, LESSHat & CSS keyframes
A Pen by Adam Henley on CodePen.
#spinner |
Experimenting/evaluating with LESS, LESSHat & CSS keyframes
A Pen by Adam Henley on CodePen.
body{background-color:rgb(200,230,255);} | |
.circle(@d){ | |
width:@d; | |
height:@d; | |
.border-radius(50%); | |
} | |
#spinner{ | |
@spinner_diam: 200px; | |
@inner_spinner_ratio_begin: 0.2; | |
@inner_spinner_left_begin: 20px; //@spinner_diam/2 - ((@spinner_diam*@inner_spinner_ratio_begin)/2); | |
@inner_spinner_top_begin:@spinner_diam/2 - ((@spinner_diam*@inner_spinner_ratio_begin)/2); | |
@inner_spinner_ratio_lower: 0.1; | |
@inner_spinner_ratio_upper: 0.3; | |
@spinner_bg: rgb(130, 130, 130) ; | |
border:none;color:red; | |
background-color: @spinner_bg; | |
.circle( @spinner_diam ); | |
position:absolute; | |
top:0; right:0; bottom:0; left:0; margin:auto; | |
.animation(outer 10s linear infinite); | |
.outer_keyframes(){ | |
0% { .rotate(0deg); } | |
25% { .rotate(180deg); } | |
50% { .rotate(360deg); } | |
75% { .rotate(540deg); } | |
100% { .rotate(720deg); } | |
} | |
@-webkit-keyframes outer { .outer_keyframes(); } | |
@-moz-keyframes outer { .outer_keyframes(); } | |
@-o-keyframes outer { .outer_keyframes(); } | |
@keyframes outer { .outer_keyframes(); } | |
&:after{ | |
content:''; | |
border:none; | |
display:block; | |
background-color: white; | |
.circle( @spinner_diam*@inner_spinner_ratio_begin); | |
position:absolute; | |
margin:0; | |
left: @inner_spinner_left_begin; | |
top: @inner_spinner_top_begin; | |
.animation(inner 10s linear infinite); | |
.inner_keyframes(){ | |
0% { width:10px; height:10px; } | |
25% { width:50px; height:50px; } | |
50% { width:30px; height:30px; } | |
75% { width:50px; height:50px; } | |
100% { width:10px; height:10px; } | |
} | |
@-webkit-keyframes inner { .inner_keyframes(); } | |
@-moz-keyframes inner { .inner_keyframes(); } | |
@-o-keyframes inner { .inner_keyframes(); } | |
@keyframes inner { .inner_keyframes(); } | |
} | |
} | |