.spinner-1 {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 6px;
    background:
      conic-gradient(from 135deg at top,currentColor 90deg, #0000 0) 0 calc(50% - 4px)/17px 8.5px,
      radial-gradient(farthest-side at bottom left,#0000 calc(100% - 6px),currentColor calc(100% - 5px) 99%,#0000) top right/50%  50% content-box content-box,
      radial-gradient(farthest-side at top        ,#0000 calc(100% - 6px),currentColor calc(100% - 5px) 99%,#0000) bottom   /100% 50% content-box content-box;
    background-repeat: no-repeat;
    animation: s1 1s infinite linear;
  }
  
  @keyframes s1{ 
    100%{transform: rotate(1turn)}
  }
  
  .spinner-2 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
  }
  .spinner-2::before,
  .spinner-2::after {    
    content:"";
    grid-area: 1/1;
    --c: radial-gradient(farthest-side,#25b09b 92%,#0000);
    background: 
      var(--c) 50%  0, 
      var(--c) 50%  100%, 
      var(--c) 100% 50%, 
      var(--c) 0    50%;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    animation: s2 1s infinite;
  }
  .spinner-2::before {
    margin: 4px;
    filter: hue-rotate(45deg);
    background-size: 8px 8px;
    animation-timing-function: linear
  }
  
  @keyframes s2{ 
    100%{transform: rotate(.5turn)}
  }
  
  .spinner-3 {
    width: 100px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: 
      radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
      conic-gradient(#0000 30%,#ffa516);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: s3 1s infinite linear;
  }
  
  @keyframes s3{ 
    100%{transform: rotate(1turn)}
  }
  
  .spinner-4 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    animation: s4 4s infinite;
  }
  .spinner-4::before,
  .spinner-4::after {    
    content: "";
    grid-area: 1/1;
    border: 8px solid;
    border-radius: 50%;
    border-color: red red #0000 #0000;
    mix-blend-mode: darken;
    animation: s4 1s infinite linear;
  }
  .spinner-4::after {
    border-color: #0000 #0000 blue blue;
    animation-direction: reverse;
  }
  
  @keyframes s4{ 
    100%{transform: rotate(1turn)}
  }
  
  
  .spinner-5 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border:4px solid #0000;
    border-radius: 50%;
    border-right-color: #25b09b;
    animation: s5 1s infinite linear;
  }
  .spinner-5::before,
  .spinner-5::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: s5 2s infinite;
  }
  .spinner-5::after {
    margin: 8px;
    animation-duration: 3s;
  }
  
  @keyframes s5{ 
    100%{transform: rotate(1turn)}
  }
  
  .spinner-6 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #ccc #0000;
    animation: s6 1s infinite linear;
  }
  .spinner-6::before,
  .spinner-6::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
  }
  .spinner-6::before {
    border-color: #f03355 #0000;
    animation: inherit; 
    animation-duration: .5s;
    animation-direction: reverse;
  }
  .spinner-6::after {
    margin: 8px;
  }
  
  @keyframes s6 { 
    100%{transform: rotate(1turn)}
  }
  
  .spinner-7 {
    width: 70px;
    aspect-ratio: 1;
    background:
      radial-gradient(farthest-side,#ffa516 90%,#0000) center/16px 16px,
      radial-gradient(farthest-side,green   90%,#0000) bottom/12px 12px;
    background-repeat: no-repeat;
    animation: s7 1s infinite linear;
    position: relative;
  }
  .spinner-7::before {    
    content:"";
    position: absolute;
    width: 8px;
    aspect-ratio: 1;
    inset: auto 0 16px;
    margin: auto;
    background: #ccc;
    border-radius: 50%;
    transform-origin: 50% calc(100% + 10px);
    animation: inherit;
    animation-duration: 0.5s;
  }
  
  
  @keyframes s7 { 
    100%{transform: rotate(1turn)}
  }
  
  
  .spinner-8 {
    width: 50px;
    aspect-ratio: 1;
    --c: radial-gradient(farthest-side,#514b82 92%,#0000);
    background: 
      var(--c) 50%  0, 
      var(--c) 50%  100%, 
      var(--c) 100% 50%, 
      var(--c) 0    50%;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    animation: s8 1s infinite;
    position: relative;
  }
  .spinner-8::before {    
    content:"";
    position: absolute;
    inset:0;
    margin: 3px;
    background: repeating-conic-gradient(#0000 0 35deg,#514b82 0 90deg);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
    border-radius: 50%;
  }
  
  @keyframes s8 { 
    100%{transform: rotate(.5turn)}
  }
  
  .spinner-9 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    color: #854f1d;
    background: radial-gradient(farthest-side, currentColor calc(100% - 6px),#0000 calc(100% - 5px) 0);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px));
    border-radius: 50%;
    animation: s9 2s infinite linear;
  }
  .spinner-9::before,
  .spinner-9::after {    
    content: "";
    grid-area: 1/1;
    background:
      linear-gradient(currentColor 0 0) center,
      linear-gradient(currentColor 0 0) center;
    background-size: 100% 10px,10px 100%;
    background-repeat: no-repeat;
  }
  .spinner-9::after {
     transform: rotate(45deg);
  }
  
  @keyframes s9 { 
    100%{transform: rotate(1turn)}
  }
  
  .spinner-10 {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid #514b82;
    animation:
      s10-1 0.8s infinite linear alternate,
      s10-2 1.6s infinite linear;
  }
  @keyframes s10-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 s10-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)}
  }
  
  #btn:active{
transition-duration: .1s;
transform: scale(1.2);
  }