How to change location of a progress bar?

I created a progress bar for a game I’m making. But the bar is at the top left of the browser and I would like to move the bar elsewhere but I’m not sure how to do this.

<progress id="health" value="1000" max="1000"></progress>

2 thoughts on “How to change location of a progress bar?”

  1. You can do it with CSS position: absolute:

    #health {
        position: absolute;
        bottom: 0px; /* moves the progress bar to the bottom-right */
        right: 0px;
    }
    <progress id="health" value="1000" max="1000"></progress>
    Reply
  2. Use position:fixed and the CSS attributes top, left, right and bottom to position it like so:

    progress{
      position:fixed;
      top:40%;
      left:40%;
    }
    progress::before{
      content:"hey look im floating";
    }
    <progress id="health" value="1000" max="1000"></progress>
    Reply

Leave a Comment