Stats - All Examples

Discover 13 Stats examples available in Loopple

Stats 1

Component from Soft UI Design System Builder

<section class="py-5 draggable">
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-md-3">
        <h1 class="text-gradient text-primary">323</h1>
        <h5 class="mt-3">Projects</h5>
        <p>Of “high-performing” level are led by a certified project manager</p>
      </div>
      <div class="col-md-3">
        <h1 class="text-gradient text-primary">500+</h1>
        <h5 class="mt-3">Hours</h5>
        <p>That meets quality standards required by our users</p>
      </div>
      <div class="col-md-3">
        <h1 class="text-gradient text-primary">24/7</h1>
        <h5 class="mt-3">Support</h5>
        <p>Actively engage team members that finishes on time</p>
      </div>
    </div>
  </div>
</section>

Stats Simple

Component from Motion Landing Library React Builder

<div data-type='div' className="w-full draggable">
       <div data-type='div' className="container flex flex-col items-center gap-16 mx-auto my-32">
         <div data-type='div' className="grid w-full grid-cols-1 lg:grid-cols-4 md:grid-cols-2 gap-y-8">
           <div data-type='div' className="flex flex-col items-center">
             <h3 data-type='h3' className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900">250+</h3>
              <p data-type='p' className="text-base font-medium leading-7 text-center text-dark-grey-600">Successful Projects</p>
            </div>
           <div data-type='div' className="flex flex-col items-center">
             <h3 data-type='h3' className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900">$12m</h3>
              <p data-type='p' className="text-base font-medium leading-7 text-center text-dark-grey-600">Annual Revenue Growth</p>
            </div>
           <div data-type='div' className="flex flex-col items-center">
             <h3 data-type='h3' className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900">2.6k+</h3>
              <p data-type='p' className="text-base font-medium leading-7 text-center text-dark-grey-600">Global Partners</p>
            </div>
           <div data-type='div' className="flex flex-col items-center">
             <h3 data-type='h3' className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900">18k+</h3>
              <p data-type='p' className="text-base font-medium leading-7 text-center text-dark-grey-600">Daily Website Visitors</p>
            </div>
          </div>
        </div>
      </div>

Requires JavaScript

Stats 1

Component from Motion Landing Library Builder

<div class="w-full draggable">
    <div class="container flex flex-col items-center gap-16 mx-auto my-32">
      <div class="grid w-full grid-cols-1 lg:grid-cols-4 md:grid-cols-2 gap-y-8">
        <div class="flex flex-col items-center">
          <h3 class="text-5xl font-extrabold leading-tight text-center text-dark-grey-900 font-display"><span id="countto1" countTo="250"></span>+</h3>
          <p class="text-base font-medium leading-7 text-center text-dark-grey-600">Successful Projects</p>
        </div>
        <div class="flex flex-col items-center">
          <h3 class="text-5xl font-extrabold leading-tight text-center text-dark-grey-900 font-display">$<span id="countto2" countTo="12"></span>m</h3>
          <p class="text-base font-medium leading-7 text-center text-dark-grey-600">Annual Revenue Growth</p>
        </div>
        <div class="flex flex-col items-center">
          <h3 class="text-5xl font-extrabold leading-tight text-center text-dark-grey-900 font-display"><span id="countto3" countTo="2600" data-decimal="1"></span>k+</h3>
          <p class="text-base font-medium leading-7 text-center text-dark-grey-600">Global Partners</p>
        </div>
        <div class="flex flex-col items-center">
          <h3 class="text-5xl font-extrabold leading-tight text-center text-dark-grey-900 font-display"><span id="countto4" countTo="18000"></span>+</h3>
          <p class="text-base font-medium leading-7 text-center text-dark-grey-600">Daily Website Visitors</p>
        </div>
      </div>
    </div>
  </div>

<script>
let numbers = document.querySelectorAll("[countTo]");

  numbers.forEach((number) => {
    let ID = number.getAttribute("id");
    let value = number.getAttribute("countTo");
    let countUp = new CountUp(ID, value);

    if (number.hasAttribute("data-decimal")) {
      const options = {
          decimalPlaces: 1,
        };
      countUp = new CountUp(ID, 2.8, options);
    } else {
      countUp = new CountUp(ID, value);
    }

    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
      number.innerHTML = value;
    }
  });
</script>