JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<body>
<h1>Lade einen Balken</h1>
<div id="ladebalken">
<span id="prozente">
    
    </span>
    <div id="fortschritt"></div>
       <div id="fortschritt2"></div>
       <div id="fortschritt3"></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 {
   margin-top:-18px;
  height:22px; 
  width:1px; 
  background-color:red;
  border:none;
  text-align:center;
  }
  
   #fortschritt2 {
   margin-top:-22px;
   margin-left:160px;
  height:22px; 
  width:0px; 
  background-color:orange;
  border:none;
  text-align:center;
  }
  
     #fortschritt3 {
   margin-top:-22px;
   margin-left:320px;
  height:22px; 
  width:0px; 
  background-color:green;
  border:none;
  text-align:center;
  }
  
  
  
  
  
  #prozente{
    position:relative;
    left:45%;
    z-index:1;
    text-align:center;
  }

JavaScript

var pixel = 1;
 var b=1;

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

    }
}
ladeBalken()
 

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