Gradient spinner

HTML
<div class="spinner"> <div class="loader"></div> <div class="load-text">Loading</div> </div>
SCSS
.spinner { background: #0F768E; color: white; text-align: center; font-size: 40px; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 20000; padding: 10% 0 0; } .spinner .loader { margin: 10% auto; background: purple; background: -moz-linear-gradient(top, #2D3691 0%, #0F768E 100%); background: -webkit-linear-gradient(top, #2D3691 0%, #0F768E 100%); background: linear-gradient(to bottom, #2D3691 0%, #0F768E 100%); border-radius: 50%; width: 201px; height: 201px; position: relative; display: flex; align-items: center; justify-content: center; animation: spin 750ms linear infinite; &::after { content: ""; display: block; width: 95%; height: 95%; background-color: #FFFFFF; border-radius: 50%; overflow: hidden; } } .spinner .load-text { color: violet; font-size: 16px; position: absolute; top: 0; left: 0; right: 0; width: 210px; height: 210px; padding: 0; padding-top: calc(10% + 75px); margin: 10% auto; text-transform: uppercase; letter-spacing: 0.25em; } .spinner img { margin: auto; height: 64px; width: 64px; position: relative; top: 35%; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
JAVASCRIPT
Expand for more options Login