<!-- ============================================================
LOADER v7 — SVG + JavaScript version (Blogger/Blogspot safe)
Paste this ENTIRE block into a Blogger POST while in "HTML view".
Do NOT switch back and forth between Compose/HTML repeatedly —
each toggle re-runs Blogger's compiler and can strip <script> or
inline SVG <animate> tags. This version avoids SMIL (<animateTransform>)
entirely and rotates the gears with plain JavaScript + CSS transforms,
which Blogger's post compiler reliably preserves.
============================================================ -->
<div id="loaderV7" style="width:100%;max-width:1200px;margin:0 auto;">
<svg id="loaderV7Svg" width="100%" height="auto" viewBox="0 0 1200 300" xmlns="http://www.w3.org/2000/svg" style="display:block;">
<defs>
<linearGradient id="bgGradient7" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#d3d3d3"/>
<stop offset="100%" stop-color="#d3d3d3"/>
</linearGradient>
<linearGradient id="stripeGradient7" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1e90ff"/>
<stop offset="100%" stop-color="#1e90ff"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="1200" height="300" fill="url(#bgGradient7)"/>
<!-- Stripes top and bottom -->
<rect x="0" y="0" width="1200" height="14" fill="url(#stripeGradient7)"/>
<rect x="0" y="286" width="1200" height="14" fill="url(#stripeGradient7)"/>
<!-- Diagonal accent pattern -->
<g opacity="0.12">
<rect x="0" y="14" width="1200" height="10" fill="#1e90ff" transform="skewX(-20)"/>
</g>
<!-- Gear icon left -->
<g id="gearLeft7" transform="translate(120,150)" fill="#1e90ff" style="transform-origin:120px 150px;">
<circle cx="0" cy="0" r="34" fill="none" stroke="#1e90ff" stroke-width="8"/>
<circle cx="0" cy="0" r="10" fill="#1e90ff"/>
<rect x="-6" y="-52" width="12" height="20" rx="2"/>
<rect x="-6" y="32" width="12" height="20" rx="2"/>
<rect x="-52" y="-6" width="20" height="12" rx="2"/>
<rect x="32" y="-6" width="20" height="12" rx="2"/>
<rect x="-40" y="-40" width="14" height="20" rx="2" transform="rotate(45 -33 -30)"/>
<rect x="26" y="-40" width="14" height="20" rx="2" transform="rotate(-45 33 -30)"/>
<rect x="-40" y="20" width="14" height="20" rx="2" transform="rotate(-45 -33 30)"/>
<rect x="26" y="20" width="14" height="20" rx="2" transform="rotate(45 33 30)"/>
</g>
<!-- Main Text -->
<text x="620" y="140" font-family="Arial, Helvetica, sans-serif" font-size="64" font-weight="800" fill="#ffd700" text-anchor="middle" letter-spacing="4">
UNDER
</text>
<text x="620" y="210" font-family="Arial, Helvetica, sans-serif" font-size="64" font-weight="800" fill="#ffd700" text-anchor="middle" letter-spacing="4">
DEVELOPMENT
</text>
<!-- Gear icon right -->
<g id="gearRight7" transform="translate(1080,150)" fill="#1e90ff" style="transform-origin:1080px 150px;">
<circle cx="0" cy="0" r="34" fill="none" stroke="#1e90ff" stroke-width="8"/>
<circle cx="0" cy="0" r="10" fill="#1e90ff"/>
<rect x="-6" y="-52" width="12" height="20" rx="2"/>
<rect x="-6" y="32" width="12" height="20" rx="2"/>
<rect x="-52" y="-6" width="20" height="12" rx="2"/>
<rect x="32" y="-6" width="20" height="12" rx="2"/>
<rect x="-40" y="-40" width="14" height="20" rx="2" transform="rotate(45 -33 -30)"/>
<rect x="26" y="-40" width="14" height="20" rx="2" transform="rotate(-45 33 -30)"/>
<rect x="-40" y="20" width="14" height="20" rx="2" transform="rotate(-45 -33 30)"/>
<rect x="26" y="20" width="14" height="20" rx="2" transform="rotate(45 33 30)"/>
</g>
</svg>
</div>
<script type="text/javascript">
(function() {
var gearLeft = document.getElementById('gearLeft7');
var gearRight = document.getElementById('gearRight7');
if (!gearLeft || !gearRight) return;
var angle = 0;
var speed = 1.2; // degrees per frame, adjust to change spin speed
function spin() {
angle = (angle + speed) % 360;
gearLeft.setAttribute('transform', 'translate(120,150) rotate(' + angle + ')');
gearRight.setAttribute('transform', 'translate(1080,150) rotate(' + (-angle) + ')');
window.requestAnimationFrame(spin);
}
window.requestAnimationFrame(spin);
})();
</script>
Comments
Post a Comment