How to start the bar in the middle of the screen?

Question

now the bar and the text starting at the top. almost at the most top. I want it to be in the middle of the screen.

I tried to add to the css file in body part this lines:

top: 50%;
transform: translateY(-50%);

but the bar itself and its text remains in the same position the map that is loading is changing position.

The full html code can be found in this link. in the html file i'm also loading the google map. https://pastebin.com/PNZdKPVW

Snippet

document.onreadystatechange = function(e) {
  if (document.readyState == "interactive") {
    var all = document.getElementsByTagName("*");
    for (var i = 0, max = all.length; i < max; i++) {
      set_ele(all[i]);
    }
  }
}

function check_element(ele) {
  var all = document.getElementsByTagName("*");
  var totalele = all.length;
  var per_inc = 100 / all.length;

  if ($(ele).on()) {
    var prog_width = per_inc + Number(document.getElementById("progress_width").value);
    document.getElementById("progress_width").value = prog_width;
    $("#bar1").animate({
      width: prog_width + "%"
    }, 10, function() {
      if (document.getElementById("bar1").style.width == "100%") {
        $(".progress").fadeOut("slow");
      }
    });
  } else {
    set_ele(ele);
  }
}

function set_ele(set_element) {
  check_element(set_element);
}

body {
  margin: 0px auto;
  padding: 0px;
  font-family: helvetica;
}

.progress {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #F2F2F2;
}

.bar {
  background-color: #819FF7;
  width: 0%;
  height: 5px;
  border-radius: 3px;
  margin-left: auto;
}

.percent {
  position: absolute;
  display: inline-block;
  top: 3px;
  left: 48%;
}

#wrapper {
  width: 995px;
  padding: 0px;
  margin: 0px auto;
  font-family: helvetica;
  text-align: center;
}

h1 {
  text-align: center;
  font-size: 35px;
  margin-top: 60px;
  color: #A9BCF5;
}

h1 p {
  text-align: center;
  margin: 0px;
  font-size: 18px;
  text-decoration: underline;
  color: grey;
}

<div class='progress' id="progress_div">
  <h1 id="loading-message">...טוען מפה</h1>
  <div class='bar' id='bar1'></div>
  <div class='percent' id='percent1'></div>
</div>
<input type="hidden" id="progress_width" value="0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 
<link href="loadbar.css" rel="stylesheet">
<script src="loadbar.js" type="text/javascript"></script>
-->

You should either embed the full HTML code as a snippet here, or link to a complete (CodeSandbox, JSFiddle, Plunker, etc...) solution. The former is preferred. — Mr. Polywhirl, Mar 07 '23 at 19:16
The visible part of the HTML document need to be between and . And your style tag needs to be inside the . See https://stackoverflow.com/questions/1303416/does-style-have-to-be-in-the-head-of-an-html-document — SioGabx, Mar 07 '23 at 19:17
@Yogi Yep but W3 specification is obsolete (see https://www.w3.org/html/). The the current HTML standard which can be found on WHATWG allow — SioGabx, Mar 07 '23 at 20:46

underflow · Accepted Answer · 2023-03-07T20:32:21.183

Replace the body and progress class in your code with the following rulesets:

body {
  margin: 0px auto;
  padding: 0px;
  font-family: helvetica;
  background-color: #f2f2f2;
}
.progress {
  position: fixed;
  left: 0px;
  width: 100%;
  z-index: 9999;
  position: absolute;
  top: 40vh;
}

Complete code to run here:

document.onreadystatechange = function (e) {
  if (document.readyState == "interactive") {
    var all = document.getElementsByTagName("*");
    for (var i = 0, max = all.length; i < max; i++) {
      set_ele(all[i]);
    }
  }
};

function check_element(ele) {
  var all = document.getElementsByTagName("*");
  var totalele = all.length;
  var per_inc = 100 / all.length;

  if ($(ele).on()) {
    var prog_width =
      per_inc + Number(document.getElementById("progress_width").value);
    document.getElementById("progress_width").value = prog_width;
    $("#bar1").animate(
      {
        width: prog_width + "%"
      },
      10,
      function () {
        if (document.getElementById("bar1").style.width == "100%") {
          $(".progress").fadeOut("slow");
        }
      }
    );
  } else {
    set_ele(ele);
  }
}

function set_ele(set_element) {
  check_element(set_element);
}

body {
  margin: 0px auto;
  padding: 0px;
  font-family: helvetica;
  background-color: #f2f2f2;
}
.progress {
  position: fixed;
  left: 0px;
  width: 100%;
  z-index: 9999;
  position: absolute;
  top: 40vh;
}
.bar {
  background-color: #819ff7;
  width: 0%;
  height: 5px;
  border-radius: 3px;
  margin-left: auto;
}
.percent {
  position: absolute;
  display: inline-block;
  top: 3px;
  left: 48%;
}
#wrapper {
  width: 995px;
  padding: 0px;
  margin: 0px auto;
  font-family: helvetica;
  text-align: center;
}
h1 {
  text-align: center;
  font-size: 35px;
  margin-top: 60px;
  color: #a9bcf5;
}
h1 p {
  text-align: center;
  margin: 0px;
  font-size: 18px;
  text-decoration: underline;
  color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='progress' id="progress_div">

  <h1 id="loading-message">...טוען מפה</h1>
  <div class='bar' id='bar1'></div>
  <div class='percent' id='percent1'></div>
</div>
<input type="hidden" id="progress_width" value="0">

this move only the bar to the center of the screen but the text of it still on the top. another problem is that this make the bar start again from the left side to the right. and in the css file of the bar i added this line to make it start from the right to the left direction but this two lines make it start from the left to the right again. margin-left: auto; — Shamen Raze, Mar 07 '23 at 19:37
after the edit I changed the body and progress now the map and the bar show at the same time. before and that what i want the bar was first and in the end the map was show. — Shamen Raze, Mar 07 '23 at 20:25
do not touch the `bar` class. Just body and `progress` class as shown in the answer — underflow, Mar 07 '23 at 20:28

How to start the bar in the middle of the screen?

1 Answers1

Complete code to run here: