Agar tum apni Blogger website me preloader add karna chahte ho jo "Learna Academy" likhte hue aaye, to yeh code use karo.
🚀 Fancy Preloader for Blogger (With "Learna Academy" Text Animation)
👇 Isko Blogger me "Edit HTML" me <head> section ke andar paste karo.
<style>
/* ---- Preloader Full Screen ---- */
#preloader {
position: fixed;
width: 100%;
height: 100%;
background: #1e1e1e;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
/* ---- Animated Text ---- */
#loading-text {
font-size: 28px;
font-weight: bold;
font-family: 'Arial', sans-serif;
color: #00d1ff;
text-transform: uppercase;
letter-spacing: 4px;
position: relative;
animation: fadeInOut 2s infinite alternate;
}
/* ---- Text Animation ---- */
@keyframes fadeInOut {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* ---- Hide Preloader after load ---- */
body.loaded #preloader {
display: none;
}
</style>
<script>
<![CDATA[
window.onload = function() {
document.body.classList.add("loaded");
};
]]>
</script>
<!-- Preloader HTML -->
<div id="preloader">
<span id="loading-text">Learna Academy</span>
</div>
📌 Features:
✅ Modern & stylish text animation (Learna Academy blink effect)
✅ Full-screen preloader effect
✅ Automatically hides after page load
✅ No extra library needed (pure HTML, CSS, JavaScript)
✅ Blogger-friendly (100% works without errors)
🚀 Installation Guide
1️⃣ Blogger Dashboard → Theme → Edit HTML
2️⃣ Find <head> tag and paste this code inside it
3️⃣ Save the theme & refresh your site
4️⃣ Now, you will see "Learna Academy" text animation while loading!
🔥 Try it out & let me know if you need more customizations! 🚀