Animated preloader with logo
📌 Task:
Develop a preloader for the website with an animation of the logo. The logo is provided as an attachment (SVG/PNG). The animation should imitate opening and closing the box, creating a 3D effect (volume).
🎬 Animation Scenario:
The logo is centered on the screen, occupying about 30% of the window width (responsive, ± not critical).
The animation begins with the logo "opening" from the center in parts, as if you are looking down at an opening box.
Parts of the logo appear sequentially, with slight 3D rotations.
After full assembly — pause for 0.5–1 second.
Then the logo animatedly "closes" back to the center — in the same order as it opened.
The animation repeats infinitely until the main page loads.
After loading — the preloader smoothly disappears (fade out) and is removed from the DOM.
💡 Technical Requirements:
HTML + CSS + JavaScript.
Without using third-party libraries (GSAP, jQuery, etc.) — if possible.
Maximally lightweight and fast loading (priority — performance).
The logo must be implemented as SVG, broken into separate animated elements.
Keep all logo colors exactly as in the original.
The code should be easily embeddable into any page (preferably as a single container + script/style).
🧩 Additional:
I am ready to provide additional details and explanations of the logic to those interested in the project.
Applications 2
-
562 7 0 Hello! I will create a logo animation using html, css, js (without third-party libraries), following the BEM methodology.
We will discuss the detailed technical specifications in private messages.
-
вообще хорошо когда страница загружается меньше/равно 1 секунде.
вы хотите анимацию на половине которой 0.5-1 секунда, это сколько планируется чтобы страница грузилась не менее 3-х секунд?
если вы хотите отработать какой-то сценарий анимации логичнее сделать просто заведомо показ предоадера в течении хотя бы полностью одного цикла без разницы за 0.5 секунды загрузилась страница или больше.
а то хотите анимацию которая при быстрой загрузки страницы мелькнёт непонятно чем и как что бывает хуже чем просто вид сайта прка он прогружается.
-