Back

Crafting a Playful Spinning Dice Loader

Learn how to create a dynamic, interactive spinning dice loader that adds a playful twist to waiting times with tactile motion via CSS transformations.

HTML

In this section, we construct the basic structure for our spinning dice loader using semantic HTML. We create a container to hold our dice element, ensuring it serves its purpose as a loader.


  <div class="dice-container">
    <div class="dice" aria-label="Loading spinner in the shape of a spinning dice"></div>
  </div>

Javascript

The Javascript part manages the rotation of the dice by gradually increasing its rotation angle. We use the setInterval function to apply a transition every 800 milliseconds, creating the illusion of a spinning dice.


  function initDiceLoader() {
      const dice = document.querySelector('.dice');
      let rotation = 0;
      setInterval(() => {
          rotation += 90;
          dice.style.transform = `rotate(${rotation}deg)`;
      }, 800);
  }
  document.addEventListener('DOMContentLoaded', initDiceLoader);

CSS

The CSS styling embraces the modern aesthetic of glassmorphism. The .dice class includes a soft and elevated appearance through gradients and shadows, with smooth animation transitions for a dynamic spin.


  .dice {
      width: 100px;
      height: 100px;
      background: linear-gradient(145deg, #f0f0f0, #cacaca);
      border-radius: 12px;
      box-shadow: 6px 6px 12px #c2c2c2, -6px -6px 12px #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }

  .dice:after {
      content: "\2680";
      color: #333;
  }

  @media (prefers-reduced-motion: reduce) {
      .dice {
          transition: none;
      }
  }

The styling and interactivity elements ensure that the dice loader is not only functional but also visually appealing, merging the fun of tactile motion with modern web aesthetics. And thus, we've crafted an engaging loader that transforms wait times into an enjoyable moment, illustrating the potential of playful design in enhancing user experience.

Whole code

<div class="dice-container">
  <div class="dice" aria-label="Loading spinner in the shape of a spinning dice"></div>
</div>


<script>
function initDiceLoader() {
  const dice = document.querySelector('.dice');
  let rotation = 0;
  setInterval(() => {
    rotation += 90;
    dice.style.transform = `rotate(${rotation}deg)`;
  }, 800);
}
document.addEventListener('DOMContentLoaded', initDiceLoader);
</script>

<style>
.dice-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.dice {
  width: 100px;
  height: 100px;
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
  border-radius: 12px;
  box-shadow: 6px 6px 12px #c2c2c2, -6px -6px 12px #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.dice:after {
  content: "\2680";
  color: #333;
}

@media (prefers-reduced-motion: reduce) {
  .dice {
    transition: none;
  }
}
</style>

Thank you for reading this article.

Crafting a Playful Spinning Dice Loader

HTML

Javascript

CSS

Whole code

Comments

More loaders

Similar

See also