In this article, I will show you how to add a Stylish Preload animation to your website using simple HTML, CSS, and Javascript code.
I will also show you how to set this animation to the homepage only using the "if condition" in the theme.
What is Loading Animation on a Website?
Loading animation is the first animation screen we see when we open a website. There are a lot of cool loading animations you can put on your website but putting a long/high graphics animation may increase your website load time and we don't want that. So this is a simple loading animation you can use on your website.
Loading animation is a way to tell your readers about your brand and blog, and with unique cool animation anybody can recognise your website is genuine and safe.
Why Loading animation is an important part of a website.
Reduce perceived wait time: Even with fast internet speeds, there will always be some delay in loading content. A loading animation can make the wait seem shorter by distracting the user and keeping them engaged. Studies have shown that perceived speed is often more important than actual speed, and a well-designed animation can significantly improve the user experience.
Provide feedback: When a user clicks on a button or link, they expect something to happen. A loading animation assures them that the action has been registered and the site is working behind the scenes. This helps to avoid confusion and frustration, especially for slower connections or complex interactions.
Enhance brand identity: Loading animations can be designed to reflect the website's brand or theme. This can be a subtle way to create a positive first impression and build brand recognition. For example, a playful animation might be suitable for a children's website, while a more sophisticated animation might be better for a financial institution.
It's important to note that loading animations should be used strategically. They should be lightweight, unobtrusive, and not overshadow the actual content of the website. If they are poorly designed or take too long, they can have the opposite effect and actually frustrate users.
The code Download Link is given below.
So, let's start. Steps to add Preload Animation
Step-1: Go to Blogger Dashboard and Create a Backup of your theme. Step-2: Now search for ]]></b:skin> tag or </style> tag and paste the CSS code just above it.
/* Preloader Animation In Blogger */
.preloader {
position: fixed;
width: 100%;
height: 100vh;
background: #0f0f0f;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 400ms;
z-index: 2000;
}
.preloader.hide {
opacity: 0;
pointer-events: none;
}
.preloader .preloader-text {
color: #838383;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 15px;
}
.preloader .dots-container {
display: flex;
margin-bottom: 48px;
}
.preloader .dot {
background: red;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 5px;
}
.preloader .dot.red {
background: #ef476f;
animation: bounce 1000ms infinite;
}
.preloader .dot.green {
background: #06d6a0;
animation: bounce 1000ms infinite;
animation-delay: 200ms;
}
.preloader .dot.yellow {
background: #ffd166;
animation: bounce 1000ms infinite;
animation-delay: 400ms;
}
@keyframes bounce {
50% {
transform: translateY(16px);
}
100% {
transform: translateY(0);
}
}
Step-3: Now search for </body> tag and paste the HTML and Javascript code above it.
<div class="preloader">
<div class="dots-container">
<div class="dot red"></div>
<div class="dot green"></div>
<div class="dot yellow"></div>
</div>
<div class="preloader-text">
Loading...
</div>
</div>
<script>
const preloader = document.querySelector(".preloader");
const preloaderDuration = 500;
const hidePreloader = () => {
setTimeout(() => {
preloader.classList.add("hide");
}, preloaderDuration);
}
window.addEventListener("load", hidePreloader);
</script>
Step-4: Now save your theme and the preload animation is added to your Blogger theme.
You can also add the preloading effect to the homepage only by adding the If condition wrapping both HTML and Javascript code.
<b:if cond= 'data:blog.url == "URL"'>
</b:if>
Loading animations are important for websites for several reasons, primarily related to user experience and engagement. Here’s why they matter:
1. Improving Perceived Performance
A loading animation helps fill the gap when the website is processing or fetching data, making the wait time feel shorter. Even if the page takes a few seconds to load, users are more likely to remain patient if they see a dynamic loading indicator. A spinning loader or progress bar gives users the sense that something is happening behind the scenes, preventing frustration.
2. Preventing User Frustration
- When users click on a link or perform an action that takes time, they expect feedback. If a site takes too long to respond without any indication, users may think it’s broken or frozen. Instead of staring at a blank screen, a loading animation reassures users that the website is working, reducing the likelihood of them abandoning the page.
3. Enhancing User Experience
- A well-designed loading animation can make the website experience more pleasant and engaging. It gives the site personality and makes even the waiting moments part of the overall design. Websites like Slack or Trello use fun or themed loading animations that match their branding, adding a bit of enjoyment even during wait times.
4. Keeping User Attention
- Users’ attention spans are short, and a loading animation can help maintain their focus. Without it, users might assume the site is slow or malfunctioning and leave. A clever or interesting animation can turn waiting time into something more engaging, holding the user’s attention long enough for the content to load.
5. Communicating Progress
- Some loading animations provide users with a visual representation of how long the wait will be, such as progress bars. This transparency helps manage expectations. A progress bar that fills up as the page loads lets users know how close the site is to finishing, reducing uncertainty.
6. Building Brand Identity
A custom-loading animation can reinforce a brand’s identity. It’s an opportunity to showcase creativity and ensure that every aspect of the site aligns with the brand’s tone. A brand can use a logo or mascot in the loading animation, turning the waiting time into another branding opportunity.
In short, loading animations are essential for making websites feel responsive, engaging, and professional while improving the overall user experience.
As websites get bigger and more complex, loading animations becomes even more critical. Here's how they help in large-scale websites:
1. Masking Long Load Times for Heavy Content
Bigger websites often contain more media, data, and features, which can increase load times. Without a loading animation, users might experience extended wait times with no indication of progress. A loading animation can mask these delays by keeping the user engaged while the larger assets like images, videos, or scripts are being fetched. This reduces the perception of long load times, making the website feel faster.
Breaking Down Multi-step Processes
Larger websites often require multi-step operations, such as e-commerce checkout processes, database queries, or API calls. Each step can introduce delays. Loading animations can be placed between steps, letting users know that the process is continuing smoothly. This prevents confusion and keeps users informed as complex operations take place.
3. Providing Feedback for Dynamic Content
Why it's crucial?
Large websites often serve dynamic content based on user interaction, such as filtering search results, fetching personalized data, or processing forms. These interactions can introduce noticeable delays. When users request data or trigger processes, a loading animation ensures they know their action is being processed. It provides instant feedback that something is happening in the background, which is especially important for sites that rely on real-time or frequently updated data.
4. Improving UX in Single-page Applications (SPAs)
Large SPAs like dashboards or social platforms load content dynamically, meaning page loads don’t always follow a traditional full-page reload pattern. These apps load individual elements (or “chunks”) of data asynchronously. Loading animations for specific parts of the interface (like cards, images, or data grids) helps users understand what is loading and prevents confusion when certain sections appear slower than others.
5. Handling Slow Networks
Users accessing large websites from slower networks (such as mobile or rural connections) can experience delays, especially when dealing with lots of assets or interactive features. Loading animations help manage expectations on slow networks. If the website is trying to fetch large resources over a slow connection, the user can remain engaged without assuming the site is malfunctioning.
Managing Asynchronous Loading of Heavy Assets
As bigger sites often use lazy loading (loading only what's needed when it's needed) to optimize performance, some assets like large images or interactive scripts may load asynchronously. Loading animations for these parts of the page reassure users that content is coming. For example, placeholders or skeleton screens can be displayed until the actual content is fully loaded.
Smoothing the Transition Between Pages or Sections
Large websites with complex navigations, such as news platforms or e-commerce sites, may require significant resources when transitioning between sections. Loading animations smooth out transitions by filling the gap between the user navigating from one page to another. This is especially useful when moving from resource-heavy pages (e.g., video galleries) to other parts of the site.
In conclusion, as a website grows in size and complexity, a well-designed loading animation can play a critical role in enhancing user experience, maintaining engagement, and providing valuable feedback during resource-heavy operations.
