1

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

Как и возможно ли добавить небольшую тень к бордюру. Дело в том, что если фон синий и добавить иконку, то пользователь не увидит, что в данный момент идет подгрузка контента

1 ответ 1

3

Воспользуйтесь CSS-фильтром drop-shadow():

svg {
    filter: drop-shadow(0 15px 10px #000);
}
.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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.