/* HTML: <div class="loader"></div> */
    .loader-dots {
      width: 10px;
      aspect-ratio: 1;
      border-radius: 50%;
      animation: l5 1s infinite linear alternate;
      margin-left: 25px;
      margin-top: 25px;
    }
    @keyframes l5 {
        0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
        33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
        66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
        100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
    }

    /* HTML: <div class="loader"></div> */
    .loader.loader-spinner  {
      width: 50px;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 8px solid #ebebeb;
      border-right-color: #ccc;
      animation: l2 1s infinite linear;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25px;
    }
    @keyframes l2 {to{transform: rotate(1turn)}}

    /* HTML: <div class="loader"></div> */
    .loader.loader-modern {
      width: 50px;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 8px solid #ebebeb;
      margin-left: auto;
      margin-right: auto;
      animation:
        l20-1 0.8s infinite linear alternate,
        l20-2 1.6s infinite linear;
    }
    @keyframes l20-1{
       0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
       12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
       25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
       50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
       62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
       75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
       100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
    }
    @keyframes l20-2{ 
      0%    {transform:scaleY(1)  rotate(0deg)}
      49.99%{transform:scaleY(1)  rotate(135deg)}
      50%   {transform:scaleY(-1) rotate(0deg)}
      100%  {transform:scaleY(-1) rotate(-135deg)}
    }