body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#020617;
  font-family:sans-serif;
  color:white;
  overflow:hidden;
}

/* container */
.loader-box{
  text-align:center;
}

/* text */
h1{
  font-size:22px;
  margin-bottom:20px;
  color:#22d3ee;
  letter-spacing:1px;
}

/* spinner */
.spinner{
  width:60px;
  height:60px;
  border:4px solid #1e293b;
  border-top:4px solid #22d3ee;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:auto;
}

/* progress bar */
.bar{
  width:220px;
  height:6px;
  background:#1e293b;
  border-radius:10px;
  margin-top:25px;
  overflow:hidden;
}

.fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#22d3ee,#3b82f6);
  animation:load 4s linear forwards;
}

/* percent */
.percent{
  margin-top:10px;
  font-size:14px;
  color:#94a3b8;
}

/* animasi */
@keyframes spin{
  to{transform:rotate(360deg)}
}

@keyframes load{
  from{width:0%}
  to{width:100%}
}