$offset: 187;
$duration: 1.4s;
.cf7md-spinner {
animation: rotator $duration linear infinite;
}
@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
.cf7md-spinner-path {
stroke-dasharray: $offset;
stroke-dashoffset: 0;
stroke: $text-primary-on-light;
transform-origin: center;
animation: dash $duration ease-in-out infinite;
.mdc-theme--dark & {
stroke: $text-primary-on-dark;
}
}
@keyframes dash {
0% { stroke-dashoffset: $offset; }
50% {
stroke-dashoffset: $offset/4;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: $offset;
transform:rotate(450deg);
}
}
// Reset the default spinner
.ajax-loader {
background-image: none;
width: 25px;
height: 25px;
margin-left: 8px;
}
// Hiding and showing
.cf7md-spinner {
display: none;
.ajax-loader.is-active & {
display: block;
}
}
// Avada theme puts its own spinner in
.fusion-slider-loading, .fusion-slider-loading:after {
width: 2.2em !important;
height: 2.2em;
}