Soccer Preloader: Animated Loading Screen for Sports Websites
Introduction
A well-designed loading screen enhances user engagement and improves website performance. If you run a sports-related website, adding a Soccer Preloader can create an immersive experience while reducing bounce rates. This blog explores the features, benefits, and implementation of a dynamic soccer ball animation preloader for your website.
Table of Contents
What is a Soccer Preloader?
A Soccer Preloader is an animated loading screen featuring a rotating soccer ball, ideal for football-themed websites. It keeps visitors engaged while content loads in the background, enhancing user experience and website aesthetics.
Features of the Soccer Preloader
⚽ Smooth Soccer Ball Animation – Creates a dynamic and interactive feel.
? Customizable Background – Features a gradient blue and gold theme for a professional touch.
? Fully Responsive – Works seamlessly on mobile, tablet, and desktop devices.
? Lightweight Code – Built with optimized HTML, CSS, and JavaScript for fast loading.
? Easy Integration – Simple copy-paste setup for quick implementation.
? Customizable Design – Modify colors, animation speed, and styles to match branding.
Why Use an Animated Preloader?
1. Improves User Engagement
A visually appealing preloader retains visitors by keeping them entertained during page load.
2. Enhances Brand Identity
A customized soccer animation aligns with sports websites, reinforcing brand consistency.
3. Optimized for Speed
The preloader is lightweight and does not significantly impact website loading times.
4. Reduces Bounce Rate
By keeping visitors engaged, preloaders prevent users from leaving before the content loads.
How to Implement the Soccer Preloader
Step 1: Add the HTML Code
Step 2: Add CSS for Styling
Step 3: Add JavaScript for Smooth Transitions
SEO Benefits of Using a Preloader
? Improves User Experience: Reduces frustration from slow-loading pages.
? Enhances Site Retention: Keeps users engaged during page load.
? Boosts Page Ranking: Lower bounce rates can positively impact SEO rankings.
? Optimized for Mobile: Ensures seamless performance on all devices.
Frequently Asked Questions (FAQ)
Q: Will the Soccer Preloader slow down my website?
No, the preloader is lightweight and optimized to run smoothly without affecting page speed.
Q: Can I customize the soccer animation?
Yes! You can change the animation speed, colors, and background to match your website's branding.
Q: How do I remove the preloader after the page loads?
The included JavaScript ensures the preloader disappears once the page is fully loaded.
HTML Code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Soccer Preloader</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="background-animation"></div>
<svg class="pl" viewBox="0 0 56 56" width="56px" height="56px" role="img" aria-label="Soccer ball">
<clipPath id="ball-clip">
<circle r="8" />
</clipPath>
<defs>
<path id="hex" d="M 0 -9.196 L 8 -4.577 L 8 4.661 L 0 9.28 L -8 4.661 L -8 -4.577 Z" />
<g id="hex-chunk" fill="none" stroke="hsl(var(--hue),10%,10%)" stroke-width="0.5">
<use href="#hex" fill="hsl(var(--hue),10%,10%)" />
<use href="#hex" transform="translate(16,0)"/>
<use href="#hex" transform="rotate(60) translate(16,0)"/>
</g>
<g id="hex-pattern" transform="scale(0.333)">
<use href="#hex-chunk" />
<use href="#hex-chunk" transform="rotate(30) translate(0,48) rotate(-30)" />
<!-- use 16 * (Math.sqrt(3) / 2) * 2 for these y-translations -->
<use href="#hex-chunk" transform="rotate(-180) translate(0,27.7) rotate(180)" />
<use href="#hex-chunk" transform="rotate(-120) translate(0,27.7) rotate(120)" />
<use href="#hex-chunk" transform="rotate(-60) translate(0,27.7) rotate(60)" />
<use href="#hex-chunk" transform="translate(0,27.7)" />
<use href="#hex-chunk" transform="rotate(60) translate(0,27.7) rotate(-60)" />
<use href="#hex-chunk" transform="rotate(120) translate(0,27.7) rotate(-120)" />
</g>
<g id="ball-texture" transform="translate(0,-3.5)">
<use href="#hex-pattern" transform="translate(-48,0)" />
<use href="#hex-pattern" transform="translate(-32,0)" />
<use href="#hex-pattern" transform="translate(-16,0)" />
<use href="#hex-pattern" transform="translate(0,0)" />
<use href="#hex-pattern" transform="translate(16,0)" />
</g>
</defs>
<filter id="ball-shadow-inside">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<filter id="ball-shadow-outside">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<g transform="translate(28,28)">
<g class="pl__stripe-dot-group" fill="var(--red)">
<circle class="pl__stripe-dot" transform="rotate(32) translate(-18.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(87) translate(-18.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(103) translate(-18.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(138) translate(-18.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(228) translate(-18.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(243) translate(-18.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(328) translate(-18.25,0)" />
</g>
<g class="pl__stripe-dot-group" fill="var(--white)">
<circle class="pl__stripe-dot" transform="rotate(41) translate(-15.75,0)" />
<circle class="pl__stripe-dot" transform="rotate(77) translate(-15.75,0)" />
<circle class="pl__stripe-dot" transform="rotate(92) translate(-15.75,0)" />
<circle class="pl__stripe-dot" transform="rotate(146) translate(-15.75,0)" />
<circle class="pl__stripe-dot" transform="rotate(175) translate(-15.75,0)" />
<circle class="pl__stripe-dot" transform="rotate(293) translate(-15.75,0)" />
<circle class="pl__stripe-dot" transform="rotate(314) translate(-15.75,0)" />
<circle class="pl__stripe-dot" transform="rotate(340) translate(-15.75,0)" />
</g>
<g class="pl__stripe-dot-group" fill="var(--blue)">
<circle class="pl__stripe-dot" transform="rotate(20) translate(-13.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(55) translate(-13.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(77) translate(-13.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(106) translate(-13.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(128) translate(-13.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(174) translate(-13.25,0)" />
<circle class="pl__stripe-dot" transform="rotate(279) translate(-13.25,0)" />
</g>
<g fill="none" stroke-linecap="round" stroke-width="2.5" transform="rotate(-90)">
<g class="pl__stripe-rotate">
<circle class="pl__stripe pl__stripe--1" r="18.25" stroke="var(--red)" stroke-dasharray="114.7 114.7" />
</g>
<g class="pl__stripe-rotate">
<circle class="pl__stripe pl__stripe--2" r="15.75" stroke="var(--white)" stroke-dasharray="106.8 106.8" />
</g>
<g class="pl__stripe-rotate">
<circle class="pl__stripe pl__stripe--3" r="13.25" stroke="var(--blue)" stroke-dasharray="99 99" />
</g>
</g>
<g class="pl__ball" transform="translate(0,-15.75)">
<circle class="pl__ball-shadow" filter="url(#ball-shadow-outside)" fill="hsla(var(--hue),10%,10%,0.5)" r="8" cx="1" cy="1" />
<circle fill="var(--white)" r="8" />
<g clip-path="url(#ball-clip)">
<use class="pl__ball-texture" href="#ball-texture" />
</g>
<circle class="pl__ball-shadow" clip-path="url(#ball-clip)" filter="url(#ball-shadow-inside)" fill="none" stroke="hsla(var(--hue),10%,10%,0.3)" stroke-width="5" r="12" cx="-4" cy="-4" />
</g>
</g>
</svg>
</body>
</html>CSS Code
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 210;
--bg: hsl(var(--hue),10%,85%);
--fg: hsl(var(--hue),10%,15%);
--red: hsl(344,75%,40%);
--white: hsl(0,0%,100%);
--blue: hsl(213,81%,21%);
--trans-dur: 0.3s;
font-size: clamp(1rem,0.95rem + 0.25vw,1.25rem);
}
body {
background: linear-gradient(to right, #000, #001f3f, #b8860b);
color: gold;
display: flex;
font: 1em/1.5 sans-serif;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur);
overflow-x: hidden;
}
.pl {
--dur: 3s;
display: block;
margin: auto;
width: 14em;
height: auto;
}
.pl__ball,
.pl__ball-shadow,
.pl__ball-texture,
.pl__stripe,
.pl__stripe-dot,
.pl__stripe-rotate {
animation-duration: var(--dur);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.pl__ball {
animation-name: ball;
}
.pl__ball-shadow {
animation-name: ball-shadow;
}
.pl__ball-texture {
animation-name: ball-texture;
}
.pl__stripe {
animation-name: stripe;
}
.pl__stripe--1 {
animation-name: stripe1;
}
.pl__stripe--2 {
animation-name: stripe2;
}
.pl__stripe--3 {
animation-name: stripe3;
}
.pl__stripe-dot {
animation-name: stripe-dot;
}
.pl__stripe-dot-group:nth-child(1) .pl__stripe-dot:nth-child(2) {
animation-delay: calc(var(--dur) * 0.2333333333);
}
.pl__stripe-dot-group:nth-child(1) .pl__stripe-dot:nth-child(3) {
animation-delay: calc(var(--dur) * 0.3);
}
.pl__stripe-dot-group:nth-child(1) .pl__stripe-dot:nth-child(4) {
animation-delay: calc(var(--dur) * 0.45);
}
.pl__stripe-dot-group:nth-child(1) .pl__stripe-dot:nth-child(5) {
animation-delay: calc(var(--dur) * 0.6833333333);
}
.pl__stripe-dot-group:nth-child(1) .pl__stripe-dot:nth-child(6) {
animation-delay: calc(var(--dur) * 0.7083333333);
}
.pl__stripe-dot-group:nth-child(1) .pl__stripe-dot:nth-child(7) {
animation-delay: calc(var(--dur) * 0.8416666667);
}
.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(1) {
animation-delay: calc(var(--dur) * 0.1083333333);
}
.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(2) {
animation-delay: calc(var(--dur) * 0.3333333333);
}
.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(3) {
animation-delay: calc(var(--dur) * 0.425);
}
.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(4) {
animation-delay: calc(var(--dur) * 0.6);
}
.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(5) {
animation-delay: calc(var(--dur) * 0.6583333333);
}
.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(6) {
animation-delay: calc(var(--dur) * 0.8083333333);
}
.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(7) {
animation-delay: calc(var(--dur) * 0.8416666667);
}
.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(8) {
animation-delay: calc(var(--dur) * 0.8916666667);
}
.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(1) {
animation-delay: calc(var(--dur) * -0.0666666667);
}
.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(2) {
animation-delay: calc(var(--dur) * 0.0583333333);
}
.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(3) {
animation-delay: calc(var(--dur) * 0.2083333333);
}
.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(4) {
animation-delay: calc(var(--dur) * 0.4);
}
.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(5) {
animation-delay: calc(var(--dur) * 0.5166666667);
}
.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(6) {
animation-delay: calc(var(--dur) * 0.625);
}
.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(7) {
animation-delay: calc(var(--dur) * 0.7666666667);
}
.pl__stripe-rotate {
animation-name: stripe-rotate;
}
/* Animation */
@keyframes ball {
from {
transform: rotate(0) translate(0, -15.75px);
}
to {
transform: rotate(1turn) translate(0, -15.75px);
}
}
@keyframes ball-shadow {
from {
transform: rotate(0);
}
to {
transform: rotate(-1turn);
}
}
@keyframes ball-texture {
from {
transform: translate(-16px, 0);
}
to {
transform: translate(48px, 0);
}
}
@keyframes stripe-dot {
from {
r: 1.25px;
}
16.67%, to {
r: 0;
}
}
@keyframes stripe-rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
@keyframes stripe1 {
from, to {
stroke-dashoffset: -95.7745;
}
50% {
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
stroke-dashoffset: -75.702;
}
}
@keyframes stripe2 {
from, to {
stroke-dashoffset: -80.1;
}
50% {
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
stroke-dashoffset: -53.4;
}
}
@keyframes stripe3 {
from, to {
stroke-dashoffset: -72.765;
}
50% {
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
stroke-dashoffset: -48.51;
}
}
.background-animation {
position: absolute;
width: 100vw;
height: 100vh;
}
.background-animation span {
position: absolute;
width: 10px;
height: 10px;
background: rgba(255, 215, 0, 0.7);
border-radius: 50%;
animation: moveAnimation linear infinite;
}
@keyframes moveAnimation {
0% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}
JavaScript Code
function createAnimation() {
const container = document.querySelector(".background-animation");
for (let i = 0; i < 50; i++) {
let span = document.createElement("span");
let size = Math.random() * 10 + 5;
span.style.left = Math.random() * 100 + "vw";
span.style.top = Math.random() * 100 + "vh";
span.style.width = size + "px";
span.style.height = size + "px";
span.style.animationDuration = Math.random() * 5 + 5 + "s";
container.appendChild(span);
setTimeout(() => {
span.remove();
}, (Math.random() * 5 + 5) * 1000);
}
}
setInterval(createAnimation, 3000);
PHP Code
NO Need
Conclusion
The Soccer Preloader is a stylish and functional addition to any sports website, improving user experience and engagement. Implementing a well-designed preloader can boost retention rates and enhance the overall aesthetics of your site.
? What do you think of animated preloaders? Let us know in the comments!
Author Bio
Aman is a web developer with 5+ years of experience in front-end and UI/UX design. Passionate about optimizing user experiences, he specializes in creating dynamic and engaging web animations.
? Share this post with your fellow developers and football fans!
