apps/angular-thirty-seconds/src/app/create-snippet/snippet-spinner/snippet-spinner.component.scss
.spinner-back-ground {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
z-index: 9999;
}
.centered-spinner {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.preload {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*change these sizes to fit into your project*/
width: 100px;
height: 100px;
}
.preload div {
border: 0;
margin: 0;
width: 40%;
height: 40%;
position: absolute;
border-radius: 50%;
animation: spin 2s ease infinite;
}
.preload :first-child {
background: #19a68c;
animation-delay: -1.5s;
}
.preload :nth-child(2) {
background: #f63d3a;
animation-delay: -1s;
}
.preload :nth-child(3) {
background: #fda543;
animation-delay: -0.5s;
}
.preload :last-child {
background: #193b48;
}
@keyframes spin {
0%,
100% {
transform: translate(0);
}
25% {
transform: translate(160%);
}
50% {
transform: translate(160%, 160%);
}
75% {
transform: translate(0, 160%);
}
}