how to fix progress bar active before preloading page-CodePudding

it becase position:relative in.progress but i have to remain relative if not text in progress bar will change if you run my code you will see progress-bar appear before predowloading if i delete releative it will normal but i not want to delete if you know or have any idea please tell me thank you sorry for my english

$(window).on("load", function() {
  $(".loader-container").fadeOut(1000);
});

.loader-container {
  width: 100%;
  height: 100vh;
  background-color: black;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid;
  color: #3498db;
  border-radius: 50%;
  border-top-color: transparent;
  animation: loader 1.2s linear infinite;
}

@keyframes loader {
  25% {
    color: #2ecc71;
  }
  50% {
    color: #f1c40f;
  }
  75% {
    color: #e74c3c;
  }
  to {
    transform: rotate(360deg);
  }
}

.left {
  padding-right: 0;
  text-align: right;
}

.right {
  padding-left: 0;
}

.justify-content-center {
  margin-top: 20px;
}

.progress {
  margin-bottom: 0;
  color: black;
  text-align: center;
  position: relative;
}

.progress_text {
  position: absolute;
  left: 0;
  right: 0;
  color: #000000;
  z-index: 1;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div class="loader-container">
    <div class="loader"></div>
  </div>
  <span>Test</span>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    </div>
  </div>

</body>

</html>

CodePudding user response：

I added z-index: 1; rule to .loader-container.

$(window).on("load", function() {
  $(".loader-container").fadeOut(1000);
});

.loader-container {
  width: 100%;
  height: 100vh;
  background-color: black;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid;
  color: #3498db;
  border-radius: 50%;
  border-top-color: transparent;
  animation: loader 1.2s linear infinite;
}

@keyframes loader {
  25% {
    color: #2ecc71;
  }
  50% {
    color: #f1c40f;
  }
  75% {
    color: #e74c3c;
  }
  to {
    transform: rotate(360deg);
  }
}

.left {
  padding-right: 0;
  text-align: right;
}

.right {
  padding-left: 0;
}

.justify-content-center {
  margin-top: 20px;
}

.progress {
  margin-bottom: 0;
  color: black;
  text-align: center;
  position: relative;
}

.progress_text {
  position: absolute;
  left: 0;
  right: 0;
  color: #000000;
  z-index: 1;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div class="loader-container">
    <div class="loader"></div>
  </div>
  <span>Test</span>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    </div>
  </div>

</body>

</html>