Skip to content

Instantly share code, notes, and snippets.

@Benhawkins18

Benhawkins18/confetti-succesfull-screen-tailwind.markdown

Created December 22, 2022 19:56
Show Gist options
  • Save Benhawkins18/898cb83207d330cf93f40032e4fa53cd to your computer and use it in GitHub Desktop.
Save Benhawkins18/898cb83207d330cf93f40032e4fa53cd to your computer and use it in GitHub Desktop.
Download ZIP
Confetti succesfull screen Tailwind
Raw
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>
Raw
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);
Raw
scripts
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.1/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment