Instagram Loaders

HTML
<div class="container"> <div class="loader"></div> </div> <div class="container two"> <div class="loader"></div> </div> <div class="container"> <div class="loader medium"></div> </div> <div class="container two"> <div class="loader medium"></div> </div>
SCSS
body { display: flex; align-items: center; justify-content: center; height: 100vh; background: #DEDBD2; > * { margin: 5px; } } .container { display: flex; justify-content: center; align-items: center; height: 100px; width: 100px; background: #333; > * { margin: 10px; } } .loader { width: 30px; height: 30px; background: linear-gradient( #fccc63, #fbad50, #e95950, #cd486b, #bc2a8d, #8a3ab9, #4c68d7); border-radius: 50%; animation: 1s rotate infinite ease; &:before { position: absolute; content: ''; width: 20px; height: 20px; background: #333; border-radius: 100%; top: 5px; left: 5px; } } @keyframes rotate { 100% { transform: rotate(1turn); } } .loader.medium { width: 50px; height: 50px; &:before { width: 40px; height: 40px; } } .container.two { background: #FFF; .loader { &:before { background: #FFF; } } .loader.medium { &:before { background: #FFF; } } }
JAVASCRIPT
Expand for more options Login