.spinner {
$spinner-size: 80px; position: relative; margin: 0 auto; width: $spinner-size; &:before { content: ''; display: block; padding-top: 100%; } &--hidden { display: none; } &--small { width: $spinner-size / 2; } &--small &__path { stroke-width: 3; } &__wrapper { animation: spinner--rotate 2s linear infinite; height: 100%; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } &__path { transform: translateZ(0); stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke: $primary-color; animation: spinner--dash 1.5s ease-in-out infinite; stroke-linecap: round; }
}
@keyframes spinner–rotate {
100% { transform: rotate(360deg); }
}
@keyframes spinner–dash {
0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}