{"id":979,"date":"2025-09-16T11:57:11","date_gmt":"2025-09-16T11:57:11","guid":{"rendered":"https:\/\/laywow.com\/animation\/preloader-with-a-counter-and-an-image\/"},"modified":"2025-09-17T15:10:10","modified_gmt":"2025-09-17T15:10:10","slug":"preloader-with-a-counter-and-an-image","status":"publish","type":"post","link":"https:\/\/laywow.com\/en\/animations\/preloader-with-a-counter-and-an-image\/","title":{"rendered":"Preloader with a Counter and an Image"},"content":{"rendered":"\n<p>The goal is to display an <strong>animated loading<\/strong> screen with:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>a counter that goes up to 100%,<\/li>\n\n\n\n<li>a text transition (logo),<\/li>\n\n\n\n<li>images that animate in\/out,<\/li>\n\n\n\n<li>then the smooth disappearance of the preloader to display the page.<\/li>\n<\/ul>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Add the Code in Elementor<\/h2>\n\n<ol class=\"wp-block-list\">\n<li>In the WordPress dashboard, go to <strong>Elementor \u2192 Custom Code<\/strong>.<\/li>\n\n\n\n<li>Click on <strong>Add New<\/strong>.<\/li>\n\n\n\n<li>Name it, for example, <em>&#8220;Preloader with a counter and an image&#8221;<\/em>.<\/li>\n\n\n\n<li>Paste the code below.<\/li>\n\n\n\n<li>Set the location to  <strong><strong><code>&lt;head&gt;<\/code><\/strong><\/strong><\/li>\n\n\n\n<li>Publish.<\/li>\n<\/ol>\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.10.4\/gsap.min.js\">&lt;\/script>\n\n&lt;style>\n.layout {\n  position: fixed;\n  top: 0; left: 0;\n  width: 100%; height: 100vh;\n  background: #101012;\n  display: flex; justify-content: center; align-items: center;\n  z-index: 10000;\n}\n.overlay-content { width: 85%; }\n.images { position: relative; height: 50vh; }\n.img-contain { position: relative; width: 40%; height: 100%; margin: 0 auto; z-index: 1000; clip-path: polygon(0 0,100% 0,100% 100%,0% 100%); }\n.img-contain img { position: absolute; top: 0; left: -110%; }\n\n.text { position: relative; margin: 1em 0; clip-path: polygon(0 0,100% 0,100% 100%,0% 100%); }\n.counter, .logo p {\n  font-size: 10rem; text-align: center; text-transform: uppercase;\n  font-family: \"Sora\", Sans-serif; font-weight: 700;\n}\n.counter p { line-height: 100%; }\n.counter p span, .logo p span { position: relative; z-index: 9999; color: white; }\n.logo { position: absolute; top: 0%; left: 50%; transform: translateX(-50%); }\n.logo p { line-height: 100%; }\n.logo p span { position: relative; top: 200px; opacity: 0; }\n&lt;\/style>\n\n&lt;div class=\"layout\">\n  &lt;div class=\"overlay-content\">\n    &lt;div class=\"images\">\n      &lt;div class=\"img-contain\">\n        &lt;img src=\"https:\/\/images.pexels.com\/photos\/18131871\/pexels-photo-18131871.jpeg?w=800&amp;auto=compress&amp;cs=tinysrgb\" alt=\"\" \/>\n        &lt;img src=\"https:\/\/images.pexels.com\/photos\/18398708\/pexels-photo-18398708.jpeg?w=800&amp;auto=compress&amp;cs=tinysrgb\" alt=\"\" \/>\n        &lt;img src=\"https:\/\/images.pexels.com\/photos\/18131896\/pexels-photo-18131896.jpeg?w=800&amp;auto=compress&amp;cs=tinysrgb\" alt=\"\" \/>\n      &lt;\/div>\n    &lt;\/div>\n    &lt;div class=\"text\">\n      &lt;div class=\"counter\">&lt;p>100%&lt;\/p>&lt;\/div>\n      &lt;div class=\"logo\">&lt;p>HELLO&lt;\/p>&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/div>\n\n&lt;script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  splitTextIntoSpans(\".logo p\");\n\n  \/\/ entr\u00e9e des images\n  gsap.to(\".img-contain img\", {\n    left: 0, stagger: 0.1,\n    ease: \"power4.out\", duration: 1.5, delay: 4,\n  });\n\n  \/\/ sortie des images\n  gsap.to(\".img-contain img\", {\n    left: \"110%\", stagger: -0.1,\n    ease: \"power4.out\", duration: 1.5, delay: 7,\n  });\n});\n\nfunction splitTextIntoSpans(selector) {\n  var element = document.querySelector(selector);\n  if (element) {\n    var text = element.innerText;\n    element.innerHTML = text.split(\"\").map(char => `&lt;span>${char}&lt;\/span>`).join(\"\");\n  }\n}\n\nfunction startLoader() {\n  var counterElement = document.querySelector(\".counter p\");\n  var currentValue = 0;\n\n  function updateCounter() {\n    if (currentValue === 100) { animateText(); return; }\n\n    currentValue += Math.floor(Math.random() * 10) + 1;\n    currentValue = currentValue > 100 ? 100 : currentValue;\n\n    counterElement.innerHTML =\n      currentValue.toString().split(\"\").map(char => `&lt;span>${char}&lt;\/span>`).join(\"\") + \"&lt;span>%&lt;\/span>\";\n\n    setTimeout(updateCounter, Math.floor(Math.random() * 200) + 100);\n  }\n\n  function animateText() {\n    setTimeout(() => {\n      gsap.to(\".counter p span\", { top: \"-400px\", stagger: 0.1, ease: \"power3.inOut\", duration: 1 });\n      gsap.to(\".logo p span\", { top: \"0\", opacity: 1, stagger: 0.1, ease: \"power3.inOut\", duration: 1 });\n      gsap.to(\".logo p span\", { top: \"-400px\", stagger: 0.1, ease: \"power3.inOut\", duration: 1, delay: 3 });\n      gsap.to(\".layout\", { opacity: 0, ease: \"power3.inOut\", duration: 1, delay: 4 });\n    }, 300);\n  }\n\n  updateCounter();\n}\nstartLoader();\n&lt;\/script><\/code><\/pre>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Explanation of Elements<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><code>.layout<\/code>  \u2192 the full-screen preloading screen.<\/li>\n\n\n\n<li><code>.counter<\/code>  \u2192 the text that displays the progress.<\/li>\n\n\n\n<li><code>.logo<\/code>  \u2192 your word\/logo that appears then disappears.<\/li>\n\n\n\n<li><code>.img-contain img<\/code>  \u2192 the animated images for entry and exit.<\/li>\n<\/ul>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Easily Customize<\/h2>\n\n<p>Here are the parts of the code you can modify:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Change the images<\/strong>: replace the URLs in the <code>&lt;img src=\"...\"&gt;<\/code> tag.<\/li>\n\n\n\n<li><strong>Change the logo text<\/strong>: modify the content of <code>&lt;div class=\"logo\"&gt;&lt;p&gt;HELLO&lt;\/p&gt;&lt;\/div&gt;<\/code>.<\/li>\n\n\n\n<li><strong>Durations and timings<\/strong>:\n<ul class=\"wp-block-list\">\n<li><code>delay: 4<\/code>  \u2192 when the images appear,<\/li>\n\n\n\n<li><code>delay: 7<\/code>  \u2192 when they disappear,<\/li>\n\n\n\n<li><code>duration: 1.5<\/code>  \u2192 duration of the image animation.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Counter speed<\/strong>: adjust the lines <code>Math.floor(Math.random() * 200) + 100<\/code> \u2192 decrease the values for the counter to go faster.<\/li>\n\n\n\n<li><strong>Logo text effect<\/strong>: <code>gsap.to(\".logo p span\", { top: \"0\", opacity: 1, ... })<\/code> \u2192 you can play with <code>top<\/code>, <code>opacity<\/code>, and <code>ease<\/code>.<\/li>\n<\/ul>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Practical Tips<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>Compress the preloader images (otherwise it can slow down the site).<\/li>\n\n\n\n<li>Choose a suitable background (<code>background: #101012;<\/code>) to match your brand guidelines.<\/li>\n\n\n\n<li>If you want the preloader to display <strong>only once<\/strong> per session, you can add a small script with <code>sessionStorage<\/code>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The goal is to display an animated loading screen with: Add the Code in Elementor Explanation of Elements Easily Customize Here are the parts of the code you can modify: Practical Tips<\/p>\n","protected":false},"author":1,"featured_media":974,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[28],"class_list":["post-979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animations","tag-transitions"],"acf":[],"_links":{"self":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/comments?post=979"}],"version-history":[{"count":1,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/979\/revisions"}],"predecessor-version":[{"id":980,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/979\/revisions\/980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media\/974"}],"wp:attachment":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media?parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/categories?post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/tags?post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}