55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name : 'SpinnerCpnt'
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
div{
|
|
//display: inline-block;
|
|
width: 1.0em;
|
|
margin-right: 1ch;
|
|
aspect-ratio: 1;
|
|
border:3px solid #ff00c8;
|
|
border-top:3px solid rgb(216, 226, 253);
|
|
border-radius:50%;
|
|
|
|
-webkit-transition-property: -webkit-transform;
|
|
-webkit-transition-duration: 1.2s;
|
|
-webkit-animation-name: rotate;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
|
|
-moz-transition-property: -moz-transform;
|
|
-moz-animation-name: rotate;
|
|
-moz-animation-duration: 1.2s;
|
|
-moz-animation-iteration-count: infinite;
|
|
-moz-animation-timing-function: linear;
|
|
|
|
transition-property: transform;
|
|
animation-name: rotate;
|
|
animation-duration: 1.2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;}
|
|
|
|
@-webkit-keyframes rotate {
|
|
from {-webkit-transform: rotate(0deg);}
|
|
to {-webkit-transform: rotate(360deg);}
|
|
}
|
|
|
|
@-moz-keyframes rotate {
|
|
from {-moz-transform: rotate(0deg);}
|
|
to {-moz-transform: rotate(360deg);}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {transform: rotate(0deg);}
|
|
to {transform: rotate(360deg);}
|
|
}
|
|
|
|
|
|
</style> |