Welcome To ITSolutionsGuides,
Lets see How To Set Preloader In a Website using it solutions guides tutorial.
Learn to add a preloader to your website for a seamless user experience. Utilize HTML, CSS, and JavaScript to create an engaging loading animation that enhances your site's aesthetic appeal and responsiveness.
In this example we will use jquery .hide(); and .show(); to set the preloader
<!DOCTYPE html>
<html lang="en">
<head>
<title>Preloader Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.center {
align-items: center !important;
justify-content: center !important;
height: 100vh;
display: flex;
}
h2 {
display: none;
}
</style>
</head>
<body class="center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="text">
<h2>Hello World</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("h2").hide();
setInterval(showwebsite, 5000);
});
function showwebsite() {
$("h2").show();
$(".spinner-border").hide();
};
</script>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides