Pure CSS top loading bar generator

example-progress.css

@keyframes progress-run {
  0% { transform: scaleX(0) }
  0.38% { transform: scaleX(0.04) }
  5.33% { transform: scaleX(0.07) }
  11.19% { transform: scaleX(0.11) }
  14.48% { transform: scaleX(0.15) }
  16.74% { transform: scaleX(0.19) }
  21.50% { transform: scaleX(0.22) }
  23.52% { transform: scaleX(0.26) }
  26.02% { transform: scaleX(0.30) }
  27.54% { transform: scaleX(0.33) }
  32.61% { transform: scaleX(0.37) }
  37.75% { transform: scaleX(0.41) }
  42.87% { transform: scaleX(0.44) }
  48.59% { transform: scaleX(0.48) }
  51.97% { transform: scaleX(0.52) }
  55.00% { transform: scaleX(0.56) }
  60.71% { transform: scaleX(0.59) }
  63.83% { transform: scaleX(0.63) }
  66.96% { transform: scaleX(0.67) }
  70.39% { transform: scaleX(0.70) }
  73.37% { transform: scaleX(0.74) }
  76.23% { transform: scaleX(0.78) }
  77.67% { transform: scaleX(0.81) }
  82.83% { transform: scaleX(0.85) }
  84.64% { transform: scaleX(0.89) }
  88.26% { transform: scaleX(0.93) }
  90.40% { transform: scaleX(0.96) }
  96.27% { transform: scaleX(1.00) }
}
.progress {
  --progress-color: teal;
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 9999;
  filter: drop-shadow(0 0 5px var(--progress-color));
  transition: opacity .15s;
  opacity: 0;
}
.progress::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--progress-color);
  transform-origin: 0 0;
}
.progress.progress-show {
  opacity: 1;
}
.progress.progress-show::before {
  animation: progress-run 60s;
}

example-progress.html

<link rel="stylesheet" href="example-progress.css">

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

<button onclick="progress.classList.toggle('progress-show')">Toggle</button>

generate.html

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

<button onclick="progress.classList.toggle('progress-show')">Toggle</button>

<pre id="out"></pre>

<script>
  let steps = [];
  let step = Math.random();
  while (step < 100) {
    steps.push(step);
    step = Math.min(100, step + Math.random() * 5 + 1);
  }
  let delta = 1 / steps.length;
  let scale = 0;
  let css = "@keyframes progress-run {\n";
  css += "  0% { transform: scaleX(0) }\n";
  for (let step of steps) {
    scale += delta;
    css +=
      "  " +
      step.toFixed(2) +
      "% { transform: scaleX(" +
      scale.toFixed(2) +
      ") }\n";
  }
  css += "}\n";
  css += ".progress {\n";
  css += "  --progress-color: teal;\n";
  css += "  pointer-events: none;\n";
  css += "  position: fixed;\n";
  css += "  left: 0;\n";
  css += "  top: 0;\n";
  css += "  right: 0;\n";
  css += "  z-index: 9999;\n";
  css += "  filter: drop-shadow(0 0 5px var(--progress-color));\n";
  css += "  transition: opacity .15s;\n";
  css += "  opacity: 0;\n";
  css += "}\n";
  css += ".progress::before {\n";
  css += "  content: '';\n";
  css += "  display: block;\n";
  css += "  width: 100%;\n";
  css += "  height: 2px;\n";
  css += "  background: var(--progress-color);\n";
  css += "  transform-origin: 0 0;\n";
  css += "}\n";
  css += ".progress.progress-show {\n";
  css += "  opacity: 1;\n";
  css += "}\n";
  css += ".progress.progress-show::before {\n";
  css += "  animation: progress-run 60s;\n";
  css += "}\n";
  out.textContent = css;
  document.body.appendChild(
    Object.assign(document.createElement("style"), { textContent: css })
  );
</script>