.wrap
  #container
  .count-wrap
    .num 60
View Compiled
.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.count-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  .num {
    margin: 40px 0 0;
    font-size: 100px
  }
}
View Compiled
$(function () { 
  
  var $strTime = $('.num'),
      curTime = parseFloat($strTime.text()),
      numMax = curTime,
      numDiff = 0,
      timeSpan = 1000;

  var myChart = new Highcharts.Chart('container',{
    chart: {
      // どんなタイプのグラフを表示させるか
      type: 'pie',
      // タイマー処理
      events: {
        load: function() {
          var series = this.series[0];

          var setTimer = setInterval(function () {
            console.log(curTime);
            curTime--;
            numDiff++;
            $strTime.text(curTime);
            if (curTime <= 0) {
              clearInterval(setTimer);
            }
            series.setData([curTime, numDiff]);
          }, timeSpan);
        }
      },
    },
    title: {
      // グラフのタイトル
      text: 'Donut Sample with Timer Function'
    },
    plotOptions: {
      pie: {
        // 円グラフの内側のサイズ
        innerSize: '90%'
      }
    },
    // 表示させるデータ
    series: [
      {
        name: "count",
        dataLabels: {
          enabled: false,
        },
        data: [["remining", curTime], ["passage",numDiff]]
      }
    ],

  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://code.highcharts.com/highcharts.js