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>

Creating a Mesmerizing Origami Paper Spinner Loader

HTML

Javascript

CSS

Whole code

Comments

More loaders

Similar

See also