SO question

https://stackoverflow.com/q/73678101/1238244

by Luke Harby

HTML

<div class="white-logo"><a href="proiectare.html"><img src="img/logo_black.png" alt="logo_white">Anchor</a></div>

<div class="loader_bg"></div>
<div class="loader"></div>

CSS

body {
    background: orange;
}
.loader_bg{
position: fixed;
z-index: 999999;
background: #fff;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
opacity: 0.925; /* just for testing so we can see the anchor below */
}
.loader{
border: 0 soild transparent;
border-radius: 50%;
width: 150px;
height: 150px;
position: absolute;
top: calc(50vh - 75px);
left: calc(50vw - 75px);
text-align: center;
}
.loader:before, .loader:after{
content: '';
border: 1em solid #BDBDBD;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: loader 2s linear infinite;
opacity: 0;
}
.loader:before{
animation-delay: .5s;
}
@keyframes loader{
0%{
    transform: scale(0);
    opacity: 0;
}
50%{
    opacity: 1;
}
100%{
    transform: scale(1);
    opacity: 0;
}
}
.white-logo > a > img {
display: run-in;
width: 5%;
margin-left: 10%;
margin-top: -8.5%;
position: absolute;
z-index: 1;
}