Js Increments Demo

Github

Counter

Code

          
          new jsIncrements({
            from: 0,
            to: 90,
            step: 2,
            duration: 3000,
            target: {
              selector: '#counter',
              type: 'text',
              percentage: false
            },
          }).start();

Progress Bar

Code

          
          new jsIncrements({
            from: 30,
            to: 70,
            step: 10,
            max: 100,
            duration: 3000,
            wait: 3000,
            targets: [
              {
                selector: '#progress-bar #bar',
                property: 'width',
                type: 'style',
                unit: '%',
                mode: 'performance'
              },
              {
                selector: '#progress-bar-counter',
                type: 'text',
                percentage: false
              }
            ],
          }).start();

Radial progress

Code

          
        new jsIncrements({
          from: 0,
          to: 90,
          step: 2,
          duration: 3000,
          wait: 2000,
          targets: [
            {
              selector: '#radial-progress',
              property: '--progress-percent',
              type: 'style',
              unit: null,
            },
            {
              selector: '#radial-progress text',
              type: 'text',
              percentage: true
            }
          ],
        }).start();