Skip to content

Instantly share code, notes, and snippets.

@softiconic
Last active December 3, 2023 02:57
Show Gist options
  • Save softiconic/fd7f0866a974b02d3b983d423c802888 to your computer and use it in GitHub Desktop.
Save softiconic/fd7f0866a974b02d3b983d423c802888 to your computer and use it in GitHub Desktop.
Design a unique preloader
<!-- Preloader HTML -->
<div id="preloader">
<!-- Add your preloader content here -->
<p>Loading...</p>
</div>
<!-- Your website content goes here -->
/* Add your preloader styles here */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
<script>
$(document).ready(function () {
// Check if the session cookie is set
if (document.cookie.indexOf('preloaderShown=true') === -1) {
// Show the preloader
$("#preloader").delay(3000).fadeOut("slow");
// Set the session cookie
document.cookie = 'preloaderShown=true; path=/';
} else {
// If the session cookie is set, hide the preloader immediately
$("#preloader").hide();
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment