#preloader {
  --preloader: 85px;

  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(#666, #333);
  color: #fff;
  font: bold 13px Roboto, sans-serif;
  overflow: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

#preloader::before {
  content: "";
  position: absolute;
  top: calc(50% - var(--preloader)/2 - 5px);
  left: 50%;
  width: 248px;
  height: 63px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAAA/CAYAAADNPAUHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhJJREFUeNrs3UFuwjAUBcDY4kg5kw/FmbiTKyRYtGoCVRPjb88sukLwcHiJDU2Saq0LMKbL/c+6rnuP6W0PkDrONnruVmrQMag9ZbvdbksONtBLKSXklEPusOV+dww+lXvzda/X627Bzd2Z/cgdJffm62flRkmGyF3fLbhyo9wxc9dXBVdulDt27rpVcOVGSXbcv5UOkrv+LLhyo9xjlPtbzuxzBuPuRBUcBqbgoOCAggMKDig4oODAlssRT1JKCfnm5Y5rhm13P92zi4I/wqSIAy53XC3H4Mgdyh9y//u/5kzRwRocUHBAwYE2LjO/+ce3lEee/pfkxhF8XK5OgoIrudwouJLLTYdr8LM/JClQWVLQkluTO4J/RrA7hDiSo+Cm63Kj4EouNwpuaSE3Cg4KDig4oOCAggMKDig4TCz6+eCp1e+0R1zhcoDcKHhbDa+sWeXGFB1QcCDmFH13fWlNCMHX4C/Wl9aEYIoOdHEEP+Eyvu9ynnWs3If9ctD4Mxc1tyM47Tgn3hQdUHBAwUHBAQUHFBxQcKBhwUPci6qUEnKQ5f5VqPufreu6ROxKjjLgz8ANz6OW+/zcSn7ujjnlCAOuJEPnjnon0xBdyb0HV5Ipciv5Sdsu9xxcSabKreQnbLvca3AlmTK3kh+87XKPwZVk6txKfuC2S7XW5wP2nqd2PGA16IaeNbfxaZjtS4ABAKJ04U5ThTiQAAAAAElFTkSuQmCC);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-panel {
  position: absolute;
  inset: auto 10px 10px;
  height: var(--preloader);
  padding: 35px 10px 10px;
  background: #222;
  border-radius: 5px;
  box-sizing: border-box;
}

.preloader-title,
#preloaderText {
  position: absolute;
  top: 10px;
  margin: 0;
  line-height: 1;
}

.preloader-title { left: 10px; }
#preloaderText { right: 10px; }

.preloader-bar {
  height: 100%;
  background: #111;
  border: 5px solid #111;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
}

#preloaderFill {
  width: 0;
  height: 100%;
  background: var(--g55-blue);
  transition: width .15s ease;
}

.preloader-title::after {
  content: "";
  animation: loading 1s steps(1) infinite;
}

@keyframes loading {
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}