Loading bar not centering

Question

I am making an animated wave loading page, and I wanted to switch my current loader with a loading bar, but my loading bar seems to stick at the top I cant put it in the middle of the screen, where the current loader is, I have tried using the centered class that the current loader has and when I use that class the loading bar disapears, how could I do it?

<title>Loading...</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">   
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
</head>

<script>

var i = 0;
var txt = '...';
var speed = 250;

function letterbyletter() {
  if (i < txt.length) {
    document.getElementById("lbl").innerHTML += txt.charAt(i);
    i++;
    setTimeout(letterbyletter, speed);
    
  }
    
}
    
var o = 0;
function move() {
  if (o == 0) {
    o = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        o = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

</script>

<body onload="letterbyletter(); move()">

<div class="waveWrapper waveAnimation">
    
    <div id="myProgress">
        <div id="myBar"></div>
    </div>
    
    <div class="centered"><div class="loader"></div></div>
    <div class="centered" style="padding-top: 10%"><h4>A carregar as suas mensagens</h4><h4 id="lbl"></h4></div>
    
  <div class="waveWrapperInner bgMiddle">
    <div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
  </div>
    
  <div class="waveWrapperInner bgBottom">
    <div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
  </div>
</div>
    
    
    
</body>

body{
    background-color: #076585;
    font-family: 'Lato', sans-serif !important;
}

.loader {
  border: 8px solid #fff;
  border-radius: 80%;
  border-top: 8px solid #076585;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite; 
  animation: spin 2s linear infinite;  
}

#myProgress {
  width: 100%;
  background-color: #fff;
}

#myBar {
  width: 1%;
  height: 5px;
  background-color: #000000;
}

h4{
    position: relative;
    display: inline-block;
    font-weight: 2000;
    font-size: 15px;
}

.centered{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
}

.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(0deg, hsla(195, 90%, 27%, 1) 0%, hsla(0, 0%, 100%, 1) 100%, hsla(0, 0%, 100%, 1) 100%);
}

.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}

.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}

.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}

i cant see anything with the code neither the loader nor the bar will you add the real code — Harkal, Oct 10 '20 at 21:23

score 1 · Accepted Answer · answered Oct 10 '20 at 21:33

1

Your class centered works for me. You can add it into your div #myProgress but you have to add margin auto to center your bar inside that div. This works when you need to center a display block element inside another display block element.

<div id="myProgress" class="centered">
    <div id="myBar"></div>
</div>

#myBar {
    width: 10%;
    height: 5px;
    background-color: #000000;
    margin: 0 auto;
}

answered Oct 10 '20 at 21:33

Filipe

537
3
10

Thx i was doing this :
– Miguel Ferreira Oct 10 '20 at 21:38

Loading bar not centering

1 Answers1