.page-loader {
  height: 100vh;
  width: 100vw;
  z-index: 999;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 0;
}
.page-loader:before {
  position: absolute;
  content: "";
  width: calc(100% + 46px);
  height: calc(100% + 46px);
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.page-loader:after {
  content: "";
  z-index: 1;
  position: absolute;
  width: min(50px, 34%);
  height: 2px;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  -webkit-margin-before: -1px;
  -webkit-margin-start: max(-25px, -17%);
  background-color: rgb(var(--color-base-text));
  animation: preloading 1.2s infinite ease;
  translate: -50% -50%;
}