.loader {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, #03dac6, #6200ea);
  border: 8px solid transparent;
  border-top-color: #03dac6;
  border-bottom-color: #6200ea;
  animation: spin 2s linear infinite;
}

.loader::before {
  content: "1";
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  color: white;
  animation: count 10s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes count {
  0% {
    content: "1";
  }
  1% {
    content: "2";
  }
  2% {
    content: "3";
  }
  3% {
    content: "4";
  }
  4% {
    content: "5";
  }
  5% {
    content: "6";
  }
  6% {
    content: "7";
  }
  7% {
    content: "8";
  }
  8% {
    content: "9";
  }
  9% {
    content: "10";
  }
  10% {
    content: "11";
  }
  11% {
    content: "12";
  }
  12% {
    content: "13";
  }
  13% {
    content: "14";
  }
  14% {
    content: "15";
  }
  15% {
    content: "16";
  }
  16% {
    content: "17";
  }
  17% {
    content: "18";
  }
  18% {
    content: "19";
  }
  19% {
    content: "20";
  }
  20% {
    content: "21";
  }
  21% {
    content: "22";
  }
  22% {
    content: "23";
  }
  23% {
    content: "24";
  }
  24% {
    content: "25";
  }
  25% {
    content: "26";
  }
  26% {
    content: "27";
  }
  27% {
    content: "28";
  }
  28% {
    content: "29";
  }
  29% {
    content: "30";
  }
  30% {
    content: "31";
  }
  31% {
    content: "32";
  }
  32% {
    content: "33";
  }
  33% {
    content: "34";
  }
  34% {
    content: "35";
  }
  35% {
    content: "36";
  }
  36% {
    content: "37";
  }
  37% {
    content: "38";
  }
  38% {
    content: "39";
  }
  39% {
    content: "40";
  }
  40% {
    content: "41";
  }
  41% {
    content: "42";
  }
  42% {
    content: "43";
  }
  43% {
    content: "44";
  }
  44% {
    content: "45";
  }
  45% {
    content: "46";
  }
  46% {
    content: "47";
  }
  47% {
    content: "48";
  }
  48% {
    content: "49";
  }
  49% {
    content: "50";
  }
  50% {
    content: "51";
  }
  51% {
    content: "52";
  }
  52% {
    content: "53";
  }
  53% {
    content: "54";
  }
  54% {
    content: "55";
  }
  55% {
    content: "56";
  }
  56% {
    content: "57";
  }
  57% {
    content: "58";
  }
  58% {
    content: "59";
  }
  59% {
    content: "60";
  }
  60% {
    content: "61";
  }
  61% {
    content: "62";
  }
  62% {
    content: "63";
  }
  63% {
    content: "64";
  }
  64% {
    content: "65";
  }
  65% {
    content: "66";
  }
  66% {
    content: "67";
  }
  67% {
    content: "68";
  }
  68% {
    content: "69";
  }
  69% {
    content: "70";
  }
  70% {
    content: "71";
  }
  71% {
    content: "72";
  }
  72% {
    content: "73";
  }
  73% {
    content: "74";
  }
  74% {
    content: "75";
  }
  75% {
    content: "76";
  }
  76% {
    content: "77";
  }
  77% {
    content: "78";
  }
  78% {
    content: "79";
  }
  79% {
    content: "80";
  }
  80% {
    content: "81";
  }
  81% {
    content: "82";
  }
  82% {
    content: "83";
  }
  83% {
    content: "84";
  }
  84% {
    content: "85";
  }
  85% {
    content: "86";
  }
  86% {
    content: "87";
  }
  87% {
    content: "88";
  }
  88% {
    content: "89";
  }
  89% {
    content: "90";
  }
  90% {
    content: "91";
  }
  91% {
    content: "92";
  }
  92% {
    content: "93";
  }
  93% {
    content: "94";
  }
  94% {
    content: "95";
  }
  95% {
    content: "96";
  }
  96% {
    content: "97";
  }
  97% {
    content: "98";
  }
  98% {
    content: "99";
  }
  99% {
    content: "100";
  }
  100% {
    content: "1";
  }
}