#loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg,#fff,#f7ece8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity .8s ease;
}

.loader-content{
  text-align:center;
}

.plate{
  width:180px;
  height:180px;
  margin:auto;
  border-radius:50%;
  background:#fff;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:
      0 15px 40px rgba(0,0,0,.15),
      inset 0 0 0 8px #ececec,
      inset 0 0 0 16px #fafafa;
  animation: floatPlate 2.5s ease-in-out infinite;
}

.plate-inner{
  width:110px;
  height:110px;
  border-radius:50%;
  background:linear-gradient(145deg,#b91c1c,#7f1010);
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 8px 20px rgba(185,28,28,.4);
}

.plate-inner i{
  color:white;
  font-size:46px;
  animation:bounceIcon 1.8s infinite;
}

.steam{
  position:absolute;
  width:10px;
  height:40px;
  background:linear-gradient(to top,
  rgba(255,255,255,0),
  rgba(255,255,255,.8));
  border-radius:50px;
  filter:blur(2px);
  opacity:0;
}

.steam1{
  left:58px;
  top:10px;
  animation:steam 2s infinite;
}

.steam2{
  left:82px;
  top:0;
  animation:steam 2s .4s infinite;
}

.steam3{
  left:106px;
  top:8px;
  animation:steam 2s .8s infinite;
}

.steam4{
  left:128px;
  top:3px;
  animation:steam 2s 1.2s infinite;
}

.loader-title{
  margin-top:35px;
  color:#8b1d1d;
  font-size:2rem;
  font-weight:700;
  letter-spacing:1px;
}

.loading-text{
  color:#777;
  font-size:1rem;
  margin-top:5px;
  animation:textFade 1.5s infinite;
}

.loading-bar{
  width:260px;
  height:8px;
  background:#e5e5e5;
  margin:25px auto 0;
  border-radius:50px;
  overflow:hidden;
}

.loading-progress{
  height:100%;
  width:40%;
  border-radius:50px;
  background:linear-gradient(90deg,#ff9800,#b91c1c);
  animation:loading 1.6s infinite ease-in-out;
}

@keyframes steam{

  0%{
      opacity:0;
      transform:translateY(0) scale(.8);
  }

  30%{
      opacity:1;
  }

  100%{
      opacity:0;
      transform:translateY(-45px) scale(1.4);
  }

}

@keyframes bounceIcon{

  0%,100%{
      transform:translateY(0);
  }

  50%{
      transform:translateY(-5px);
  }

}

@keyframes floatPlate{

  0%,100%{
      transform:translateY(0px);
  }

  50%{
      transform:translateY(-8px);
  }

}

@keyframes textFade{

  0%,100%{
      opacity:1;
  }

  50%{
      opacity:.45;
  }

}

@keyframes loading{

  0%{
      transform:translateX(-120%);
  }

  100%{
      transform:translateX(420%);
  }

}