Animated Circular Speedometer In Vanilla JavaScript

Preview:

Description:

A Vanilla JS & CSS powered animated circular speedometer (progress bar) designed to show the percentage completion of a task.

How to use it:

1. Create a container to hold the progress bar.

<div class="progress"></div>

2. The necessary CSS styles.

.progress {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.progress i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotate(calc(45deg + calc(calc(360deg / var(--tlt-br-cnt)) * var(--i))));
}
.progress i::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: hsla(0, 0%,100%, 12%);;
  width: 5px;
  height: 20px;
  border-radius: 999rem;
  transform: rotate(-45deg);
  transform-origin: top;
  opacity: 0;
  animation: barCreationAnimation 100ms ease forwards;
  animation-delay: calc(var(--i) * 15ms);
}
.progress .selected-demo::after {
  background: hsl(130, 100%, 50%);
  box-shadow: 0 0 1px hsl(130, 100%, 50%),
              0 0 3px hsl(130, 100%, 30%),
              0 0 4px hsl(130, 100%, 10%);
}

.percent-text {
  font-size: 3rem;
  animation: barCreationAnimation 500ms ease forwards;
  animation-delay: calc(var(--tlt-br-cnt) * 15ms / 2);
}
.text-demo{
  color: hsl(130, 100%, 50%);
  text-shadow: 0 0 1px hsl(130, 100%, 50%),
                  0 0 3px hsl(130, 100%, 30%),
                  0 0 4px hsl(130, 100%, 10%);
  opacity: 0;
}

3. The main JavaScript to generate a circular progress bar inside the container you just created.

const wrapper = document.querySelectorAll('.progress');
const barCount = 50; // number of bars
const percentDemo = 50 * 90/100; // 90%
for (let index = 0; index < barCount; index++) {
  const className = index < percentDemo ? 'selected-demo' : '';
  wrapper[0].innerHTML += `<i style="--i: ${index};" class="${className}"></i>`;
}
wrapper[0].innerHTML += `<p class="selected percent-text text-demo">90%</p>`