Loader center inside div in bootstrap 5

Manisha 0
Viewed 28

I have added loader in div like this

.main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100% !important;
}

.loading {
  width: 20px;
  height: 20px;
  transform: rotate(70deg);
}

.loading::before,
.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  animation: loading 2s linear infinite;
}

.loading::before {
  box-shadow: 60px 60px #fe2712, -60px -60px #ff033e;
}

.loading::after {
  box-shadow: 60px 60px #ffa700, -60px -60px #7f00ff;
  transform: translate(-50%, -50%) rotate(90deg);
}


/* Loading Css Ends */


/* Animation Start */

@keyframes loading {
  50% {
    width: 160px;
    height: 160px;
  }
}
<div class="mnh-500 mnw-500 mnh-350-sm mnw-350-sm radius-lg relative zi-3 text-box" id="loaders">
  <div class="main-container">
    <div class="loading"></div>
  </div>
</div>

I am trying to center vertical and horizontal from last one hour but unable to make it working. I am getting result like below image. I have tried to use class d-flex with loader class like

d-flex justify-content-center align-items-center

but same result I am using bootstrap 5, let me know if someone can help me for achieve my goal.

enter image description here

Thanks!

bootstrap-5 css html
1 Answers
  1. Add d-flex justify-content-center vh-100 to the element with an id loaders.
  2. Add d-flex align-items-center to the element with a class main-container.

See the snippet below.

.main-container {
  height: 100% !important;
}

.loading {
  width: 20px;
  height: 20px;
  transform: rotate(70deg);
}

.loading::before,
.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  animation: loading 2s linear infinite;
}

.loading::before {
  box-shadow: 60px 60px #fe2712, -60px -60px #ff033e;
}

.loading::after {
  box-shadow: 60px 60px #ffa700, -60px -60px #7f00ff;
  transform: translate(-50%, -50%) rotate(90deg);
}


/* Loading Css Ends */


/* Animation Start */

@keyframes loading {
  50% {
    width: 160px;
    height: 160px;
  }
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="mnh-500 mnw-500 mnh-350-sm mnw-350-sm radius-lg relative zi-3 text-box d-flex justify-content-center vh-100" id="loaders">
  <div class="main-container d-flex align-items-center">
    <div class="loading"></div>
  </div>
</div>

Cervus camelopardalis0
Related