Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS3 animation spinners and preloaders

CSS3 animation spinners and preloaders

CSS3 animations spinners and preloaders, no JS, no images

A Pen by fox_hover on CodePen.

License.

<div class="container">
<h1>CSS3 animated <span>spinners</span> vol.2</h1>
<a href="https://github.com/eisenfox/css-spinners-2" target="_blank" title="Check on github"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Check on github</a>
<a href="https://codepen.io/fox_hover/pen/YZxGed" target="_blank" title=">> Check vol.1"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Check vol.1</a>
<!-- spinners container-->
<div class="spinners-container">
<!-- spinner #1 -->
<div class="spinner-block">
<h2>#1</h2>
<!-- spinner #1 effect -->
<div class="spinner-eff spinner-eff-1">
<div class="bar bar-top"></div>
<div class="bar bar-right"></div>
<div class="bar bar-bottom"></div>
<div class="bar bar-left"></div>
</div>
</div>
<!-- spinner #2 -->
<div class="spinner-block">
<h2>#2</h2>
<!-- spinner #2 effect -->
<div class="spinner-eff spinner-eff-2">
<div class="square"></div>
</div>
</div>
<!-- spinner #3 -->
<div class="spinner-block">
<h2>#3</h2>
<!-- spinner #3 effect -->
<div class="spinner-eff spinner-eff-3">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
</div>
<!-- spinner #4 -->
<div class="spinner-block">
<h2>#4</h2>
<!-- spinner #4 effect -->
<div class="spinner-eff spinner-eff-4">
<div class="bar bar-top"></div>
<div class="bar bar-right"></div>
<div class="bar bar-bottom"></div>
<div class="bar bar-left"></div>
</div>
</div>
<!-- spinner #5 -->
<div class="spinner-block">
<h2>#5</h2>
<!-- spinner #4 effect -->
<div class="spinner-eff spinner-eff-5">
<div class="ellipse"></div>
</div>
</div>
</div>
</div>
//variables
$bg-color: #fff; //container background-color;
$accent-font-color: #FD5200; //accent font color;
$spinner-dimensions: 50px; //width and height of spinner block
$spinner-1-bg: #47A8BD; //spinner-1 background-color
$spinner-2-bg: #FE4E00; //spinner-4 background-color
$spinner-3-bg: #0CCA4A; //spinner-3 background-color
$spinner-4-bg: #F51AA4; //spinner-2 background-color
$spinner-5-bg: #FFE314; //spinner-5 background-color
//mixins
//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
/* COMMON STYLES: YOU DON'T NEED THEM */
body {
background-color: $bg-color;
font: {
family: 'Fira Sans', sans-serif;
weight: 400;
}
color: #1f1f1f;
.container {
width: 580pxpx;
margin: 70px auto 0px;
text-align: center;
& > a {
text-decoration: none;
color: #1f1f1f;
font: {
size: 20px;
}
&:nth-child(2) {
&:after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border: 2px solid $accent-font-color;
border-radius: 20px;
margin: 0px 10px 0px 15px;
position: relative;
top: -2px;
}
}
}
}
h1 {
font: {
weight: 400;
size: 35px;
}
span {
font: {
family: 'Josefin Sans', sans-serif;
}
text-transform: uppercase;
color: $accent-font-color;
position: relative;
&:before {
content: "";
display: block;
@include position-absolute($top: 0, $left: 0, $right: 0);
width: 5px;
height: 5px;
border: 2px solid $accent-font-color;
border-radius: 20px;
margin: auto;
}
}
}
}
.spinners-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 70px;
.spinner-block {
width: $spinner-dimensions;
text-align: center;
margin-right: 83px;
&:nth-child(5n) {
margin-right: 0px;
}
h2 {
margin: 0px 0px 20px 0px;
}
}
}
/* YOU NEED THESE STYLES */
/* spinner style */
.spinner-eff {
position: relative;
width: $spinner-dimensions;
height: $spinner-dimensions;
&:before,
&:after {
content: "";
display: block;
}
.spinner-bar {
&:before,
&:after {
content: "";
display: block;
}
}
}
/* spinner-1 styles */
.spinner-eff.spinner-eff-1 {
@keyframes rotation-top {
0% {
transform: rotate(0deg);
opacity: 0.5;
}
20% {
transform: rotate(360deg);
opacity: 1;
}
80% {
transform: rotate(360deg);
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 0.5;
}
}
@keyframes rotation-right {
0% {
transform: rotate(0deg);
opacity: 0.5;
}
20% {
transform: rotate(0deg);
opacity: 0.5;
}
40% {
transform: rotate(360deg);
opacity: 1;
}
80% {
transform: rotate(360deg);
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 0.5;
}
}
@keyframes rotation-bottom {
0% {
transform: rotate(0deg);
opacity: 0.5;
}
40% {
transform: rotate(0deg);
opacity: 0.5;
}
60% {
transform: rotate(360deg);
opacity: 1;
}
80% {
transform: rotate(360deg);
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 0.5;
}
}
@keyframes rotation-left {
0% {
transform: rotate(0deg);
opacity: 0.5;
}
60% {
transform: rotate(0deg);
opacity: 0.5;
}
80% {
transform: rotate(360deg);
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 0.5;
}
}
.bar {
width: 0;
height: 0;
border: $spinner-dimensions/2 solid transparent;
@include position-absolute($top: 0, $left: 0);
transform: rotate(0deg);
opacity: 0.5;
&-top {
border-top: $spinner-dimensions/2 solid $spinner-1-bg;
animation: rotation-top 3.6s linear 0s infinite;
}
&-right {
border-right: $spinner-dimensions/2 solid $spinner-1-bg;
animation: rotation-right 3.6s linear 0s infinite;
}
&-bottom {
border-bottom: $spinner-dimensions/2 solid $spinner-1-bg;
animation: rotation-bottom 3.6s linear 0s infinite;
}
&-left {
border-left: $spinner-dimensions/2 solid $spinner-1-bg;
animation: rotation-left 3.6s linear 0s infinite;
}
}
}
/* spinner-2 styles */
.spinner-eff.spinner-eff-2 {
@keyframes scale-rotate {
0% {
transform: scale(1) rotate(0deg);
}
12.5% {
transform: scale(0.5) rotate(45deg);
}
25% {
transform: scale(1) rotate(90deg);
}
37.5% {
transform: scale(0.5) rotate(135deg);
}
50% {
transform: scale(1) rotate(180deg);
}
62.5% {
transform: scale(0.5) rotate(225deg);
}
75% {
transform: scale(1) rotate(270deg);
}
87.5% {
transform: scale(0.5) rotate(315deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
.square {
width: 100%;
height: 100%;
background-color: $spinner-4-bg;
transform: scale(1) rotate(0deg);
transform-origin: center center;
animation: scale-rotate 3s linear 0s infinite;
}
}
/* spinner-3 styles */
.spinner-eff.spinner-eff-3 {
@keyframes pulse {
0% {
transform: scale(0);
}
50% {
transform: scale(1.3);
opacity: 0;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
@keyframes pulse-2 {
0% {
transform: scale(0);
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
.circle {
border-radius: 100px;
@include position-absolute($left: 0, $right: 0);
margin: auto;
transform: scale(1);
transform-origin: center center;
&-1 {
width: 100%;
height: 100%;
background-color: lighten($spinner-3-bg, 25%);
top: 0;
animation: pulse 1.6s linear 0s infinite;
}
&-2 {
width: 66.6%;
height: 66.6%;
background-color: $spinner-3-bg;
top: 16.5%;
animation: pulse-2 1.6s linear 0s infinite;
}
&-3 {
width: 33.3%;
height: 33.3%;
background-color: $spinner-3-bg;
top: 33.3%;
}
}
}
/* spinner-4 styles */
.spinner-eff.spinner-eff-4 {
$bar-width: 7px; //width of bars
animation: rotation 12.8s steps(1) 0s infinite;
@keyframes rotation {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes bar-top {
0% {
transform: scale(0,1);
}
12.5% {
transform: scale(1,1);
}
87.5% {
transform: scale(1,1);
}
100% {
transform: scale(0,1);
}
}
@keyframes bar-right {
0% {
transform: scale(1,0);
}
12.5% {
transform: scale(1,0);
}
25% {
transform: scale(1,1);
}
75% {
transform: scale(1,1);
}
87.5% {
transform: scale(1,0);
}
100% {
transform: scale(1,0);
}
}
@keyframes bar-bottom {
0% {
transform: scale(0,1);
}
25% {
transform: scale(0,1);
}
37.5% {
transform: scale(1,1);
}
62.5% {
transform: scale(1,1);
}
75% {
transform: scale(0,1);
}
100% {
transform: scale(0,1);
}
}
@keyframes bar-left {
0% {
transform: scale(1,0);
}
37.5% {
transform: scale(1,0);
}
50% {
transform: scale(1,1);
}
62.5% {
transform: scale(1,0);
}
100% {
transform: scale(1,0);
}
}
.bar {
background-color: $spinner-2-bg;
&-top {
width: 100%;
height: $bar-width;
@include position-absolute($top: 0, $left: 0);
transform-origin: left top;
transform: scale(0,1);
animation: bar-top 3.2s linear 0s infinite;
}
&-right {
width: $bar-width;
height: 100%;
@include position-absolute($top: 0, $right: 0);
transform-origin: left top;
transform: scale(1,0);
animation: bar-right 3.2s linear 0s infinite;
}
&-bottom {
width: 100%;
height: $bar-width;
@include position-absolute($bottom: 0, $right: 0);
transform-origin: right top;
transform: scale(0,1);
animation: bar-bottom 3.2s linear 0s infinite;
}
&-left {
width: $bar-width;
height: 100%;
@include position-absolute($bottom: 0, $left: 0);
transform-origin: left bottom;
transform: scale(1,0);
animation: bar-left 3.2s linear 0s infinite;
}
}
}
/* spinner-5 styles */
.spinner-eff.spinner-eff-5 {
@keyframes ellipse-animation {
0% {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
12.5% {
border-top-left-radius: 0;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
transform: rotate(45deg);
}
25% {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
transform: rotate(90deg);
}
37.5% {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 50%;
transform: rotate(135deg);
}
50% {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
transform: rotate(180deg);
}
62.5% {
border-top-left-radius: 50%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
transform: rotate(225deg);
}
75% {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
transform: rotate(270deg);
}
87.5% {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 0;
transform: rotate(315deg);
}
100% {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
transform: rotate(360deg);
}
}
.ellipse {
width: 100%;
height: 100%;
background-color: $spinner-5-bg;
border-radius: 50%;
animation: ellipse-animation 2.4s cubic-bezier(0, -0.26, 0.32, 1.22) 0s infinite;
transform: rotate(0deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.