<div class="nl-p-8">
    <svg class="nl-c-stat nl-text-gray nl-text-xl" height="102" width="102" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 114 114" style="enable-background:new 0 0 102 102; --inner-stroke: currentColor; --outer-stroke: var(--nl-blue)" xml:space="preserve">
        <circle class="nl-c-stat_inner" stroke="var(--inner-stroke)" fill="transparent" stroke-width="1" cx="57" cy="57" r="49"></circle>
        <circle class="nl-c-stat_outer" stroke="var(--outer-stroke)" fill="transparent" stroke-width="10" cx="57" cy="57" r="49" data-percent="88"></circle>
        <text class="nl-c-stat_text nl-font-museo" dominant-baseline="central" x="25%" y="-50%" fill="currentColor">88</text>
    </svg>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
<script>
    (function() {
        let statOuter = document.querySelectorAll('.nl-c-stat_outer');
        // Bail if no stat outer found on page
        if (!statOuter.length) return;
        document.addEventListener('DOMContentLoaded', event => {
            statOuter.forEach(dial => {
                let percent = parseInt(dial.dataset.percent),
                    text = dial.nextElementSibling;
                gsap.to(dial, {
                    scrollTrigger: dial,
                    strokeDashoffset: getStrokeDashoffset(percent)
                });
                gsap.from(text, {
                    textContent: 0,
                    scrollTrigger: dial,
                    stagger: {
                        onUpdate: function() {
                            this.targets()[0].innerHTML = Math.ceil(this.targets()[0].textContent) + '%';
                        },
                    }
                });
            });
        });

        function getStrokeDashoffset(percent) {
            let min = -308;
            if (percent < 0) percent = 0;
            if (percent > 100) percent = 100;
            return min * percent / 100 + min;
        }
    })();
</script>
<div class="nl-p-8">
  <svg class="nl-c-stat nl-text-gray nl-text-xl" height="102" width="102" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 114 114" style="enable-background:new 0 0 102 102; --inner-stroke: currentColor; --outer-stroke: var(--nl-blue)" xml:space="preserve">
    <circle class="nl-c-stat_inner" stroke="var(--inner-stroke)"  fill="transparent" stroke-width="1" cx="57" cy="57" r="49"></circle>
    <circle class="nl-c-stat_outer" stroke="var(--outer-stroke)"  fill="transparent" stroke-width="10" cx="57" cy="57" r="49" data-percent="88"></circle>
    <text class="nl-c-stat_text nl-font-museo" dominant-baseline="central" x="25%" y="-50%" fill="currentColor">88</text>
  </svg>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
<script>
  (function() {
    let statOuter = document.querySelectorAll( '.nl-c-stat_outer' );

    // Bail if no stat outer found on page
    if( !statOuter.length ) return;
    
    document.addEventListener( 'DOMContentLoaded', event => {
      statOuter.forEach( dial => {
        let percent = parseInt( dial.dataset.percent ),
            text    = dial.nextElementSibling;

        gsap.to( dial, {
          scrollTrigger: dial,
          strokeDashoffset: getStrokeDashoffset( percent )
        });

        gsap.from(text, {
          textContent: 0,
          scrollTrigger: dial,
          stagger: {
            onUpdate: function() {
              this.targets()[0].innerHTML = Math.ceil(this.targets()[0].textContent) + '%';
            },
          }
        });
     
      });
    });

    function getStrokeDashoffset( percent ) {
      let min = -308;

      if( percent < 0 ) percent = 0;
      if( percent > 100 ) percent = 100; 

      return min * percent / 100 + min; 
    }
  })();
</script>
{
  "title": "Stat Counter"
}
  • Content:
    .nl-c-stat {
        transform: rotate(-90deg);
    }
    
    .nl-c-stat_outer {
        stroke-dasharray: 308;
        stroke-dashoffset: -308;
    }
    
    .nl-c-stat_text {
        transform: rotate(90deg);
    }
  • URL: /components/raw/stat-counter/_stat-counter.scss
  • Filesystem Path: src/components/03-components/stat-counter/_stat-counter.scss
  • Size: 175 Bytes
  • Handle: @stat-counter
  • Preview:
  • Filesystem Path: src/components/03-components/stat-counter/stat-counter.hbs

No notes defined.