93 lines
1.9 KiB
SCSS
93 lines
1.9 KiB
SCSS
.ui-spinner {
|
|
--length: calc(2 * 3.14 * (var(--spinner-size, 20px) * 0.45));
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: var(--spinner-size, 20px);
|
|
height: var(--spinner-size, 20px);
|
|
border-radius: var(--spinner-border-radius, 50%);
|
|
pointer-events: none;
|
|
|
|
&__circle-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: rotateZ(-90deg);
|
|
}
|
|
|
|
&__circle,
|
|
&__inner {
|
|
fill: none;
|
|
stroke-width: 10%;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
&__circle {
|
|
stroke: var(--spinner-color, currentColor);
|
|
opacity: var(--spinner-circle-opacity, 0.5);
|
|
}
|
|
|
|
&__inner {
|
|
stroke: var(--spinner-color, currentColor);
|
|
stroke-dasharray: var(--length);
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
&__remaining-time {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 12px;
|
|
stroke: var(--c-text-gray);
|
|
transition: 0.5s ease;
|
|
color: var(--spinner-color, currentColor);
|
|
-webkit-background-clip: initial;
|
|
background-clip: initial;
|
|
-webkit-text-fill-color: initial;
|
|
text-align: center;
|
|
}
|
|
|
|
&.is-timer {
|
|
.ui-spinner__inner {
|
|
animation: timer v-bind('delay + "s"') linear;
|
|
}
|
|
}
|
|
|
|
&.is-indeterminate {
|
|
animation: indeterminate var(--spinner-speed, 1.5s) linear infinite;
|
|
|
|
.ui-spinner__inner {
|
|
stroke-dashoffset: calc(var(--length) * 0.75);
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate {
|
|
from {
|
|
-ms-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-ms-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-webkit-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes timer {
|
|
from {
|
|
stroke-dashoffset: var(--length);
|
|
}
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
} |