#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); } }
JAVASCRIPT
Expand for more options Login