.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} } }