Back
Creating a Mesmerizing Origami Paper Spinner Loader
Dive into intricate CSS designs that bring a delicate origami-inspired spinner to life, offering captivating visual feedback while content is loading.
HTML
This section focuses on creating a container and the core structure of our origami spinner. The elements form the fundamental building blocks which the CSS transforms into a fascinating animation.
<div class="origami-container">
<div class="origami-spinner" aria-label="Loading animation">
<div class="origami-crease"></div>
<div class="origami-crease"></div>
<div class="origami-crease"></div>
</div>
</div>
Javascript
Our minimal JavaScript snippet ensures accessibility for users who prefer reduced motion by querying system preferences and dynamically adjusting the animation based on their settings.
document.documentElement.style.setProperty('--reduced-motion', window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'none' : 'initial');
CSS
The CSS styles everything, simulating an origami paper spinner with a gentle folding and rotating motion. We apply animations to each creased element crafted to pivot around a central point.
.origami-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: transparent;
}
.origami-spinner {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
animation: spin var(--reduced-motion, 2s) linear infinite;
}
.origami-crease {
width: 50px;
height: 50px;
background: white;
position: absolute;
border-radius: 5px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
animation: unfold var(--reduced-motion, 2s) ease-in-out infinite;
}
.origami-crease:nth-child(1) { transform: rotate(0deg) translateX(-50px); }
.origami-crease:nth-child(2) { transform: rotate(120deg) translateX(-50px); }
.origami-crease:nth-child(3) { transform: rotate(240deg) translateX(-50px); }
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes unfold {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.5); }
}
This captivating origami spinner offers a delicate allure while maintaining its purpose. It not only delivers functionality but transforms loading times into a visually enchanting experience.Whole code
<div class="origami-container">
<div class="origami-spinner" aria-label="Loading animation">
<div class="origami-crease"></div>
<div class="origami-crease"></div>
<div class="origami-crease"></div>
</div>
</div>
<script>
document.documentElement.style.setProperty('--reduced-motion', window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'none' : 'initial');
</script>
<style>
.origami-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: transparent;
}
.origami-spinner {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
animation: spin var(--reduced-motion, 2s) linear infinite;
}
.origami-crease {
width: 50px;
height: 50px;
background: white;
position: absolute;
border-radius: 5px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
animation: unfold var(--reduced-motion, 2s) ease-in-out infinite;
}
.origami-crease:nth-child(1) { transform: rotate(0deg) translateX(-50px); }
.origami-crease:nth-child(2) { transform: rotate(120deg) translateX(-50px); }
.origami-crease:nth-child(3) { transform: rotate(240deg) translateX(-50px); }
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes unfold {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.5); }
}
</style>
Thank you for reading this article.
Comments