Confetti succesfull screen Tailwind

confetti-succesfull-screen-tailwind.markdown

Confetti succesfull screen Tailwind

A Pen by mertcanaltin on CodePen.

License.

index.html

<div class="w-60 h-24 border-2 rounded-md mx-auto mt-20">
  <div class="flex animate-pulse flex-row items-center h-full justify-center space-x-5">
    <div class="w-12 bg-gray-300 h-12 rounded-full ">
    </div>
        <div class="flex flex-col space-y-3">
        <div class="w-36 bg-gray-300 h-6 rounded-md ">
        </div>
        <div class="w-24 bg-gray-300 h-6 rounded-md ">
        </div>
    </div>
  </div>
</div>

script.js

let duration = 15 * 1000;
let animationEnd = Date.now() + duration;
let defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

let interval = setInterval(function() {
  let timeLeft = animationEnd - Date.now();

  if (timeLeft <= 0) {
    return clearInterval(interval);
  }

  let particleCount = 50 * (timeLeft / duration);
  // since particles fall down, start a bit higher than random
  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
}, 250);

scripts

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.1/tailwind.min.css" rel="stylesheet" />