看到一个蛮好看的loader动画分享给大家

晚上睡不着，刷帖子看到一个很好看的loader动画…忍不住cv过来了，分享给大家太绝绝子了

html

<svg width="140" height="140" viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg">

CSS

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500&display=swap");

@keyframes rotation {
from {

-webkit-transform: rotate(359deg);

}
to {

-webkit-transform: rotate(0deg);

}
}

svg * {
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}

.circle {
-webkit-animation: rotation 8s infinite linear;
}
.circle_s {
-webkit-animation: rotation 4s infinite linear;
}

效果图如下