body {
  padding: 0;
  margin: 0;

  background-color: #f7f7f7;
  overflow: hidden;
}

.loading-mask {
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.tachometer {
  width: 300px;
  height: 150px;

  border: solid 3px #333333;
  border-radius: 150px 150px 0 0;
  overflow: hidden;

  position: relative;
}
.tachometer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 150px);

  height: 150px;
  width: 300px;

  background-color: #ff002a;
  border: solid 1px #ff002a;
  border-radius: 150px 150px 0 0;

  transform-origin: bottom center;
  transform: rotate(126deg);
}
.tachometer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 300px * 0.9 / 2);

  height: calc(150px - 16px);
  width: calc(300px * 0.9);

  background-color: #f7f7f7;
  border-radius: 150px 150px 0 0;
}

.dials {
  position: relative;
  width: 100%;
  height: 100%;
}
.dials::before {
  position: absolute;
  bottom: 0;
  left: calc(50% - 15px);

  content: "";
  width: 30px;
  height: 15px;

  background-color: #333333;
  border-radius: 15px 15px 0 0;
  z-index: 2;
}

.dials > div {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6px;
}
.dials > div::after {
  position: absolute;
  content: "";
  top: 0;

  width: 16px;
  height: 6px;
  background-color: #333333;
}
.dials > div:nth-child(1) { transform: rotate(18deg); }
.dials > div:nth-child(2) { transform: rotate(36deg); }
.dials > div:nth-child(3) { transform: rotate(54deg); }
.dials > div:nth-child(4) { transform: rotate(72deg); }
.dials > div:nth-child(5) { transform: rotate(90deg); }
.dials > div:nth-child(6) { transform: rotate(108deg); }
.dials > div:nth-child(7) { transform: rotate(126deg); }
.dials > div:nth-child(8) { transform: rotate(144deg); }
.dials > div:nth-child(9) { transform: rotate(162deg); }

.line {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 146px;
  height: 6px;
  background-color: orange;

  z-index: 1;
  transform-origin: right center;
}
