JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<body>
<h1>Lade einen Balken</h1>
<div id="ladebalken">
<span id="prozente">
    
    </span>
 

 <div id="fortschritt3"></div>
  <div id="fortschritt2"></div>
     <div id="fortschritt1"></div>
</div>
<p style="text-align: center">
 
    <input type="button" onclick="weiterLaden()"  value="schneller">
</p>

CSS

body {
  background-color:#ccc;
  }
h1   {
  text-align:center;
  }
 #ladebalken  {
  height:22px; 
  width:400px;
  border:1px solid red; 
  margin:auto;
  }
 #fortschritt1 {
   position:absolute;
   z-index:3;
   margin-top:-19px;
  height:24px; 
  width:403px; 
  background:green;
  border:none;
  text-align:center;
  }
 
   #fortschritt2 {
     position:absolute;
   z-index:2;  
   margin-top:-19px;
  height:24px; 
  width:402px; 
  background:orange;
  border:none;
  text-align:center;
  }
  
     #fortschritt3 {
         position:absolute;
   z-index:1;
   margin-top:-18px;
  height:22px; 
  width:401px; 
  background:red;
  border:none;
  text-align:center;
  }
  
  
  
  
  
  #prozente{
    position:relative;
    left:45%;
    z-index:4;
    text-align:center;
  }

JavaScript

var pixel = 400;
 var b=1;

function ladeBalken() {
    pixel--;
  
    if (pixel <= 0) {
    pixel=400;
    b++;
     window.clearTimeout(lade);
   }else if (pixel >= 1) {
$('#fortschritt'+b).css('width', pixel + "px");
    } 
    if(b<=3){
   var prozenta=pixel/4;
   prozent=prozenta.toFixed(2);
 $('#prozente').html(prozent+'%')   
var lade = window.setTimeout("ladeBalken()", 90);
}
   
}
ladeBalken()
 

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