CSS
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #16222A;
background: linear-gradient(to left, #16222A , #3A6073);
overflow: hidden;
}
.square-spinner {
width: .1px;
height: .1px;
border: 100px solid transparent;
animation: loader 1s ease-in infinite,
spin 2s linear infinite;
}
@keyframes loader {
0% {
border-bottom-color: transparent;
border-top-color: #ed2861;
}
25% {
border-left-color: transparent;
border-right-color: #f06045;
}
50% {
border-top-color: transparent;
border-bottom-color: #f8b739;
}
75% {
border-right-color: transparent;
border-left-color: #82c545;
}
100% {
border-bottom-color: transparent;
border-top-color: #18a39b;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
1 Response