- Components
- Counter
Simple Counter
CodeHOURS
TICKETS
CUSTOMERS
<!-- hours -->
<div>
<div class="w-[70px] h-[70px] sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
<h1 class="text-primary text-xl sm:text-3xl text-center" id="counter1"></h1>
</div>
<h4 class="text-[#3b3f5c] text-xs sm:text-[15px] mt-4 text-center dark:text-white-dark font-semibold">HOURS</h4>
</div>
<!-- tickets -->
<div>
<div class="w-[70px] h-[70px] sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
<h1 class="text-primary text-xl sm:text-3xl text-center" id="counter2"></h1>
</div>
<h4 class="text-[#3b3f5c] text-xs sm:text-[15px] mt-4 text-center dark:text-white-dark font-semibold">TICKETS</h4>
</div>
<!-- customers -->
<div>
<div class="w-[70px] h-[70px] sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
<h1 class="text-primary text-xl sm:text-3xl text-center" id="counter3"></h1>
</div>
<h4 class="text-[#3b3f5c] text-xs sm:text-[15px] mt-4 text-center dark:text-white-dark font-semibold">CUSTOMERS</h4>
</div>
<!-- script -->
<script>
// hours
const counter1 = new countUp.CountUp("counter1", 710, {
startVal: 0,
duration: 7,
});
counter1.start();
// tickets
const counter2 = new countUp.CountUp("counter2", 915, {
startVal: 0,
duration: 7,
});
counter2.start();
// customers
const counter3 = new countUp.CountUp("counter3", 580, {
startVal: 0,
duration: 7,
});
counter3.start();
</script>
With Icon
CodeClients
Downloads
Awards
<!-- clients -->
<div>
<div class="w-[70px] h-[70px] sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
<h1 class="text-primary text-xl sm:text-3xl text-center" id="counter4"></h1>
</div>
<h4 class="text-[#3b3f5c] text-xs sm:text-[15px] mt-4 text-center dark:text-white-dark font-semibold">
<svg> ... </svg>
Clients
</h4>
</div>
<!-- downloads -->
<div>
<div class="w-[70px] h-[70px] sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
<h1 class="text-primary text-xl sm:text-3xl text-center" id="counter5"></h1>
</div>
<h4 class="text-[#3b3f5c] text-xs sm:text-[15px] mt-4 text-center dark:text-white-dark font-semibold">
<svg> ... </svg>
Downloads
</h4>
</div>
<!-- awards -->
<div>
<div class="w-[70px] h-[70px] sm:w-[100px] sm:h-[100px] shadow-[1px_2px_12px_0_rgba(31,45,61,0.10)] rounded-full border border-[#e0e6ed] dark:border-[#1b2e4b] flex justify-center flex-col">
<h1 class="text-primary text-xl sm:text-3xl text-center" id="counter6"></h1>
</div>
<h4 class="text-[#3b3f5c] text-xs sm:text-[15px] mt-4 text-center dark:text-white-dark font-semibold">
<svg> ... </svg>
Awards
</h4>
</div>
<!-- script -->
<script>
// clients
const counter4 = new countUp.CountUp("counter4", 105, {
startVal: 0,
duration: 7,
});
counter4.start();
// download
const counter5 = new countUp.CountUp("counter5", 300, {
startVal: 0,
duration: 7,
});
counter5.start();
// awards
const counter6 = new countUp.CountUp("counter6", 58, {
startVal: 0,
duration: 7,
});
counter6.start();
</script>
© . Miracle Digital All rights reserved.