Counters Up

Markup

<aside class="aside aside-counters section-content bg-white-1 py-large text-center">
  <div class="container">
    <div class="row justify-content-center gy-md-0 gy-4">
      <!-- counter -->
      <div class="aside-counters__wrapper-item col-md-4">
        <div 
          class="counter counter_circle js-counter" 
          data-arts-os-animation="true" 
          data-arts-os-animation-name="animateCounter" 
          data-arts-os-animation-params='{"prefix": "+", "start": 0, "target": 34, "suffix": "%", "duration": 2.4}'
        >
          <!-- animated number -->
          <div class="counter__number h1 js-counter__number">+34%</div>
          <!-- - animated number -->
          ...
        </div>
      </div>
      <!-- - counter -->
      ...
    </div>
  </div>
</aside>

Elements

• .js-counter – Counter wrapper which contains the counter initial setup.
• .js-counter__number – Animated counter element. The inner DOM contents will be updated during the animation progress.

Showcase

• 📄 013-portfolio-details-masthead-boxed-horizontal.html
• 📄 014-portfolio-details-masthead-boxed-horizontal.html
• 📄 018-portfolio-details-masthead-boxed-vertical.html
• 📄 019-portfolio-details-masthead-boxed-horizontal.html
• 📄 020-portfolio-details-masthead-fullwidth-horizontal.html
• 📄 023-portfolio-details-masthead-fullwidth-horizontal.html
• 📄 024-portfolio-details-masthead-boxed-vertical.html
• 📄 034-services.html
• 📄 035-about.html