on click preloader
Wed Mar 20 2024 21:20:06 GMT+0000 (Coordinated Universal Time)
Saved by
@nofil
/* html code */
<div class="preloader-container">
<div class="preloader">
<img src="/wp-content/uploads/2024/03/logo-gif.gif" alt="Loading...">
<span class="close-btn" onclick="closePreloader()">Visit</span>
</div>
</div>
/* preloader */
.preloader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 94%);
display: flex;
z-index: 9999;
justify-content: center;
align-items: center;
}
.preloader {
width: 400px;
height: 225px;
position: relative;
text-align: center;
}
.close-btn {
position: relative;
top: 30px;
right: 0;
left: 0;
margin: auto !important;
cursor: pointer;
color: white;
font-size: 30px;
text-align: center;
padding: 10px;
background: green;
width: 150px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #008000;
transition: all ease 0.5s;
}
.close-btn:hover {
background: transparent;
color: #fff;
border: 2px solid #fff;
}
/* preloader */
// Function to close the preloader
function closePreloader() {
document.querySelector('.preloader-container').style.display = 'none';
}
content_copyCOPY
Comments