11<template >
2- <div class =" lds-ellipsis" >
3- <div ></div >
4- <div ></div >
5- <div ></div >
6- <div ></div >
7- </div >
2+ <div class =" lds-ellipsis" >
3+ <div ></div >
4+ <div ></div >
5+ <div ></div >
6+ <div ></div >
7+ </div >
88</template >
99
1010<script >
11-
1211export default {
13- name: " loading-dots" ,
12+ name: " loading-dots" ,
1413};
1514 </script >
1615
1716<style scoped>
1817.lds-ellipsis {
19- display : inline-block ;
20- position : relative ;
21- width : 80px ;
22- height : 80px ;
18+ display : inline-block ;
19+ position : relative ;
20+ width : 80px ;
21+ height : 80px ;
2322}
2423
2524.lds-ellipsis div {
26- position : absolute ;
27- top : 33px ;
28- width : 13px ;
29- height : 13px ;
30- border-radius : 50% ;
31- background : #fff ;
32- animation-timing-function : cubic-bezier (0 , 1 , 1 , 0 );
25+ position : absolute ;
26+ top : 33px ;
27+ width : 13px ;
28+ height : 13px ;
29+ border-radius : 50% ;
30+ background : #fff ;
31+ animation-timing-function : cubic-bezier (0 , 1 , 1 , 0 );
3332}
3433
3534.lds-ellipsis div :nth-child (1 ) {
36- left : 8px ;
37- animation : lds-ellipsis1 0.6s infinite ;
35+ left : 8px ;
36+ animation : lds-ellipsis1 0.6s infinite ;
3837}
3938
4039.lds-ellipsis div :nth-child (2 ) {
41- left : 8px ;
42- animation : lds-ellipsis2 0.6s infinite ;
40+ left : 8px ;
41+ animation : lds-ellipsis2 0.6s infinite ;
4342}
4443
4544.lds-ellipsis div :nth-child (3 ) {
46- left : 32px ;
47- animation : lds-ellipsis2 0.6s infinite ;
45+ left : 32px ;
46+ animation : lds-ellipsis2 0.6s infinite ;
4847}
4948
5049.lds-ellipsis div :nth-child (4 ) {
51- left : 56px ;
52- animation : lds-ellipsis3 0.6s infinite ;
50+ left : 56px ;
51+ animation : lds-ellipsis3 0.6s infinite ;
5352}
5453
5554@keyframes lds-ellipsis1 {
56- 0% {
57- transform : scale (0 );
58- }
55+ 0% {
56+ transform : scale (0 );
57+ }
5958
60- 100% {
61- transform : scale (1 );
62- }
59+ 100% {
60+ transform : scale (1 );
61+ }
6362}
6463
6564@keyframes lds-ellipsis3 {
66- 0% {
67- transform : scale (1 );
68- }
65+ 0% {
66+ transform : scale (1 );
67+ }
6968
70- 100% {
71- transform : scale (0 );
72- }
69+ 100% {
70+ transform : scale (0 );
71+ }
7372}
7473
7574@keyframes lds-ellipsis2 {
76- 0% {
77- transform : translate (0 , 0 );
78- }
75+ 0% {
76+ transform : translate (0 , 0 );
77+ }
7978
80- 100% {
81- transform : translate (24px , 0 );
82- }
79+ 100% {
80+ transform : translate (24px , 0 );
81+ }
8382}
84- </style >
83+ </style >
0 commit comments