simple-circle-timer/dist/components/circle.css

Lightweight, easily implemented countdown timer with circular progress bar. Optional Play, Pause, and Reset buttons.

.circle {
  position: absolute;
  z-index: 6;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}

.inner {
  top: 50%;
  left: 50%;
  border-radius: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.wrap {
  position: relative;
  background: white;
  border-radius: 100%;
}

.time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-weight: 500;
}

.dot {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  transform-origin: 0% 50%;
}

.dot span{
  position: absolute;
  right: 0;
  border-radius: 100%;
}

.bar {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 100%;
}

.right {
  z-index: 3; 
  transform: rotate(180deg);
}

.progress {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 100%;
}

@keyframes left {
  100%{
    transform: rotate(180deg);
  }
}
@keyframes right {
  100%{
    transform: rotate(180deg);
  }
}
@keyframes dot{
  0% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(90deg);
    z-index: 4;
  }
  100% {
    transform: rotate(270deg);
    z-index: 4;
  }
}