body {
  font-family: Arial, Helvetica, sans-serif;
}

:root {
  /* Circular Progress */
  --progress-bar-size: 80px;
  --progress-path: 10px;

  /* Square Progress */
  --square-progress-bar-size: 60px;
  --square-progress-path: 10px;
}

.circular-progress .progress {
  width: var(--progress-bar-size);
  height: var(--progress-bar-size);
}

.circular-progress .progress div {
  width: calc(var(--progress-bar-size) - var(--square-progress-path));
  height: calc(var(--progress-bar-size) - var(--square-progress-path));
}

.square-progress .progress {
  width: var(--square-progress-bar-size);
  height: var(--square-progress-bar-size);
}

.square-progress .progress div {
  width: calc(var(--square-progress-bar-size) - var(--square-progress-path));
  height: calc(var(--square-progress-bar-size) - var(--square-progress-path));
}