div.wrapper
ul.circle
li
ul.dots
each i in [1, 2, 3]
li
ul.square
ul.bars
each i in new Array(6)
li
View Compiled
$icon-color: #2C64FF;
$bg-color: #E8EBF3;
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: $bg-color;
}
.wrapper {
width: 100px;
margin: auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
padding: 10px 0;
}
ul {
margin: 24px 0;
display: inline-block;
}
// Spinning circle
.circle {
border-radius: 100%;
width: 48px;
height: 48px;
background: -moz-linear-gradient(top, $bg-color 0%, $icon-color 50%, $bg-color 100%);
background: -webkit-linear-gradient(top, $bg-color 0%, $icon-color 50%, $bg-color 100%);
transform-origin: center;
animation: rotate 3.2s infinite linear;
display: flex;
justify-content: center;
align-items: center;
outline: 1px solid transparent;
li {
width: 38px;
height: 38px;
background: $bg-color;
border-radius: 100%;
}
}
@keyframes rotate{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// Floating dots
.dots li {
background: $icon-color;
border-radius: 100%;
width: 12px;
height: 12px;
float: left;
margin: 0 2px;
animation: float 1.8s infinite;
transform-origin: center;
&:nth-child(2) {
animation-delay: .2s;
}
&:nth-child(3) {
animation-delay: .4s;
}
}
@keyframes float {
0%, 100% {
transform: translateY(4px);
}
50% {
transform: translateY(-4px);
}
}
// Rolling square
.square {
width: 40px;
height: 40px;
border: 4px solid $icon-color;
animation: roll 2s infinite;
transform-origin: center;
outline: 1px solid transparent;
}
@keyframes roll {
0% {
transform: rotate(0);
}
50%, 100% {
transform: rotate(90deg);
}
}
// Floating bars
.bars li {
height: 28px;
width: 5px;
background: $icon-color;
float: left;
margin: 3px;
animation: float 1.8s infinite;
&:nth-child(1) {
height: 18px;
margin-top: 7px;
animation-delay: .1s;
}
&:nth-child(2) {
height: 22px;
margin-top: 5px;
animation-delay: .2s;
}
&:nth-child(3) {
animation-delay: .3s;
}
&:nth-child(4) {
animation-delay: .4s;
}
&:nth-child(5) {
height: 22px;
margin-top: 5px;
animation-delay: .5s;
}
&:nth-child(6) {
height: 18px;
margin-top: 7px;
animation-delay: .6s;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.