/* HTML: <div class="loader"></div> */
.loader-square {
  width: 85px;
  height: 35px;
  --g1:conic-gradient(from  90deg at 3px  3px ,#0000 90deg,#fff 0);
  --g2:conic-gradient(from -90deg at 22px 22px,#0000 90deg,#fff 0);
  background:var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
  background-size: 25px 25px;
  background-repeat: no-repeat;
  animation: l6 1s infinite alternate;
  margin-left:1.8em;
}
@keyframes l6 {
  0%   {background-position:0 50% ,50% 50% ,100% 50% }
  20%  {background-position:0 0   ,50% 50% ,100% 50% }
  40%  {background-position:0 100%,50%  0  ,100% 50% }
  60%  {background-position:0 50% ,50% 100%,100% 0   }
  80%  {background-position:0 50% ,50% 50% ,100% 100%}
  100% {background-position:0 50% ,50% 50% ,100% 50% }
}


/* HTML: <div class="loader"></div> */
.loader-sun {
  width: 50px;
  aspect-ratio: 1;
  background: #ffd738;
  border-radius: 50%;
  display: grid;
  margin-left:3em;
}
.loader-sun::before,
.loader-sun::after {
  content: "";
  grid-area: 1/1;
  background: inherit;
  clip-path: polygon(0 0,50% 40%,100% 0,60% 50%,100% 100%,50% 60%,0 100%,40% 50%);
  animation: l1 1s infinite alternate;
  transform: rotate(var(--r,0)) scale(1);
}
.loader-sun::after {
  --r:45deg; 
}
@keyframes l1 {
  100% {transform:rotate(var(--r,0)) scale(1.4) }
}