JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<body>
<h1>Lade einen Balken</h1>
<div id="ladebalken">
    <div id="fortschritt"><span id="prozente">
    
    </span></div>
</div>
<p style="text-align: center">
    <input type="button" onclick="ladenStoppen()" value=" Stoppen ">
    <input type="button" onclick="weiterLaden()"  value=" Weiter Laden ">
</p>

CSS

body {
  background-color:#ccc;
  }
h1   {
  text-align:center;
  }
 #ladebalken  {
  height:22px; 
  width:400px;
  border:1px solid red; 
  margin:auto;
  }
 #fortschritt {
  height:22px; 
  width:1px; 
  background-color:red;
  border:none;
  text-align:center;
  }

JavaScript

var pixel = 1;
 

function ladeBalken() {
    pixel++;
 
    if (pixel <= 400) {
    if(pixel <= 160){
$('#fortschritt').css('backgroundColor','red');    
    }else if(pixel <= 320){
 $('#fortschritt').css('backgroundColor','orange');   
    }else if(pixel <= 400){
 $('#fortschritt').css('backgroundColor','green');   
    }
   var prozenta=pixel/4;
   prozent=prozenta.toFixed(2);
 $('#prozente').html(prozent+'%')   
        lade = window.setTimeout("ladeBalken()", 90);
$('#fortschritt').css('width', pixel + "px");
    }
}
ladeBalken()
 

function ladenStoppen() {
    window.clearTimeout(lade);
}
function weiterLaden() {
    ladeBalken();
}