fix: spinner may stop playing animation after dismiss (#5365)
* fix: spinner may stop playing animation after dismiss * fix: animation paused more safely
This commit is contained in:
parent
8cf6e8ec75
commit
42e322012c
@ -73,12 +73,23 @@ function onTransitionEnd() {
|
|||||||
@transitionend="onTransitionEnd"
|
@transitionend="onTransitionEnd"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
:class="{ paused: !renderSpinner }"
|
||||||
class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
|
class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.paused {
|
||||||
|
&::before {
|
||||||
|
animation-play-state: paused !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
animation-play-state: paused !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.loader {
|
.loader {
|
||||||
&::before {
|
&::before {
|
||||||
animation: loader-shadow-ani 0.5s linear infinite;
|
animation: loader-shadow-ani 0.5s linear infinite;
|
||||||
|
Loading…
Reference in New Issue
Block a user