.shapes-1 {
    width: 40px;
    height: 40px;
    color: #25b09b;
    display: grid;
  }
  
  .shapes-1::before,
  .shapes-1::after {
    content: "";
    grid-area: 1/1;
    background: currentColor;
    clip-path: polygon(0 0,50% 50%, 0 100%);
    animation: sp1 2s infinite;
  }
  .shapes-1::after {
    animation-delay: -1.5s;
    --s:90deg;
  }
  
  @keyframes sp1 {
      0%,12.5%    {transform:rotate(var(--s,0deg)) rotate(0deg)}
      37.5%,62.5% {transform:rotate(var(--s,0deg)) rotate(-180deg)}
      87.5%,100%  {transform:rotate(var(--s,0deg)) rotate(-360deg)}
  }
  
  .shapes-2 {
    width: 40px;
    height: 40px;
    color: #514b82;
    background:repeating-conic-gradient(from -47deg,#0000 0deg, currentColor 1deg 91deg,#0000 94deg 180deg);
    display: flex;
    animation: sp2-0 2s infinite linear;
  }
  
  .shapes-2::before,
  .shapes-2::after {
    content: "";
    flex: 1;
    background: currentColor;
    clip-path: polygon(0 0,100% 50%, 0 100%);
    animation: sp2 1s infinite alternate;
    transform-origin: bottom left;
  
  }
  .shapes-2::after {
    clip-path: polygon(100% 0,100% 100%,0 50%);
    transform-origin: top right;
  }
  
  @keyframes sp2-0 {
      0%,49.9% {transform:scaleX( 1)}
      50%,100% {transform:scaleX(-1)}
  }
  
  @keyframes sp2 {
      0%, 20%  {transform:rotate(0deg)}
      80%,100% {transform:rotate(-270deg)}
  }
  
  .shapes-3 {
    width: 40px;
    height: 40px;
    color: orange;
    display: grid;
  }
  
  .shapes-3::before,
  .shapes-3::after {
    content: "";
    grid-area: 1/1;
    background: currentColor;
    clip-path: polygon(0 0,101% 0, 0 100%);
    animation: sp3 2s infinite;
  }
  .shapes-3::after {
    --s:-1,-1;
  }
  
  @keyframes sp3 {
      0%,
      10%  {transform:scale(var(--s,1)) translate(0,0)        rotate(0deg)}
      33%  {transform:scale(var(--s,1)) translate(20px,-20px) rotate(0deg)}
      66%  {transform:scale(var(--s,1)) translate(20px,-20px) rotate(180deg)}
      90%,
      100% {transform:scale(var(--s,1)) translate(0px,0px)    rotate(180deg)}
  }
  
  .shapes-4 {
    width: 40px;
    height: 40px;
    color:#f03355;
    background: conic-gradient(currentColor 0 270deg,#0000 0);
    border-radius: 50%;
    animation: sp4-0 4s infinite linear;
  }
  
  .shapes-4::before {
    content: "";
    display: block;
    height: 50%;
    width: 50%;
    border-top-left-radius: 100px;
    background: currentColor;
    animation: sp4 0.5s infinite alternate;
  }
  
  @keyframes sp4-0 {
      0%,24.99%  {transform: rotate(0deg)}
      25%,49.99% {transform: rotate(90deg)}
      50%,74.99% {transform: rotate(180deg)}
      75%,100%   {transform: rotate(270deg)}
  }
  
  @keyframes sp4 {
      100%  {transform: translate(-10px,-10px)}
  }
  
  .shapes-5 {
    width: 40px;
    height: 40px;
    display: flex;
    transform-origin:50% 125%;
    animation: sp5-0 1.5s infinite linear;
  }
  .shapes-5:before,
  .shapes-5:after {
    content:"";
    flex:1;
    background: orange;
    animation: inherit;
    transform-origin: bottom left;
    animation-name: sp5-1;
  }
  .shapes-5:before {
    transform-origin: bottom right;
    --s:-1;
  }
  
  @keyframes sp5-0 {
     0%,10%   {transform:translateY(0)     scaleY(1)}
     49.99%   {transform:translateY(-75%)  scaleY(1)}
     50%      {transform:translateY(-75%)  scaleY(-1)}
     90%,100% {transform:translateY(-150%) scaleY(-1)}
  }
  @keyframes sp5-1 {
     10%,90% {transform: rotate(0deg)}
     50%     {transform: rotate(calc(var(--s,1)*90deg))}
  }
  
  .shapes-6 {
    width: 40px;
    height: 40px;
    color: #25b09b;
    position: relative;
    background:
      linear-gradient(currentColor 0 0) center/100% 10px,
      linear-gradient(currentColor 0 0) center/10px 100%;
    background-repeat: no-repeat;
  }
  .shapes-6:before {
    content:'';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(currentColor 0 0) 0    0,
      linear-gradient(currentColor 0 0) 100% 0,
      linear-gradient(currentColor 0 0) 0    100%,
      linear-gradient(currentColor 0 0) 100% 100%;
    background-size:15.5px 15.5px;
    background-repeat: no-repeat;
    animation: sp6 1.5s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes sp6 {
     33%  {inset:-10px;transform: rotate(0deg)}
     66%  {inset:-10px;transform: rotate(90deg)}
     100% {inset:0    ;transform: rotate(90deg)}
  }
  
  .shapes-7 {
    width: 40px;
    height: 60px;
    color: #514b82;
    position: relative;
  }
  
  .shapes-7::before,
  .shapes-7::after {
    content: "";
    position: absolute;
    inset:0;
    background:currentColor;
    clip-path: polygon(0 0,100% 0, 100% 67%,50% 67%,50% 34%,0 34%);
    animation: sp7 2s infinite;
  }
  .shapes-7::after {
    --s:-1,-1;
  }
  
  @keyframes sp7 {
      0%,
      10%  {transform:scale(var(--s,1)) translate(0,0)        rotate(0deg)}
      33%  {transform:scale(var(--s,1)) translate(0,-20px)    rotate(0deg)}
      66%  {transform:scale(var(--s,1)) translate(10px,-20px) rotate(-90deg)}
      90%,
      100% {transform:scale(var(--s,1)) translate(10px,-10px) rotate(-90deg)}
  }
  
  .shapes-8 {
    width: 40px;
    height: 40px;
    color:#f03355;
    position: relative;
    background: radial-gradient(10px,currentColor 94%,#0000);
  }
  .shapes-8:before {
    content:'';
    position: absolute;
    inset:0;
    border-radius: 50%;
    background:
      radial-gradient(9px at bottom right,#0000 94%,currentColor) top    left,
      radial-gradient(9px at bottom left ,#0000 94%,currentColor) top    right,
      radial-gradient(9px at top    right,#0000 94%,currentColor) bottom left,
      radial-gradient(9px at top    left ,#0000 94%,currentColor) bottom right;
    background-size:20px 20px;
    background-repeat: no-repeat;
    animation: sp8 1.5s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes sp8 {
     33%  {inset:-10px;transform: rotate(0deg)}
     66%  {inset:-10px;transform: rotate(90deg)}
     100% {inset:0    ;transform: rotate(90deg)}
  }
  
  .shapes-9 {
    width: 40px;
    height: 20px;
    background: orange;
    position: relative;
    animation: sp9-0 1.5s infinite linear;
  }
  .shapes-9:before,
  .shapes-9:after {
     content:"";
     position: absolute;
     background: inherit; 
     bottom: 100%;
     width: 50%;
     height: 100%;
     animation: inherit;
     animation-name: sp9-1;
  }
  .shapes-9:before {
    left:0;
    --s:-1,1;
  }
  .shapes-9:after {
    right:0;
  }
  @keyframes sp9-0 {
     0%,30%   {transform:translateY(0)     scaleY(1)}
     49.99%   {transform:translateY(-50%)  scaleY(1)}
     50%      {transform:translateY(-50%)  scaleY(-1)}
     70%,100% {transform:translateY(-100%) scaleY(-1)}
  }
  @keyframes sp9-1 {
     0%,10%,90%,100% {transform: scale(var(--s,1)) translate(0)}
     30%,70%         {transform: scale(var(--s,1)) translate(20px)}
     50%             {transform: scale(var(--s,1)) translate(20px,20px)}
  }
  
  .shapes-10 {
    width: 40px;
    height: 40px;
    display: flex;
    transform-origin: 0% 150%;
    animation: sp10-0 2s infinite linear;
  }
  .shapes-10:before,
  .shapes-10:after {
    content:"";
    flex:1;
    background:#f03355;
    animation: sp10-1 1s infinite linear alternate;
    border-radius: 100px 0 0 100px;
    transform-origin: 100% 100%;
  }
  .shapes-10:after {
    border-radius: 0 100px 100px 0;
    transform-origin: 0% 100%;
    --s:-1;
  }
  
  @keyframes sp10-0 {
     0%,10%   {transform:translateY(0)     scaleY(1)}
     49.99%   {transform:translateY(-100%) scaleY(1)}
     50%      {transform:translateY(-100%) scaleY(-1)}
     90%,100% {transform:translateY(-200%) scaleY(-1)}
  }
  @keyframes sp10-1 {
     0%,20%  {transform:rotate(0deg)                    translate(0,0)     rotate(0deg)}
     50%     {transform:rotate(calc(var(--s,1)*-90deg)) translate(0,0)     rotate(0deg)}
     100%    {transform:rotate(calc(var(--s,1)*-90deg)) translate(0,-20px) rotate(calc(var(--s,1)*-90deg))}
  }
  
  
/* Spinner css : Parth Patel */
.spinner-3 {
    width: 50px;
    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)}
  }