Let’s create a Crazy Stunt Loading Animation using HTML and CSS. 🚀 This fun project will feature an animated stunt effect where shapes or icons perform wild flips, spins, or jumps while the page is loading, keeping users entertained.
We’ll use:
- HTML to structure the loader container and stunt elements.
- CSS to add crazy rotations, flips, scaling, and smooth infinite animations.
This project is great for practicing CSS animations and adding a playful touch to your website. Perfect for portfolios, creative sites, or just for fun experiments. Let’s get started and make your loading screen exciting! 🎬✨
HTML :
This HTML creates a fullscreen loading animation using SVG. It draws a circular ring (sp__ring) with three animated “worms” (paths) moving around it. The <defs> section defines gradients and masks that add layered color effects. The worms are styled with different hues and masked so parts of them appear/disappear, creating a cool overlapping stunt effect. CSS animations (from your style.css) control their rotation and stroke-dashoffset, making the shapes look like they’re spinning and morphing continuously, giving the illusion of a complex, colorful loader.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Crazy Stunt Loading Animation | @coding.stella</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css"> </head> <body> <main> <svg class="sp" viewBox="0 0 128 128" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="grad1" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#000" /> <stop offset="40%" stop-color="#fff" /> <stop offset="100%" stop-color="#fff" /> </linearGradient> <linearGradient id="grad2" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#000" /> <stop offset="60%" stop-color="#000" /> <stop offset="100%" stop-color="#fff" /> </linearGradient> <mask id="mask1"> <rect x="0" y="0" width="128" height="128" fill="url(#grad1)" /> </mask> <mask id="mask2"> <rect x="0" y="0" width="128" height="128" fill="url(#grad2)" /> </mask> </defs> <g fill="none" stroke-linecap="round" stroke-width="16"> <circle class="sp__ring" r="56" cx="64" cy="64" stroke="#ddd" /> <g stroke="hsl(223,90%,50%)"> <path class="sp__worm1" d="M120,64c0,30.928-25.072,56-56,56S8,94.928,8,64" stroke="hsl(343,90%,50%)" stroke-dasharray="43.98 307.87" /> <g transform="translate(42,42)"> <g class="sp__worm2" transform="translate(-42,0)"> <path class="sp__worm2-1" d="M8,22c0-7.732,6.268-14,14-14s14,6.268,14,14" stroke-dasharray="43.98 175.92" /> </g> </g> </g> <g stroke="hsl(283,90%,50%)" mask="url(#mask1)"> <path class="sp__worm1" d="M120,64c0,30.928-25.072,56-56,56S8,94.928,8,64" stroke-dasharray="43.98 307.87" /> <g transform="translate(42,42)"> <g class="sp__worm2" transform="translate(-42,0)"> <path class="sp__worm2-1" d="M8,22c0-7.732,6.268-14,14-14s14,6.268,14,14" stroke-dasharray="43.98 175.92" /> </g> </g> </g> <g stroke="hsl(343,90%,50%)" mask="url(#mask2)"> <path class="sp__worm1" d="M120,64c0,30.928-25.072,56-56,56S8,94.928,8,64" stroke-dasharray="43.98 307.87" /> <g transform="translate(42,42)"> <g class="sp__worm2" transform="translate(-42,0)"> <path class="sp__worm2-1" d="M8,22c0-7.732,6.268-14,14-14s14,6.268,14,14" stroke-dasharray="43.98 175.92" /> </g> </g> </g> </g> </svg> </main> </body> </html>
CSS :
This CSS resets default styles, defines theme colors using CSS variables, and creates a responsive font size. The body is styled with a centered grid layout and smooth background transition. The .sp element (likely an SVG spinner) has a ring and animated “worms” that rotate and change stroke-dashoffset to create a moving circular loading effect. It also supports light/dark themes by switching colors automatically. The keyframe animations (worm1, worm2, worm2-1) control the rotation and stroke movements, making the spinner look dynamic and continuous.
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue), 90%, 95%);
--fg: hsl(var(--hue), 90%, 5%);
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
font: 1em/1.5 sans-serif;
height: 100vh;
display: grid;
place-items: center;
transition: background-color 0.3s;
}
main {
padding: 1.5em 0;
}
.sp {
display: block;
width: 8em;
height: 8em;
}
.sp__ring {
stroke: hsla(var(--hue), 90%, 5%, 0.1);
transition: stroke 0.3s;
}
.sp__worm1,
.sp__worm2,
.sp__worm2-1 {
animation: worm1 5s ease-in infinite;
}
.sp__worm1 {
transform-origin: 64px 64px;
}
.sp__worm2,
.sp__worm2-1 {
transform-origin: 22px 22px;
}
.sp__worm2 {
animation-name: worm2;
animation-timing-function: linear;
}
.sp__worm2-1 {
animation-name: worm2-1;
stroke-dashoffset: 175.92;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue), 90%, 5%);
--fg: hsl(var(--hue), 90%, 95%);
}
.sp__ring {
stroke: hsla(var(--hue), 90%, 95%, 0.1);
}
}
/* Animations */
@keyframes worm1 {
from,
to {
stroke-dashoffset: 0;
}
12.5% {
animation-timing-function: ease-out;
stroke-dashoffset: -175.91;
}
25% {
animation-timing-function: cubic-bezier(0, 0, 0.43, 1);
stroke-dashoffset: -307.88;
}
50% {
animation-timing-function: ease-in;
stroke-dashoffset: -483.8;
}
62.5% {
animation-timing-function: ease-out;
stroke-dashoffset: -307.88;
}
75% {
animation-timing-function: cubic-bezier(0, 0, 0.43, 1);
stroke-dashoffset: -175.91;
}
}
@keyframes worm2 {
from,
12.5%,
75%,
to {
transform: rotate(0) translate(-42px, 0);
}
25%,
62.5% {
transform: rotate(0.5turn) translate(-42px, 0);
}
}
@keyframes worm2-1 {
from {
stroke-dashoffset: 175.91;
transform: rotate(0);
}
12.5% {
animation-timing-function: cubic-bezier(0, 0, 0.42, 1);
stroke-dashoffset: 0;
transform: rotate(0);
}
25% {
animation-timing-function: linear;
stroke-dashoffset: 0;
transform: rotate(1.5turn);
}
37.5%,
50% {
stroke-dashoffset: -175.91;
transform: rotate(1.5turn);
}
62.5% {
animation-timing-function: cubic-bezier(0, 0, 0.42, 1);
stroke-dashoffset: 0;
transform: rotate(1.5turn);
}
75% {
animation-timing-function: linear;
stroke-dashoffset: 0;
transform: rotate(0);
}
87.5%,
to {
stroke-dashoffset: 175.92;
transform: rotate(0);
}
}In conclusion, the Crazy Stunt Loading Animation with HTML and CSS shows how simple code can create a fun and engaging preloader. With smooth animations and unique stunt effects, your website can keep visitors entertained while loading content. Keep experimenting with different styles to make it even more fun! 🎡🔥
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
