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  id="loaders">
  <div >
    <div ></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.

Thanks!

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div  id="loaders">
  <div >
    <div ></div>
  </div>
</div>