Question 44805 in Html Question posted in
Some basic documentation can be found here.

Progress bar with html

I am making a progress bar, I have a problem wanting to show the gray background. I can’t show it.

Could you please help me, I would also like not to use the current stylesheet and have my own that I can control.

<html>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
  <div class="w3-container">

    <h2>Progress Bar</h2>
    <div class="w3-light-grey" style="background-color:grey !important;">
      <div class="w3-orange" style="height:24px;width:15%;float:left;border-radius:25px;"></div>
      <div class="w3-orange" style="height:24px;width:15%;float:left;border-radius:25px;"></div>
    </div>
    <br>
    <div style="float:left">
      <p>Good!</p>
    </div>
    <div style="float: right;">
      <p>Step 2 of 7</p>
    </div>
  </div>
</body>

this is the design i want to get

Tags:

2

Answers


  1. 0

    You need to set the height of the progress bar as you did with the inner orange bars. Without it (or any content inside the div), the height is set to 0 and is invisible.

    <html>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
  <div class="w3-container">

    <h2>Progress Bar</h2>
    <div class="w3-light-grey" style="color:grey !important; height: 24px;">
      <div class="w3-orange" style="height:24px;width:15%;float:left;border-radius:25px;">a</div>
      <div class="w3-orange" style="height:24px;width:15%;float:left;border-radius:25px;">a</div>
    </div>
    <br>
    <div style="float:left">
      <p>Good!</p>
    </div>
    <div style="float: right;">
      <p>Step 2 of 7</p>
    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    Use standard HTML unless you have a good reason not to. There is a <progress> element defined in the standard.

    The progress element represents the completion progress of a task. The
    progress is either indeterminate, indicating that progress is being
    made but that it is not clear how much more work remains to be done
    before the task is complete (e.g. because the task is waiting for a
    remote host to respond), or the progress is a number in the range zero
    to a maximum, giving the fraction of work that has so far been
    completed.

    <label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search