초간단 레인보우 원형 테두리 회전 효과 CSS

레인보우 테두리 회전 효과 CSS 입니다.

소스를 적절히 수정해서 사용하시면 훌륭한 효과를 구현 할수 있습니다.

@property --a {
syntax: '<angle>'; 
initial-value: 0deg;
inherits: false
}
html, body { display: grid }
html { height: 100% }
body { background: dimgrey }
.spinner {
box-sizing: border-box;
place-self: center;
width: min(100%, 18em);
aspect-ratio: 1;
padding: 1.25em;
border-radius: 50%;
box-shadow: 2px 2px 17px #000;
background: 
url("https://m.mydarlingu.com/web/product/medium/201902/a7fac77616604a973ff69b0fa5dc07ff.gif") 50%/ cover content-box, 
conic-gradient(in hsl longer hue from var(--a), hsl(0, 100%, 80%) 0 0);
animation: a 2s linear infinite;
}
@keyframes a { to { --a: 1turn } }