Get the Ultimate Animated Squid Game Preloader for Any Blogger Theme (Free Code)
Introducing the SquidUioveX: The Ultimate Animated Preloader for Blogger
In today's fast-paced digital world, first impressions matter. A website's loading screen is often the very first interaction a user has with your brand. A generic, boring loader can make your site feel slow, but a captivating and stylish preloader can turn waiting time into an engaging experience. That's why we at UioveX are thrilled to introduce the SquidUioveX Preloader, a universal, animated loading screen inspired by the iconic symbols from the viral "Squid Game" series.
Live Preview of the SquidUioveX Animation
Key Features of SquidUioveX Preloader
We've packed this preloader with modern features to ensure it not only looks great but also performs flawlessly on any Blogger site.
- Universally Compatible: Designed to work seamlessly with any Blogger theme, new or old.
- Fully Animated & Stylish: Features a smooth, high-performance "reveal" and "glow" animation that is guaranteed to impress your visitors.
- Theme & Dark Mode Aware: Automatically adapts to your theme's primary color and supports both light and dark modes right out of the box.
- Dynamic Loading Text: Engages users with a sequence of loading texts like "Connecting...", "Initializing...", and "Loading...".
- Extremely Lightweight: Built with pure CSS and minimal JavaScript, ensuring it doesn’t slow down your site.
- Easy 2-Step Installation: You can get this running on your blog in less than two minutes by following our simple guide.
Installation Guide
Getting the SquidUioveX preloader on your blog is incredibly easy. Just follow the two simple steps below. No need to edit your existing theme files!
-
Add the CSS Code
The first step is to add the styling code that creates the animation and makes it look beautiful. You can do this in two ways.
Easy Method (Recommended): Go to your Blogger Dashboard → Theme → Customize → Advanced → Find "Add CSS" from the dropdown menu, and paste the CSS code provided below into the box.Expert Method: Alternatively, you can go to Theme → Edit HTML, search for
<!--[ Skin ]-->, and paste the CSS code right above it. -
Add the HTML & JavaScript Code
Next, you need to add the HTML structure for the preloader. This code contains the shapes and the script that makes it disappear after the page loads.
Important: This code must be placed right after the opening<body>tag in your theme's HTML for the best performance.
The Universal Code
Here are the code snippets you'll need. Just copy and paste them according to the instructions above.
Step 1: CSS Code
Copy the complete CSS code from the box below and paste it into your theme's custom CSS section.
/* SquidUioveX Loader v1.0 - Created By SAM (UioveX) - https://www.uiovex.top */
/* This preloader is universal and works on any Blogger theme. */
:root {
--squid-primary-color: #007BFF; /* Default Blue: Change this to your blog's main color */
--squid-light-bg: #ffffff;
--squid-dark-bg: #121212;
--squid-light-text: #333333;
--squid-dark-text: #f0f0f0;
}
.SquidUioveX-overlay{position:fixed;inset:0;background-color:var(--squid-light-bg);display:flex;align-items:center;justify-content:center;z-index:9999;visibility:visible;opacity:1;transition:opacity .5s ease .5s, visibility .5s ease .5s;}.SquidUioveX-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;}.SquidUioveX-container{text-align:center;}.SquidUioveX-loader{display:flex;justify-content:center;align-items:center;gap:30px;margin-bottom:20px;}.SquidUioveX-shape{width:60px;height:60px;position:relative;}.SquidUioveX-shape::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--squid-primary-color);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;transform:scale(0);animation:squid-scale-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;}.SquidUioveX-shape::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--squid-light-bg);transform-origin:left;transform:scaleX(1);animation:squid-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;}.SquidUioveX-shape.circle::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E")}.SquidUioveX-shape.triangle::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,95 5,95' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,95 5,95' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E")}.SquidUioveX-shape.square::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E")}.SquidUioveX-shape.circle::before,.SquidUioveX-shape.circle::after{animation-delay:0s}.SquidUioveX-shape.triangle::before,.SquidUioveX-shape.triangle::after{animation-delay:0.2s}.SquidUioveX-shape.square::before,.SquidUioveX-shape.square::after{animation-delay:0.4s}.SquidUioveX-loader-text{position:relative;height:20px;font-size:1rem;font-weight:600;letter-spacing:2px;color:var(--squid-light-text);text-transform:uppercase;overflow:hidden;}.SquidUioveX-loader-text span{position:absolute;width:100%;left:0;opacity:0;animation:squid-text-cycle 3s linear infinite;}.SquidUioveX-loader-text span:nth-child(1){animation-delay:0s}.SquidUioveX-loader-text span:nth-child(2){animation-delay:1s}.SquidUioveX-loader-text span:nth-child(3){animation-delay:2s}
@media (prefers-color-scheme: dark) {
.SquidUioveX-overlay{background-color:var(--squid-dark-bg)}.SquidUioveX-shape::before{background-color:var(--squid-primary-dark-theme, var(--squid-primary-color))}.SquidUioveX-shape::after{background-color:var(--squid-dark-bg)}.SquidUioveX-loader-text{color:var(--squid-dark-text)}
}
@keyframes squid-scale-in{from{transform:scale(0);filter:blur(10px)}to{transform:scale(1);filter:blur(0);box-shadow:0 0 15px 5px var(--squid-primary-color);}}@keyframes squid-reveal{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes squid-text-cycle{0%{transform:translateY(100%);opacity:0}10%{transform:translateY(0);opacity:1}33%{transform:translateY(0);opacity:1}43%{transform:translateY(-100%);opacity:0}100%{transform:translateY(-100%);opacity:0}}
Step 2: HTML & JavaScript Code
Copy the complete code from the box below and paste it directly after the opening <body> tag in your theme's HTML.
<!-- SquidUioveX Loader by SAM (UioveX) - Start -->
<div class='SquidUioveX-overlay' id='SquidUioveX-preloader'>
<div class='SquidUioveX-container'>
<div class='SquidUioveX-loader'>
<div class='SquidUioveX-shape circle'></div>
<div class='SquidUioveX-shape triangle'></div>
<div class='SquidUioveX-shape square'></div>
</div>
<div class='SquidUioveX-loader-text'>
<span>Connecting...</span>
<span>Initializing...</span>
<span>Loading...</span>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
(function(){
const preloader = document.getElementById('SquidUioveX-preloader');
if (preloader) {
window.addEventListener('load', function() {
setTimeout(function() {
preloader.classList.add('hidden');
}, 500);
});
}
})();
//]]>
</script>
<!-- SquidUioveX Loader by SAM (UioveX) - End -->
Customization Options
You can easily customize the primary color of the preloader to match your brand. Simply find and change the color code in the CSS you added.
| Variable Name | Description | Default Value |
|---|---|---|
--squid-primary-color |
Changes the color of the shapes and their glow effect. | #007BFF (Blue) |
--squid-primary-dark-theme |
Changes the color of the shapes for Dark Mode users. | #58a6ff (Lighter Blue) |
Conclusion & We Need Your Feedback!
We believe the SquidUioveX Preloader is a fantastic addition to any Blogger site, enhancing user experience with a modern and fluid animation. It's simple, lightweight, and incredibly stylish.
We are constantly working to improve our tools. What other features would you like to see in this preloader? Do you have an idea for another amazing widget? Let us know in the comments below! Your feedback helps us create better tools for the entire Blogger community.
