How to change location of a progress bar?

by

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