:root {
  --item-width: 10px;
  --item-height: 1px;
  --color: #000000;
}

.loading-area {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  transform: rotate(210deg);
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 57%;
  transform: translate(-50%, -50%);
}
.loading-area > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--item-width);
  height: var(--item-height);
}
.loading-area > *:nth-of-type(1) {
  animation: background 1s ease 0.025s infinite;
  transform: rotate(0deg) translate(30px) rotate(9deg) rotate(0deg);
}
.loading-area > *:nth-of-type(2) {
  animation: background 1s ease 0.05s infinite;
  transform: rotate(9deg) translate(30px) rotate(18deg) rotate(-9deg);
}
.loading-area > *:nth-of-type(3) {
  animation: background 1s ease 0.075s infinite;
  transform: rotate(18deg) translate(30px) rotate(27deg) rotate(-18deg);
}
.loading-area > *:nth-of-type(4) {
  animation: background 1s ease 0.1s infinite;
  transform: rotate(27deg) translate(30px) rotate(36deg) rotate(-27deg);
}
.loading-area > *:nth-of-type(5) {
  animation: background 1s ease 0.125s infinite;
  transform: rotate(36deg) translate(30px) rotate(45deg) rotate(-36deg);
}
.loading-area > *:nth-of-type(6) {
  animation: background 1s ease 0.15s infinite;
  transform: rotate(45deg) translate(30px) rotate(54deg) rotate(-45deg);
}
.loading-area > *:nth-of-type(7) {
  animation: background 1s ease 0.175s infinite;
  transform: rotate(54deg) translate(30px) rotate(63deg) rotate(-54deg);
}
.loading-area > *:nth-of-type(8) {
  animation: background 1s ease 0.2s infinite;
  transform: rotate(63deg) translate(30px) rotate(72deg) rotate(-63deg);
}
.loading-area > *:nth-of-type(9) {
  animation: background 1s ease 0.225s infinite;
  transform: rotate(72deg) translate(30px) rotate(81deg) rotate(-72deg);
}
.loading-area > *:nth-of-type(10) {
  animation: background 1s ease 0.25s infinite;
  transform: rotate(81deg) translate(30px) rotate(90deg) rotate(-81deg);
}
.loading-area > *:nth-of-type(11) {
  animation: background 1s ease 0.275s infinite;
  transform: rotate(90deg) translate(30px) rotate(99deg) rotate(-90deg);
}
.loading-area > *:nth-of-type(12) {
  animation: background 1s ease 0.3s infinite;
  transform: rotate(99deg) translate(30px) rotate(108deg) rotate(-99deg);
}
.loading-area > *:nth-of-type(13) {
  animation: background 1s ease 0.325s infinite;
  transform: rotate(108deg) translate(30px) rotate(117deg) rotate(-108deg);
}
.loading-area > *:nth-of-type(14) {
  animation: background 1s ease 0.35s infinite;
  transform: rotate(117deg) translate(30px) rotate(126deg) rotate(-117deg);
}
.loading-area > *:nth-of-type(15) {
  animation: background 1s ease 0.375s infinite;
  transform: rotate(126deg) translate(30px) rotate(135deg) rotate(-126deg);
}
.loading-area > *:nth-of-type(16) {
  animation: background 1s ease 0.4s infinite;
  transform: rotate(135deg) translate(30px) rotate(144deg) rotate(-135deg);
}
.loading-area > *:nth-of-type(17) {
  animation: background 1s ease 0.425s infinite;
  transform: rotate(144deg) translate(30px) rotate(153deg) rotate(-144deg);
}
.loading-area > *:nth-of-type(18) {
  animation: background 1s ease 0.45s infinite;
  transform: rotate(153deg) translate(30px) rotate(162deg) rotate(-153deg);
}
.loading-area > *:nth-of-type(19) {
  animation: background 1s ease 0.475s infinite;
  transform: rotate(162deg) translate(30px) rotate(171deg) rotate(-162deg);
}
.loading-area > *:nth-of-type(20) {
  animation: background 1s ease 0.5s infinite;
  transform: rotate(171deg) translate(30px) rotate(180deg) rotate(-171deg);
}
.loading-area > *:nth-of-type(21) {
  animation: background 1s ease 0.525s infinite;
  transform: rotate(180deg) translate(30px) rotate(189deg) rotate(-180deg);
}
.loading-area > *:nth-of-type(22) {
  animation: background 1s ease 0.55s infinite;
  transform: rotate(189deg) translate(30px) rotate(198deg) rotate(-189deg);
}
.loading-area > *:nth-of-type(23) {
  animation: background 1s ease 0.575s infinite;
  transform: rotate(198deg) translate(30px) rotate(207deg) rotate(-198deg);
}
.loading-area > *:nth-of-type(24) {
  animation: background 1s ease 0.6s infinite;
  transform: rotate(207deg) translate(30px) rotate(216deg) rotate(-207deg);
}
.loading-area > *:nth-of-type(25) {
  animation: background 1s ease 0.625s infinite;
  transform: rotate(216deg) translate(30px) rotate(225deg) rotate(-216deg);
}
.loading-area > *:nth-of-type(26) {
  animation: background 1s ease 0.65s infinite;
  transform: rotate(225deg) translate(30px) rotate(234deg) rotate(-225deg);
}
.loading-area > *:nth-of-type(27) {
  animation: background 1s ease 0.675s infinite;
  transform: rotate(234deg) translate(30px) rotate(243deg) rotate(-234deg);
}
.loading-area > *:nth-of-type(28) {
  animation: background 1s ease 0.7s infinite;
  transform: rotate(243deg) translate(30px) rotate(252deg) rotate(-243deg);
}
.loading-area > *:nth-of-type(29) {
  animation: background 1s ease 0.725s infinite;
  transform: rotate(252deg) translate(30px) rotate(261deg) rotate(-252deg);
}
.loading-area > *:nth-of-type(30) {
  animation: background 1s ease 0.75s infinite;
  transform: rotate(261deg) translate(30px) rotate(270deg) rotate(-261deg);
}
.loading-area > *:nth-of-type(31) {
  animation: background 1s ease 0.775s infinite;
  transform: rotate(270deg) translate(30px) rotate(279deg) rotate(-270deg);
}
.loading-area > *:nth-of-type(32) {
  animation: background 1s ease 0.8s infinite;
  transform: rotate(279deg) translate(30px) rotate(288deg) rotate(-279deg);
}
.loading-area > *:nth-of-type(33) {
  animation: background 1s ease 0.825s infinite;
  transform: rotate(288deg) translate(30px) rotate(297deg) rotate(-288deg);
}
.loading-area > *:nth-of-type(34) {
  animation: background 1s ease 0.85s infinite;
  transform: rotate(297deg) translate(30px) rotate(306deg) rotate(-297deg);
}
.loading-area > *:nth-of-type(35) {
  animation: background 1s ease 0.875s infinite;
  transform: rotate(306deg) translate(30px) rotate(315deg) rotate(-306deg);
}
.loading-area > *:nth-of-type(36) {
  animation: background 1s ease 0.9s infinite;
  transform: rotate(315deg) translate(30px) rotate(324deg) rotate(-315deg);
}
.loading-area > *:nth-of-type(37) {
  animation: background 1s ease 0.925s infinite;
  transform: rotate(324deg) translate(30px) rotate(333deg) rotate(-324deg);
}
.loading-area > *:nth-of-type(38) {
  animation: background 1s ease 0.95s infinite;
  transform: rotate(333deg) translate(30px) rotate(342deg) rotate(-333deg);
}
.loading-area > *:nth-of-type(39) {
  animation: background 1s ease 0.975s infinite;
  transform: rotate(342deg) translate(30px) rotate(351deg) rotate(-342deg);
}
.loading-area > *:nth-of-type(40) {
  animation: background 1s ease 1s infinite;
  transform: rotate(351deg) translate(30px) rotate(360deg) rotate(-351deg);
}
.loading-area > div {
  transform-origin: top center;
  background: transparent;
}

@keyframes background {
  from {
    background: var(--color);
  }
  to {
    background: transparent;
  }
}

.custom-loading {
  left: 57%;
  top: 50%;
}

@media (max-width: 768px) {
  .custom-loading {
    left: 50%;
    top: 50%;
  }
}

.shortbox-loading {
  left: 50%; 
  top: 50%;
  position: absolute;
  transform: translate(-50%,-50%);
}