Back
Dive into the world of animated loaders with this kaleidoscope drum-inspired spinner that adds a rhythmic and colorful beat to your application's performance.
Welcome to this step-by-step tutorial where we'll create a unique and visually striking loader inspired by the rhythmic elegance of a drum—a kaleidoscope drum loader. This component infuses vibrant, animated color gradients that pulse rhythmically, offering both function and aesthetic delight. Let's journey through the process!
We'll begin by setting up the basic HTML structure. The loader comprises a simple <div> element that serves as our spinner or 'drum'. We'll maintain accessibility by using ARIA roles and providing a visually hidden text description.
<div class="drum-container">
<div aria-label="Loading, please wait" class="drum-spinner" role="alert">
<span class="visually-hidden">Loading...</span>
</div>
</div>
We use a <div> instead of a <img> so that we can dynamically control the visuals using CSS. The aria-label attribute ensures that screen readers can convey what's happening, making the spinner inclusive for visually impaired users.
The magic of our loader is driven by CSS. Let's delve into the styles that make it come alive with movement and color.
.drum-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
The .drum-container class ensures our spinner stays centered. We utilize Flexbox for seamless vertical and horizontal alignment.
.drum-spinner {
width: 80px;
height: 80px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
#ff5f6d 0%,
#ffc371 25%,
#4facfe 50%,
#00f2fe 75%,
#ff5f6d 100%
);
animation: spin 2s linear infinite, colorPulse 3s ease-in-out infinite alternate;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
outline: none;
border: none;
}
Here, the .drum-spinner adopts a circular shape with a conic gradient to emulate the look of a kaleidoscope. CSS animations spin and colorPulse handle the rotation and pulsing color change effects, respectively, adding dynamic flair.
To accommodate users who prefer reduced motion, we use JavaScript to check their system preferences and adjust animations accordingly.
document.addEventListener('DOMContentLoaded', function() {
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReducedMotion.matches) {
document.querySelector('.drum-spinner').style.animation = 'none';
}
});
This script disables the animations if the user’s system indicates a preference for reduced motion, ensuring our component maintains accessibility standards and user comfort.
By merging vibrant design and thoughtful accessibility practices, the kaleidoscope drum loader not only visually dazzle but is also robustly inclusive. Embrace the rhythm of creativity and user-centered design as you integrate this component into your projects.
<div class="drum-container">
<div aria-label="Loading, please wait" class="drum-spinner" role="alert">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReducedMotion.matches) {
document.querySelector('.drum-spinner').style.animation = 'none';
}
});
</script>
<style>
.drum-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.drum-spinner {
width: 80px;
height: 80px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
#ff5f6d 0%,
#ffc371 25%,
#4facfe 50%,
#00f2fe 75%,
#ff5f6d 100%
);
animation: spin 2s linear infinite, colorPulse 3s ease-in-out infinite alternate;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
outline: none;
border: none;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes colorPulse {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.5);
}
}
:focus-visible {
outline: 2px solid #ffc371;
outline-offset: 4px;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!