Rotating Circle with Gradient Background Animation

HTML
<div class="holder"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> <div class="circle circle-4"></div> <div class="circle circle-5"></div> <div class="circle circle-6"></div> </div>
CSS
html { width: 100%; height: 100%; } body { background: linear-gradient(45deg, #444 0%, #010c14 100%); background-size: 200% 200%; height: 100%; width: 100%; animation: background 6s ease infinite; } .circle { position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; width: 200px; height: 200px; border: 6px solid #EEE; border-radius: 50%; } .circle-1 { border-color: #2ecc71; box-shadow: 0px 0px 2px 0px #2ecc71, inset 0px 0px 2px 0px #2ecc71; animation: rotate 3s linear infinite 0.5s; } .circle-2 { border-color: #9b59b6; box-shadow: 0px 0px 2px 0px #9b59b6, inset 0px 0px 2px 0px #9b59b6; animation: rotate 3s linear infinite 1s; } .circle-3 { border-color: #e74c3c; box-shadow: 0px 0px 2px 0px #e74c3c, inset 0px 0px 2px 0px #e74c3c; animation: rotate 3s linear infinite 1.5s; } .circle-4 { border-color: #e67e22; box-shadow: 0px 0px 2px 0px #e67e22, inset 0px 0px 2px 0px #e67e22; animation: rotate 3s linear infinite 2s; } .circle-5 { border-color: #f1c40f; box-shadow: 0px 0px 2px 0px #f1c40f, inset 0px 0px 2px 0px #f1c40f; animation: rotate 3s linear infinite 2.5s; } .circle-6 { border-color: #bdc3c7; box-shadow: 0px 0px 2px 0px #bdc3c7, inset 0px 0px 2px 0px #bdc3c7; animation: rotate 3s linear infinite 3s; } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } } @keyframes background { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
JAVASCRIPT
Expand for more options Login