Flash Deal with CountUp
A deal card with an animated savings count-up, via CountUp.js.
Requires Bootstrap 5, CountUp.js, SweetAlert2. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/countup.js@2.8.0/dist/countUp.umd.js"></script><script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script><div class="card border-0 shadow text-center text-white" style="max-width:300px;background:linear-gradient(135deg,#7b2ff7,#f107a3)"><div class="card-body"><div class="small text-uppercase opacity-75">Flash deal</div><div class="display-5 fw-bold"><span id="fdSave">0</span>% OFF</div><button class="btn btn-light btn-sm fw-semibold" id="fdBtn">Grab it</button></div></div>new countUp.CountUp("fdSave",60,{duration:1.5}).start();document.getElementById("fdBtn").onclick=function(){Swal.fire({toast:true,position:"top-end",icon:"success",title:"Deal claimed!",showConfirmButton:false,timer:1600})};Free to use.This component uses Bootstrap 5, CountUp.js, SweetAlert2 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.