Preloader with non-functional zoom in

Question

I wanted to programm a preloader, which should disappear by "zooming in".
When the page is loaded and after the zoom animation, the website should be shown.
I thought I am on the right way with "loadsymbol.style.transform = 'scale(30)';" and program the transition in CSS, but it did not work out.

Here is the code: https://www.sololearn.com/de/compiler-playground/WpRe7aE3ENTn

Answer 1

David Mitterecker
you can separate out the zoom-hide animation into a separate class and add that to your preloader via javascript.

https://sololearn.com/compiler-playground/WSVRcUiqaR5E/?ref=app

Answer 2

why not just use css animation on the container? comment out your js and copy-paste this css:

#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #142718;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
animation:zoom-hide 1s ease-in 3s forwards;
}

.loader {
transform: scale(1);
transition: transform 2s ease-in;
width: 70px;
height: 70px;
border-radius: 50%;
border: 8px solid #444444;
border-top: 8px solid darkorange;
animation: spin 1.2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}

@keyframes zoom-hide{
0%{transform:scale(1); opacity:1;}
99%{transform:scale(100);opacity:0;}
100%{display: none;}
}

Answer 3

also, you did not close your inner div properly.

<div id="preloader">
<div class="loader"></div>
</div>

Answer 4

@Bob_Li:

That looks really nice, but the goal was to trigger the animation with Javascript, to ensure the website is really loaded.

But since the loading time of many/my website usualy takes 1-3 seconds, this would be a good solution and is maybe less error prone.
A compromise would be that you just show the background of the preloader, until the website is loaded.

Thank you for your help!

Answer 5

I did it in a similar way, but your code makes more sense. I have to learn more JS xD

My approach: https://www.sololearn.com/de/compiler-playground/W81McH1i2VFA

Thank you!

Answer 6

Final result on webpage: https://leberzerroze.at/

Answer 7

Yeah... loading the page for the first time is slow, but I am happy.
Next step are performance updates.

Edit:

okay you are right, i used chrome, but with every other browser it takes years....
Maybe I have to turn off lazy loading :D

Or remove it again...

Answer 8

wow, that's a very slow loading page..😁.

Answer 9

Adapted version for the website:

https://www.sololearn.com/de/compiler-playground/W5oJw32sSaEY

Implemented a hiding function for the preloader that triggers after 5 seconds, irrespective of whether the website is fully loaded.

Had to add z-index: -999, because I was not able to click anything in Mozilla Firefox. Common problem?