Progressbar

Guten Abend, Ich habe mal eine Frage. Und zwar möchte ich gerne eine Progress bar erstellen. Mit dem <progress> möchte ich es nicht machen, da es in jedem Browser anders aussieht. Aktuell habe ich es so das ich es mit "width" Dort ist aber das Problem das ich gerne die den kompletten Balken auf 70 % Width machen. Dann möchte ich gerne "max" auf "4" habe. Heißt, wenn mein Value "4" ist, ist der Balken voll. Wenn meine Values aber auf "2" ist, soll der Balken nur bis zur Hälfe voll sein. Aber die komplette Width vom Balken soll auf 70% bleiben, da es bei 4% sonst ja relativ klein ist. Hat da jemand eine Idee?

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <style>
  
  body{
  width:100%;
}
.box{
  padding:5px;
  margin:10px;
  border:2px solid black;
}
.test1{
  height:22px;
  width:70%;
  margin:0 auto;
  border:2px solid blue;
}
.progress-bar{
  height:21px;
  background:green;
  color:red;
  font-weight:800;
  text-align:center;
  border:1px solid black;
  width:10px;
}
</style>
<body>
  <div class="box">Welche Zahl soll 100% des Balkens sein ?
<input id="zahl1" type="number" value="4"></div>
<div id="balkena" class="test1">
                                                             <div class="progress-bar progress-bar-danger" id="innen" role="progressbar"></div>
                                                            </div>
<div class="box"> Jetzt wähle eine neue Zahl die der Balken anzeigen soll
<input id="zahl2" type="number" value="2">
</div>
    <div id="out"></div>  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX