Adding Loading Line Bar Animation to Website - Using CSS, HTML & JavaScript - WordPress Theme Store

Have you ever wanted to spice up your website and provide a visually appealing loading animation for your visitors? Adding a loading animation not only improves the user experience but also gives your site a modern touch. In this article, we’ll show you how to create a simple loading animation using HTML, CSS, and JavaScript, and how to integrate it into both a basic HTML site and a PHP-driven website.

loading bar for website — loading bar for the website

Here is all the simple code that allow you to display loading bar before full website loaded, Simple to implement.

The CSS Code

Let’s start by looking at the code that creates this loading animation.

<style>
@keyframes page-load {
from {
width: 0;
}
to {
width: 100%;
}
}
.page-loading::before {
content: " ";
display: block;
position: fixed;
z-index: 10;
height: 2px;
width: 100%;
top: 0;
left: 0;
background-color: #06D;
animation: page-load ease-out 2s;
}
</style>

JavaScript Code

<script>
document.addEventListener("DOMContentLoaded", function () {
var linksToAnimate = document.querySelectorAll(".load-animation-link");

linksToAnimate.forEach(function (link) {
link.addEventListener("click", function (e) {
e.preventDefault(); // Prevent the default link behavior
document.body.classList.add("page-loading");

// Remove the loading class when the content has loaded
window.addEventListener("DOMContentLoaded", function () {
document.body.classList.remove("page-loading");
});
});
});

// Use this if you still want the loading animation on beforeunload
window.addEventListener("beforeunload", function () {
document.body.classList.add("page-loading");
});
});
</script>

Understanding the Code

Animation CSS

– We define a CSS animation called `page-load` that animates the width of a loading bar from 0% to 100%.
– We create a pseudo-element `::before` with a fixed position at the top of the page. This element represents the loading bar.
– The `animation` property applies the `page-load` animation to the loading bar element with a duration of 2 seconds.

JavaScript Code

– We start by selecting specific elements with the class `load-animation-link` using `document.querySelectorAll`. These are the elements (e.g., links) that trigger the loading animation.
– When a link with the class `load-animation-link` is clicked, we prevent its default behavior (navigation) using `e.preventDefault()`.
– We add the `page-loading` class to the `body` element, which triggers the loading animation.
– We add an event listener for the `DOMContentLoaded` event to remove the `page-loading` class once the content has fully loaded, providing a smooth transition from the loading animation to the actual content.
– Optionally, we can also add the `page-loading` class when the user is leaving the page (on `beforeunload`) to show a loading animation during navigation.

Using the Code in HTML

To use this loading animation in a basic HTML website, follow these steps:

1. Copy the provided HTML and JavaScript code and paste it within the `<head>` section of your HTML document.

2. Add the class `load-animation-link` to the links or elements that you want to trigger the loading animation when clicked. For example:

<a href="your-page.html" class="load-animation-link">Click Me</a>

3. That’s it! Your HTML website now has a loading animation.

Using the Code in PHP

Integrating the loading animation into a PHP-driven website is just as straightforward. Follow these steps:

1. Copy the provided HTML and JavaScript code into your PHP template file, typically within the `<head>` section.

2. In your PHP template, make sure that links or elements you want to trigger the loading animation have the `load-animation-link` class, just like in the HTML example.

3. When creating links in PHP, ensure that the `class` attribute includes `load-animation-link`, like this:

<a href="your-page.php" class="load-animation-link">Click Me</a>

4. Save your PHP file, and the loading animation will now work seamlessly with your PHP-powered website.

Conclusion

Adding a loading animation to your website enhances the user experience and provides a professional touch to your web pages. With the provided HTML, CSS, and JavaScript code, you can easily integrate this loading animation into both basic HTML and PHP websites. Visitors will appreciate the visual feedback as your content loads, making their browsing experience more enjoyable.