/* HTML: <div class="loader"></div> */
.ad{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.msg{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    font-weight: 900;
    font-size: 36px;
}

.loader {
    width: 35px;
    height: 80px;
    position: relative;
  }
  .loader:after {
    content: "";
    position: absolute;
    inset: 0 0 20px;
    border-radius: 50px 50px 10px 10px;
    padding: 1px;
    background: linear-gradient(#ff4d80 33%,#ffa104 0 66%, #01ddc7 0) content-box;
    --c:radial-gradient(farthest-side,#000 94%,#0000);
    -webkit-mask:
      linear-gradient(#0000 0 0),
      var(--c) -10px -10px,
      var(--c)  15px -14px,
      var(--c)   9px -6px,
      var(--c) -12px  9px,
      var(--c)  14px  9px,
      var(--c)  23px 27px,
      var(--c)  -8px 35px,
      var(--c)   50% 50%,
      linear-gradient(#000 0 0);
    mask:
      linear-gradient(#000 0 0),
      var(--c) -10px -10px,
      var(--c)  15px -14px,
      var(--c)   9px -6px,
      var(--c) -12px  9px,
      var(--c)  14px  9px,
      var(--c)  23px 27px,
      var(--c)  -8px 35px,
      var(--c)   50% 50%,
      linear-gradient(#0000 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude,add,add,add,add,add,add,add,add;
    -webkit-mask-repeat: no-repeat;
    animation: l3 3s infinite ;
  }
  .loader:before {
    content: "";
    position: absolute;
    inset: 50% calc(50% - 4px) 0;
    background: #e0a267;
    border-radius: 50px;
  }
  @keyframes l3 {
   0%   {-webkit-mask-size: auto,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
   10%  {-webkit-mask-size: auto,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
   20%  {-webkit-mask-size: auto,25px 25px,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0}
   30%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,0 0,0 0,0 0,0 0,0 0}
   40%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,0 0,0 0,0 0,0 0}
   50%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,0 0,0 0,0 0}
   60%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,0 0,0 0}
   70%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,0 0}
   80%,
   100% {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,200% 200%}
  }
/* HTML: <div class="loader"></div> */
.loader1 {
    width: 80px;
    height: 75px;
    --c:no-repeat radial-gradient(farthest-side, #f7b261 85%,#b97850,#0000);
    --b:no-repeat radial-gradient(farthest-side, #734b46 94%,#0000);
    --s:8px 8px,8px 8px,8px 8px,40px 40px;
    --e:0 0, 0 0,0 0, 0 0;
    background:
      var(--b) 55% 47%,
      var(--b) 60% 66%,
      var(--b) 37% 43%,
      var(--c) 50% 50%,
      var(--b) 15px 4px,
      var(--b) 4px  14px,
      var(--b) 27px 18px,
      var(--c) 0    0,
      var(--b) calc(100% - 15px)  4px,
      var(--b) calc(100% - 4px)  14px,
      var(--b) calc(100% - 27px) 18px,
      var(--c) 100% 0/40px 40px,
      var(--b) 24px 47px,
      var(--b) 50%  43px,
      var(--b) 60%  58px,
      var(--c) 50%  100%;
    animation: l5 3s infinite;
  }
  @keyframes l5 {
    0%    ,20% {background-size: var(--s),var(--s),var(--s),var(--s)}
    20.01%,40% {background-size: var(--e),var(--s),var(--s),var(--s)}
    40.01%,60% {background-size: var(--e),var(--e),var(--s),var(--s)}
    60.01%,80% {background-size: var(--e),var(--e),var(--e),var(--s)}
    80.01%,100%{background-size: var(--e),var(--e),var(--e),var(--e)}
  }  
  /* HTML: <div class="loader"></div> */
.loader2 {
    width: 80px;
    height: 40px;
    border-radius: 0 0 100px 100px;
    border: 5px solid #538a2d;
    border-top: 0;
    box-sizing: border-box;
    background:
      radial-gradient(farthest-side at top,#0000 calc(100% - 5px),#e7ef9d calc(100% - 4px)), 
      radial-gradient(2px 3px,#5c4037 89%,#0000) 0 0/17px 12px,
      #ff1643;
    --c:radial-gradient(farthest-side,#000 94%,#0000);
    -webkit-mask:
      linear-gradient(#0000 0 0),
      var(--c) 12px -8px,
      var(--c) 29px -8px,
      var(--c) 45px -6px,
      var(--c) 22px -2px,
      var(--c) 34px  6px, 
      var(--c) 21px  6px,
      linear-gradient(#000 0 0);
    mask:
      linear-gradient(#000 0 0),
      var(--c) 12px -8px,
      var(--c) 29px -8px,
      var(--c) 45px -6px,
      var(--c) 22px -2px,
      var(--c) 34px  6px, 
      var(--c) 21px  6px,
      linear-gradient(#0000 0 0);
    -webkit-mask-composite:destination-out;
    mask-composite:exclude,add,add,add,add,add,add;
    -webkit-mask-repeat: no-repeat;
    animation: l8 3s infinite;
  }
  @keyframes l8 {
   0%   {-webkit-mask-size: auto,0 0,0 0,0 0,0 0,0 0,0 0}
   15%  {-webkit-mask-size: auto,20px 20px,0 0,0 0,0 0,0 0,0 0}
   30%  {-webkit-mask-size: auto,20px 20px,20px 20px,0 0,0 0,0 0,0 0}
   45%  {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,0 0,0 0,0 0}
   60%  {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,20px 20px,0 0,0 0}
   75%  {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,0 0}
   90%,
   100% {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px}
  }
  /* HTML: <div class="loader"></div> */
.loader3 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 8px solid #d1914b;
    box-sizing: border-box;
    --c:no-repeat radial-gradient(farthest-side, #d64123 94%,#0000);
    --b:no-repeat radial-gradient(farthest-side, #000 94%,#0000);
    background:
      var(--c) 11px 15px,
      var(--b) 6px 15px,    
      var(--c) 35px 23px,
      var(--b) 29px 15px,    
      var(--c) 11px 46px,
      var(--b) 11px 34px,    
      var(--c) 36px 0px,
      var(--b) 50px 31px,
      var(--c) 47px 43px,
      var(--b) 31px 48px,    
      #f6d353; 
    background-size: 15px 15px,6px 6px;
    animation: l4 3s infinite;
  }
  @keyframes l4 {
    0%     {-webkit-mask:conic-gradient(#0000 0     ,#000 0)}
    16.67% {-webkit-mask:conic-gradient(#0000 60deg ,#000 0)}
    33.33% {-webkit-mask:conic-gradient(#0000 120deg,#000 0)}
    50%    {-webkit-mask:conic-gradient(#0000 180deg,#000 0)}
    66.67% {-webkit-mask:conic-gradient(#0000 240deg,#000 0)}
    83.33% {-webkit-mask:conic-gradient(#0000 300deg,#000 0)}
    100%   {-webkit-mask:conic-gradient(#0000 360deg,#000 0)}
  }