.container.data-v-a59cc858 { width: 30px; height: 30px; position: relative; } .container.loading1.data-v-a59cc858 { transform: rotate(45deg); } .container .shape.data-v-a59cc858 { position: absolute; width: 10px; height: 10px; border-radius: 1px; } .container .shape.shape1.data-v-a59cc858 { left: 0; background-color: #1890ff; } .container .shape.shape2.data-v-a59cc858 { right: 0; background-color: #91cb74; } .container .shape.shape3.data-v-a59cc858 { bottom: 0; background-color: #fac858; } .container .shape.shape4.data-v-a59cc858 { bottom: 0; right: 0; background-color: #ee6666; } .loading1 .shape1.data-v-a59cc858 { animation: animation1shape1-a59cc858 0.5s ease 0s infinite alternate; } @keyframes animation1shape1-a59cc858 { from { transform: translate(0, 0); } to { transform: translate(16px, 16px); } } .loading1 .shape2.data-v-a59cc858 { animation: animation1shape2-a59cc858 0.5s ease 0s infinite alternate; } @keyframes animation1shape2-a59cc858 { from { transform: translate(0, 0); } to { transform: translate(-16px, 16px); } } .loading1 .shape3.data-v-a59cc858 { animation: animation1shape3-a59cc858 0.5s ease 0s infinite alternate; } @keyframes animation1shape3-a59cc858 { from { transform: translate(0, 0); } to { transform: translate(16px, -16px); } } .loading1 .shape4.data-v-a59cc858 { animation: animation1shape4-a59cc858 0.5s ease 0s infinite alternate; } @keyframes animation1shape4-a59cc858 { from { transform: translate(0, 0); } to { transform: translate(-16px, -16px); } }