I recently implemented a loader within a div using the following CSS code:
.main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100% !important;
}
.loading {
width: 20px;
height: 20px;
transform: rotate(70deg);
}
loading::before,
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50px;
animation: loading 2s linear infinite;
}
// more CSS code ...
After spending hours trying to vertically and horizontally center the loader without success, I ended up with a result similar to the image below.
Despite applying classes like
d-flex justify-content-center align-items-centerhttps://i.sstatic.net/5Azl0.png
Thank you!