Loader Motion
Home
Snippets
Loader Motion
HTML
CSS
JS
<div class="loader blurjs"></div>
body { height: 100vh; margin: 0; background-color: #000000; animation: colorRot 5000ms linear infinite; } .loader { position: absolute; width: 100px; height: 100px; top: calc(50% - 50px); left: calc(50% - 50px); animation: rotAnim 750ms ease-in-out infinite; } .loader::before, .loader::after { content: ""; position: absolute; width: 25%; height: 25%; top: 0; left: 0; border-radius: 50%; background-color: #ffffff; box-shadow: 0 0 40px #7aa8ff, 0 0 10px #7aa8ff; } .loader::after { top: unset; left: unset; bottom: 0; right: 0; } @keyframes rotAnim { 0% { rotate: 0deg; } 100% { rotate: 360deg; } } @keyframes colorRot { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
//javascript
Ad #1
Ad #2
Scroll to Top