Creating a Sleek Nano Bar Loading Progress with Animated Ease Transition
In the realm of web development, incorporating visually appealing loading progress indicators has become crucial to enhance user experience. One such impressive option is the nano bar loading progress, which not only boasts simplicity in its creation but also exudes a cool and modern vibe. Furthermore, by integrating a seamless animation to indicate the completion of loading, the nano bar gracefully disappears, ensuring a smooth transition for users. In this article, we will delve into the process of crafting a nano bar loading progress and explore its captivating features.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Loading Nano Bar</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="nano-bar"></div>
<script src="script.js"></script>
</body>
</html>style Code:
.nano-bar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(to right, #C41F3E, #8B1D41);
transition: width 0.2s ease;
}
js Code:
window.addEventListener('load', function() {
var nanoBar = document.querySelector('.nano-bar');
var startTime = performance.now();
function updateNanoBar() {
var elapsedTime = performance.now() - startTime;
var progress = Math.min((elapsedTime / 5000) * 100, 100); // Adjust the duration (5000ms) as needed
nanoBar.style.width = progress + '%';
if (progress < 100) {
requestAnimationFrame(updateNanoBar);
} else {
setTimeout(function() {
nanoBar.style.opacity = '0';
nanoBar.style.transition = 'opacity 0.5s ease';
setTimeout(function() {
nanoBar.style.display = 'none';
}, 500); // Adjust the delay (in milliseconds) before hiding the nano bar completely
}, 3000); // Adjust the delay (in milliseconds) before starting the fade-out animation
}
}
updateNanoBar();
});In the above code, we have an HTML file that includes a nano-bar div, a CSS file defining the appearance of the nano bar, and a JavaScript file for controlling the loading progress and updating the bar accordingly.
The JavaScript code adds an event listener for the load event, which fires when all the resources on the page have finished loading. Inside the event listener, we select the nano-bar element using document.querySelector(). We also store the start time using performance.now().
The updateNanoBar() the function calculates the elapsed time since the page started loading and updates the width nano-bar based on the progress. In this example, the nano bar progresses linearly over a duration of 5000 milliseconds (5 seconds), but you can adjust this duration according to your requirements. The width is updated using the style.width property.
The requestAnimationFrame() the method is used to continuously call the updateNanoBar() function until the progress reaches 100%.
You can save the HTML code in an HTML file (e.g., index.html), the CSS code in a CSS file (e.g., styles.css), and the JavaScript code in a JavaScript file (e.g., script.js). Make sure to place these files in the same directory and load the HTML file in a web browser to see the nano bar in action.
GitHub Code:
Try online:
