CircleProgress - Clock

Circle Progresses as clock

by tikosar

HTML

<script src="https://cdn.jsdelivr.net/gh/tigrr/[email protected]/dist/circle-progress.min.js"></script>
<div class="progress"></div>

CSS

.progress {
  position: relative;
  width: 300px;
}

.circle-progress {
  display: block;
  width: inherit;
  height: auto;
}

.circle-progress-text {
  font-family: sans-serif;
}

JavaScript

// 3600 seconds = 1 hour
const maxTime = 3600

const cp = new CircleProgress('.progress', {
	value: 0,
	max: maxTime,
	textFormat: (value) => {
  	const min = String(Math.floor(value / 60)).padStart(2, '0')
    const sec = String(value - min * 60).padStart(2, '0')
    return `${min}:${sec}`
	},
})

const startTime = Date.now()
const timer = setInterval(() => {
	const passedTime = Math.round((Date.now() - startTime) / 1000)
  cp.value = passedTime
  if (passedTime >= maxTime) {
    clearInterval(timer)
  }
})