#Codevember 10 - Hexagons Loader
HTML
<div class="wrapper">
<div class="hexagon one"></div>
<div class="hexagon two"></div>
<div class="hexagon three"></div>
<div class="hexagon four"></div>
<div class="hexagon five"></div>
<div class="hexagon six"></div>
<div class="hexagon seven center"></div>
</div>
SCSS
* {
box-sizing: content-box;
position: relative;
}
body {
background: #222;
font-size: 10px;
}
.wrapper {
align-items: center;
display: flex;
justify-content: center;
margin: 10rem auto 0;
width: 60%;
}
.hexagon {
animation: fade-in 1000ms linear infinite alternate;
height: 3rem;
margin: 5rem auto;
position: absolute;
transform: scale(0);
width: 5rem;
}
.hexagon:before,
.hexagon:after {
background: transparent;
border-radius: 0;
content: "";
height: auto;
width: 0;
border-left: 2.5rem solid transparent;
border-right: 2.5rem solid transparent;
position: absolute;
}
.hexagon:before { bottom: 100%; }
.hexagon:after { top: 100%; }
.one {
animation-delay: 100ms;
margin-left: -2.6rem;
margin-top: 0.3rem;
background-color: #4ABDAC;
&:before {
border-bottom: 1.5rem solid #4ABDAC;
}
&:after {
border-top: 1.5rem solid #4ABDAC;
}
}
.two {
animation-delay: 200ms;
margin-left: 2.6rem;
margin-top: 0.3rem;
background: #FC4A1A;
&:before {
border-bottom: 1.5rem solid #FC4A1A;
}
&:after {
border-top: 1.5rem solid #FC4A1A;
}
}
.three {
animation-delay: 300ms;
margin-left: 5.2rem;
background: #F7B733;
&:before {
border-bottom: 1.5rem solid #F7B733;
}
&:after {
border-top: 1.5rem solid #F7B733;
}
}
.four {
animation-delay: 400ms;
margin-left: 2.6rem;
margin-top: 9.7rem;
background: #e0474c;
&:before {
border-bottom: 1.5rem solid #e0474c;
}
&:after {
border-top: 1.5rem solid #e0474c;
}
}
.five {
animation-delay: 500ms;
margin-left: -2.6rem;
margin-top: 9.7rem;
background: #00c07f;
&:before {
border-bottom: 1.5rem solid #00c07f;
}
&:after {
border-top: 1.5rem solid #00c07f;
}
}
.six {
animation-delay: 600ms;
margin-left: -5.2rem;
background: #9068be;
&:before {
border-bottom: 1.5rem solid #9068be;
}
&:after {
border-top: 1.5rem solid #9068be;
}
}
.seven {
animation-delay: 700ms;
margin-left: 0;
background: #E5446D;
&:before {
border-bottom: 1.5rem solid #E5446D;
}
&:after {
border-top: 1.5rem solid #E5446D;
}
}
@keyframes fade-in {
0%,
25% {
transform: scale(0);
}
50%,
100% {
transform: scale(1);
}
}
