.spinner {
animation: spinner 1.5s ease-in-out infinite;
}
@keyframes spinner {
0% {stroke-dasharray: 0, 100; stroke-dashoffset: 0}
50% {stroke-dasharray: 65, 35; stroke-dashoffset: -35}
100% {stroke-dasharray: 65, 100; stroke-dashoffset: -100.5}
}
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><circle class="spinner" fill='none' stroke='blue' stroke-width='3' cx="18" cy="18" r="16"><animateTransform attributeName="transform" type="rotate" dur="6s" values="0 18 18;360 18 18" repeatCount="indefinite"></animateTransform></circle></svg>
Как и возможно ли добавить небольшую тень к бордюру. Дело в том, что если фон синий и добавить иконку, то пользователь не увидит, что в данный момент идет подгрузка контента