#### Count up

##### Simple

Explore CountUp.js Official Website for additional examples.
$

0

Income

0

Projects

0

%

Achievement

       <div class="simple-counter">
      <div class="simple">
      <div>
        <span>$</span>
          <p class="counter" data-count="150">0</p>
        </div>
        <p><i class="ti ti-arrow-narrow-up text-success"></i>Income</p>
      </div>
      <div class="simple">
        <div class="counter" data-count="85">0</div>
        <p><i class="ti ti-arrow-narrow-down text-danger"></i>Projects</p>
      </div>
      <div class="simple">
         <div>
          <p class="counter" data-count="60">0</p>
          <span>%</span>
        </div>
        <p><i class="ti ti-arrow-narrow-up text-success"></i>Achievement</p>
      </div>
     </div>

##### Customized

You have the flexibility to modify CountUp by incorporating our extended Bootstrap classes.
$

0

Respected Companies

0

Analytical Reports

0

%

Protected Payments

      <div class="customized-counter mt-4">
      <div class="customized">
        <i class="ti ti-apps"></i>
        <div class="d-flex align-items-center">
        <span>$</span>
        <p class="counter f-w-500 f-s-30 text-dark" data-count="500">0</p>
      </div>
        <p>Respected Companies</p>
      </div>
      <div class="customized">
        <i class="ti ti-report-analytics"></i>
        <div class="counter" data-count="75">0</div>
        <p>Analytical Reports</p>
      </div>
      <div class="customized">
        <i class="ti ti-brand-paypal"></i>
        <div class="d-flex align-items-center">
        <p class="counter f-w-500 f-s-30 text-dark" data-count="40">0</p>
        <span>%</span>
      </div>
        <p>Protected Payments</p>
      </div>
     </div>

##### Update Data

Refer to CountUp.js's official documentation to understand the plugin API. The provided example demonstrates how to reset a CountUp instance with a new value and configuration to dynamically update the displayed value.
$

0

Income

0

Projects

0

%

Achievement

      <div class="simple-counter">
      <div class="simple">
          <div>
        <span>$</span>
          <p class="counter" data-count="150">0</p>
        </div>
        <p><i class="ti ti-arrow-narrow-up text-success"></i>Income</p>
      </div>
      <div class="simple">
        <div class="counter" data-count="85">0</div>
        <p><i class="ti ti-arrow-narrow-down text-danger"></i>Projects</p>
      </div>
      <div class="simple">
         <div>
          <p class="counter" data-count="60">0</p>
          <span>%</span>
        </div>
        <p><i class="ti ti-arrow-narrow-up text-success"></i>Achievement</p>
      </div>
       <div>
         <button class="btn btn-light-primary" id="startCounter">Update Data </button>
       </div>
     </div>

##### Under Tab Sections

Experience a demo featuring CountUp, triggered only when it enters the viewport within a tab container.
$

0

Income

0%

Projects

0

%

Achievement

0

Income

0

Projects

0

Achievement

0

Income

0

Projects

0

Achievement

             <div class="simple-counter">
            <ul class="nav nav-tabs app-tabs-primary" id="Basic" role="tablist">
              <li class="nav-item" role="presentation">
                <button class="nav-link active" id="one-tab" data-bs-toggle="tab"
                  data-bs-target="#tab-one" type="button" role="tab" aria-controls="tab-one"
                  aria-selected="true">Tab-1</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="two-tab" data-bs-toggle="tab" data-bs-target="#tab-two"
                  type="button" role="tab" aria-controls="tab-two" aria-selected="false">Tab-2</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="three-tab" data-bs-toggle="tab" data-bs-target="#tab-three"
                  type="button" role="tab" aria-controls="tab-three" aria-selected="false">Tab-3</button>
              </li>
            </ul>
            <div class="tab-content" id="BasicContent">
              <div class="tab-pane fade show active" id="tab-one" role="tabpanel"
                aria-labelledby="one-tab" tabindex="0">
                ...
              </div>
              <div class="tab-pane fade" id="tab-two" role="tabpanel" aria-labelledby="two-tab"
                tabindex="0">
                 ...
              </div>
              <div class="tab-pane fade" id="tab-three" role="tabpanel" aria-labelledby="three-tab"
                tabindex="0">
                 ...
              </div>
            </div>

##### Introduction

- CountUp.js is a self-reliant, lightweight JavaScript class, perfect for swiftly creating animations that present numerical data in an engaging manner. Refer to the Official Website and GitHub repository for additional insights.

##### Use

- The styling and script bundles for CountUp.js are distinct from our overarching bundle and need manual inclusion and initiation on associated pages.

    <script src="assets/js/countup.js"></script>

##### Initiation

- Including CountUp in your project involves adding the HTML attribute `` to the CountUp element, accompanied by the target counting value set using. For a comprehensive range of options, including loop parameters and more, please review the detailed choices below.
- You have the ability to programmatically control CountUp instances. To explore additional options for Smooth Scroll, refer to the official plugin site for comprehensive information.

##### Document Markup Guide

- Configuring specific settings in CountUp is achieved through HTML attributes. Below are references for each. For a full range of options, please review the official documentation.