Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS3 animations spinners
<div class="container">
<h1>CSS3 animated spinners vol.1</h1>
<a href="#" title="Check on github">>> Check on github - https://github.com/eisenfox/css-spinners</a>
<div class="spinners">
<div class="spinner-block">
<h2>#1</h2>
<div class="spinner spinner-1"></div>
</div>
<div class="spinner-block">
<h2>#2</h2>
<div class="spinner spinner-2"></div>
</div>
<div class="spinner-block">
<h2>#3</h2>
<div class="spinner spinner-3"></div>
</div>
<div class="spinner-block">
<h2>#4</h2>
<div class="spinner spinner-4"></div>
</div>
<div class="spinner-block">
<h2>#5</h2>
<div class="spinner spinner-5"></div>
</div>
</div>
</div>
// Check here:
//https://github.com/eisenfox/css-spinners
//variables
$bg-color: #fff; //container background-color;
$basic-dark-color: #212121; //color of the spinner
$border-width: 4px; //width of spinners border
$basic-spinner-dimensions: 125px; //width and height of spinner
$main-spinner-dimensions: $basic-spinner-dimensions - $border-width * 2; //width and height of bigger circle
$small-spinner-dimensions: $main-spinner-dimensions * 0.7; //width and height of smaller circle
/* COMMON STYLES: YOU DON'T NEED THEM */
body {
background-color: $bg-color;
}
.container {
width: 960px;
margin: 70px auto 0px auto;
text-align: center;
h1 {
font: {
family: 'Lato', sans-serif;
size: 40px;
}
color: $basic-dark-color;
margin-bottom: 20px;
& + a {
color: $basic-dark-color;
font: {
family: 'Lato', sans-serif;
size: 20px;
}
text-decoration: none;
}
&:before {
content: "{";
display: inline-block;
padding-right: 20px;
}
&:after {
content: "}";
display: inline-block;
padding-left: 20px;
}
}
.spinners {
margin-top: 50px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.spinner-block {
width: $basic-spinner-dimensions;
text-align: center;
margin-right: 83px;
&:nth-child(5n) {
margin-right: 0px;
}
h2 {
font: {
family: 'Pacifico', cursive;
size: 17px;
}
color: $basic-dark-color;
margin-bottom: 20px;
}
}
}
}
/* YOU NEED THESE STYLES */
/* spinner style */
.spinner {
position: relative;
width: $basic-spinner-dimensions;
height: $basic-spinner-dimensions;
&:before,
&:after {
content: "";
display: block;
position: absolute;
border-width: 4px;
border-style: solid;
border-radius: 50%;
}
}
/* spinner-1 styles */
.spinner.spinner-1 {
@keyframes rotate-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes anti-rotate-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
&:before {
width: $main-spinner-dimensions;
height: $main-spinner-dimensions;
border-bottom-color: $basic-dark-color;
border-right-color: $basic-dark-color;
border-top-color: rgba($basic-dark-color, 0);
border-left-color: rgba($basic-dark-color, 0);
top: 0px;
left: 0px;
animation: rotate-animation 1s linear 0s infinite;
}
&:after {
width: $small-spinner-dimensions;
height: $small-spinner-dimensions;
border-bottom-color: $basic-dark-color;
border-right-color: $basic-dark-color;
border-top-color: rgba($basic-dark-color, 0);
border-left-color: rgba($basic-dark-color, 0);
top: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;
left: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;
animation: anti-rotate-animation 0.85s linear 0s infinite;
}
}
/* spinner-2 styles */
.spinner.spinner-2 {
@keyframes scale {
0% {
transform: scale(1);
border-style: solid;
}
100% {
transform: scale(0);
border-style: dashed;
}
}
&:before {
width: $main-spinner-dimensions;
height: $main-spinner-dimensions;
border-color: $basic-dark-color;
top: 0px;
left: 0px;
animation: scale 1s linear 0s infinite alternate;
}
&:after {
width: $main-spinner-dimensions;
height: $main-spinner-dimensions;
border-color: $basic-dark-color;
top: 0;
left: 0;
animation: scale 1s linear 0s infinite alternate-reverse;
}
}
/* spinner-3 styles */
.spinner.spinner-3 {
@keyframes scale-2 {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(0.7);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
&:before {
width: $main-spinner-dimensions;
height: $main-spinner-dimensions;
border-color: $basic-dark-color;
top: 0px;
left: 0px;
animation: scale-2 1s linear 0s infinite;
}
&:after {
width: $main-spinner-dimensions;
height: $main-spinner-dimensions;
border-color: $basic-dark-color;
top: 0;
left: 0;
opacity: 0;
animation: scale-2 1s linear 0.5s infinite;
}
}
/* spinner-4 styles */
.spinner.spinner-4 {
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
&:before {
width: $main-spinner-dimensions;
height: $main-spinner-dimensions;
border-color: $basic-dark-color;
top: 0px;
left: 0px;
overflow: hidden;
}
&:after {
width: $small-spinner-dimensions * 0.2;
height: $small-spinner-dimensions * 0.2;
border-width: $border-width - 1;
border-color: $basic-dark-color;
top: $main-spinner-dimensions / 2 - $border-width * 2;
left: 0;
overflow: hidden;
transform-origin: $main-spinner-dimensions / 2 + $border-width;
animation: rotate 1.2s linear 0s infinite;
}
}
/* spinner-5 styles */
.spinner.spinner-5 {
@keyframes border-animate {
0% {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
25% {
border-top-color: $basic-dark-color;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
border-top-color: $basic-dark-color;
border-right-color: $basic-dark-color;
border-bottom-color: transparent;
border-left-color: transparent;
}
75% {
border-top-color: $basic-dark-color;
border-right-color: $basic-dark-color;
border-bottom-color: $basic-dark-color;
border-left-color: transparent;
}
100% {
border-top-color: $basic-dark-color;
border-right-color: $basic-dark-color;
border-bottom-color: $basic-dark-color;
border-left-color: $basic-dark-color;
}
}
&:before {
width: 0;
height: 0;
border-color: $basic-dark-color;
top: 0px;
left: 0px;
border-width: $basic-spinner-dimensions / 2;
border-style: solid;
animation: border-animate 1.6s linear 0s infinite alternate;
}
&:after {
width: $small-spinner-dimensions;
height: $small-spinner-dimensions;
border-color: $basic-dark-color;
top: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;
left: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;
background-color: $bg-color;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment