css progress bar

by Jens Kühn

HTML

<h1>Gradienten Beispiel</h1>

CSS

body {
  --bg-gradient: linear-gradient(to right, green);
  background: var(--bg-gradient);
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 1s ease;
}

JavaScript

const colors = {
  1: 'green',
  2: 'orange',
  3: 'red'
};

let gradientParts = ['green'];

setInterval(() => {
  const random = Math.floor(Math.random() * 3) + 1;
  const newColor = colors[random];

  gradientParts.push(newColor);

  const gradientString = gradientParts.map((color, index) => {
    const percentage = (index + 1) * (100 / gradientParts.length);
    return `${color} ${percentage}%`;
  }).join(', ');

  const gradientCSS = `linear-gradient(to right, ${gradientString})`;

  document.body.style.setProperty('--bg-gradient', gradientCSS);
}, 1000);