Fancy Timer Demo

Countdown with warning

      var ft = new FancyTimer(
        document.getElementById('container'),
        {
          value: 70,
          warn: {
            secondsLeft: 60
          },
          onWarning: function() {
            console.log('WARNING!');
          }
        }
      );
      ft.start(-1);
    

Start/Revers Timer

      var options = {
        value: 0,
        onFinish: function() {
          startStopBtn.textContent = 'Start';
          startStopBtn.disabled = false;
        }
      };
      var ft = new FancyTimer(
        document.getElementById('container'),
        options
      );
      var startStopBtn = document.getElementById('startStopBtn');
      startStopBtn.addEventListener('click', function() {
        if (['Start', 'Resume'].includes(startStopBtn.textContent)) {
          options.reverseAnimation = false;
          ft.updateOptions(options);
          ft.start(1);
          startStopBtn.textContent = 'Revert';
        } else {
          options.reverseAnimation = true;
          ft.updateOptions(options);
          ft.start(-1);
          startStopBtn.disabled = true;
        }
      });
    

Time from the begining of this year (dark theme)

      var year = new Date().getFullYear();
      var options = {
        value: new Date(year + '-01-01'),
        captions: {
          days: 'Days',
          hours: 'Hours',
          minutes: 'Minutes',
          seconds: 'Seconds'
        },
        showDays: 3
      };
      var ft = new FancyTimer(
        document.getElementById('container'),
        options
      );
    

Time left to new year (light theme)

      var options = {
        value: new Date((year + 1) + '-01-01'),
        captions: {
          days: 'Dias',
          hours: 'Horas',
          minutes: 'Minutos',
          seconds: 'Segundos'
        },
        showDays: 3,
        reverseAnimation: true
      };
      var ft = new FancyTimer(
        document.getElementById('container'),
        options
      );