merchapp/java-mall-app-shop-admin/components/favorite-loading/pulsing.scss

.favorite-loader {
	&.pulsing1 {
	  width: 20px;
	  aspect-ratio: 1;
	  border-radius: 50%;
		--pulsing1: #000;
	  background: var(--pulsing1);
	  box-shadow: 0 0 0 0 #0004;
	  animation: pulsing-l1 1s infinite;
	}
	@keyframes pulsing-l1 {
	  100% {box-shadow: 0 0 0 30px #0000}
	}

	&.pulsing2 {
	  width: 40rpx;
	  aspect-ratio: 1;
	  border-radius: 50%;
		--pulsing2: #000;
	  background: var(--pulsing2);
	  box-shadow: 0 0 0 0 #0004;
	  animation: pulsing-l2 1.5s infinite linear;
	  position: relative;
		&:before,
		&:after {
		  content: "";
		  position: absolute;
		  inset: 0;
		  border-radius: inherit;
		  box-shadow: 0 0 0 0 #0004;
		  animation: inherit;
		  animation-delay: -0.5s;
		}
		&:after {
		  animation-delay: -1s;
		}
	}
	
	@keyframes pulsing-l2 {
	  100% {box-shadow: 0 0 0 40px #0000}
	}
	
	&.pulsing3 {
	  width: 100rpx;
	  aspect-ratio: 1;
		--pulsing3: #dc1818;
	  color: var(--pulsing3);
	  background:
	   radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%) top left,
	   radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
	   linear-gradient(to bottom left, currentColor 42%,#0000 43%) bottom left ,
	   linear-gradient(to bottom right,currentColor 42%,#0000 43%) bottom right;
	  background-size: 50% 50%;
	  background-repeat: no-repeat;
	  position: relative;
		&:after {
		  content: "";
		  position: absolute;
		  inset: 0;
		  background: inherit;
		  opacity: 0.4;
		  animation: pulsing-l3 1s infinite;
		}
	}
	@keyframes pulsing-l3 {
	  to {transform:scale(1.8);opacity:0}
	}
	
	&.pulsing4 {
	  width: 120rpx;
	  aspect-ratio: 1;
	  position:relative;
		--pulsing4: #f85c00;
		&:before,
		&:after {
		  content: "";
		  position: absolute;
		  border-radius: 50%;
		  inset: 0;
		  background:
		    radial-gradient(circle 10px,var(--pulsing4) 94%,#0000),
		    repeating-conic-gradient(from -30deg,#0000 0 60deg,var(--pulsing4) 61deg 120deg);
		  -webkit-mask:radial-gradient(circle 15px,#000 calc(100% - 6px),#0000 calc(100% - 5px) 94%,#000);
		}
		&:after {
		  animation: pulsing-l4 1s infinite;
		  transform: perspective(300px) translateZ(0px)
		}
	}
	
	@keyframes pulsing-l4 {
	  to {transform:perspective(300px) translateZ(150px);opacity:0}
	}
	
	&.pulsing5 {
	  width: 160rpx;
	  aspect-ratio: 1;
	  position:relative;
		--pulsing5: #ffb940;
		&:before,
		&:after {
		  content: "";
		  position: absolute;
		  inset: 0;
		  background: var(--pulsing5);    
		  box-shadow: 0 0 0 50px;
		  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
		}
		&:after {
		  animation: pulsing-l5 1s infinite;
		  transform: perspective(300px) translateZ(0px)
		}
	}
	
	@keyframes pulsing-l5 {
	  to {transform:perspective(300px) translateZ(150px);opacity:0}
	}
	
	&.pulsing6 {
	  width: 80rpx;
	  aspect-ratio: 1;
	  position: relative;
	  transform: rotate(45deg);
		--pulsing6: #514b82;
		&:before,
		&:after {
		  content: "";
		  position: absolute;
		  inset: 0;
		  border-radius: 50% 50% 0 50%;
		  background: var(--pulsing6);
		  -webkit-mask: radial-gradient(circle 10px at 50% 50%,#0000 94%,#000);
		}
		&:after {
		  animation: pulsing-l6 1s infinite;
		  transform: perspective(300px) translateZ(0px)
		}
	}
	
	@keyframes pulsing-l6 {
	  to {transform: perspective(300px) translateZ(150px);opacity:0}
	}
	
	&.pulsing7 {
	  width: 200rpx;
	  height: 120rpx;
		--pulsing7: #269af2;
	  color: var(--pulsing7);
	  --c: radial-gradient(farthest-side,currentColor 96%,#0000);
	  background: 
	    var(--c) 100% 100% /30% 60%,
	    var(--c) 70%  0    /50% 100%,
	    var(--c) 0    100% /36% 68%,
	    var(--c) 27%  18%  /26% 40%,
	    linear-gradient(currentColor 0 0) bottom/67% 58%;
	  background-repeat: no-repeat;
	  position: relative;
		&:after {
		  content: "";
		  position: absolute;
		  inset: 0;
		  background: inherit;
		  opacity: 0.4;
		  animation: pulsing-l7 1s infinite;
		}
	}
	
	@keyframes pulsing-l7 {
	  to {transform:scale(1.8);opacity:0}
	}
	
	&.pulsing8 {
	  width: 130rpx;
	  height: 230rpx;
	  position: relative;
		--pulsing8: #ff8001;
		&:before,
		&:after {
		  content: "";
		  position: absolute;
		  inset: 0;
		  background: var(--pulsing8);    
		  box-shadow: 0 0 0 50px;
		  clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);;
		}
		&:after {
		  animation: pulsing-l8 1s infinite;
		  transform: perspective(300px) translateZ(0px)
		}
	}
	
	@keyframes pulsing-l8 {
	  to {transform:perspective(300px) translateZ(180px);opacity:0}
	}
	
	&.pulsing9 {
	  display: inline-grid;
	  font-size: 50px;
		&:before,
		&:after {
		  content: "💯";
		  grid-area: 1/1;
		}
		&:after {
		  animation: pulsing-l9 1s infinite;
		}
	}
	
	@keyframes pulsing-l9 {
	  to {transform:scale(1.8);opacity:0}
	}
}