27 lines
416 B
Vue
27 lines
416 B
Vue
|
<template>
|
||
|
|
<span class="dots"></span>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
.dots {
|
||
|
|
display: inline-block;
|
||
|
|
width: 1.5em; /* reserve enough space for '...' */
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dots::after {
|
||
|
|
content: '';
|
||
|
|
animation: dots 1.5s steps(4, end) infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes dots {
|
||
|
|
0% { content: ''; }
|
||
|
|
25% { content: '.'; }
|
||
|
|
50% { content: '..'; }
|
||
|
|
75% { content: '...'; }
|
||
|
|
100% { content: ''; }
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|