Circle Frame Coundown

A simple counterdown in a circle

by phollome

HTML

<div id="icon">
  <div id="inner">
    ?
  </div>
</div>

CSS

#icon {
  width: 50vw;
  height: 50vw;
  border: 2vw solid white;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);  
}

#inner {
  font-family: 'Francois One', sans-serif;
  color: #fff;
  font-size: 20vw;
  position: relative;
  top: 50%;
  transform: translateY(-50%);  
}

JavaScript

let count;

const inner = document.getElementById('inner');

function startCountdown() {
	count = 5;
	inner.innerHTML = '?';
	const interval = setInterval(() => {
    inner.innerHTML = count;
    count -= 1;
    if (count < 0) {
      clearInterval(interval);
      setTimeout(startCountdown, 5000);
    }
  }, 1000);
}

startCountdown();

document.body.style.backgroundImage = `url(https://picsum.photos/${window.innerWidth}/${window.innerHeight})`;