XBOX Power Button

HTML
<div class='loader'> <i class="fa fa-power-off"></i> </div>
SCSS
* { padding: 0; margin: 0; border: 0; box-sizing: border-box; } html, body { height: 100%; } body { background-color: #222; overflow: hidden; } .loader { width: 200px; height: 200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; box-shadow: 0 0 5px #444; display: flex; justify-content: center; align-items: center; .fa { z-index: 2; font-size: 50px; color: #444; animation: pulse 1s linear infinite; } &:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(lime, black 60%); animation: spin .5s infinite linear; } &:after { content: ""; position: absolute; width: 95%; height: 95%; top: 2.5%; left: 2.5%; background-color: #222; border-radius: 50%; box-shadow: inset 0 0 5px #444; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0% { color: lime; } 100% { color: #444; } }
JAVASCRIPT
Expand for more options Login