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);
}
}