.container.data-v-7e96cf90 { width: 30px; height: 30px; position: relative; } .container.loading5 .shape.data-v-7e96cf90 { width: 15px; height: 15px; } .container .shape.data-v-7e96cf90 { position: absolute; width: 10px; height: 10px; border-radius: 1px; } .container .shape.shape1.data-v-7e96cf90 { left: 0; background-color: #1890ff; } .container .shape.shape2.data-v-7e96cf90 { right: 0; background-color: #91cb74; } .container .shape.shape3.data-v-7e96cf90 { bottom: 0; background-color: #fac858; } .container .shape.shape4.data-v-7e96cf90 { bottom: 0; right: 0; background-color: #ee6666; } .loading5 .shape1.data-v-7e96cf90 { animation: animation5shape1-7e96cf90 2s ease 0s infinite reverse; } @keyframes animation5shape1-7e96cf90 { 0% { transform: translate(0, 0); } 25% { transform: translate(0, 15px); } 50% { transform: translate(15px, 15px); } 75% { transform: translate(15px, 0); } } .loading5 .shape2.data-v-7e96cf90 { animation: animation5shape2-7e96cf90 2s ease 0s infinite reverse; } @keyframes animation5shape2-7e96cf90 { 0% { transform: translate(0, 0); } 25% { transform: translate(-15px, 0); } 50% { transform: translate(-15px, 15px); } 75% { transform: translate(0, 15px); } } .loading5 .shape3.data-v-7e96cf90 { animation: animation5shape3-7e96cf90 2s ease 0s infinite reverse; } @keyframes animation5shape3-7e96cf90 { 0% { transform: translate(0, 0); } 25% { transform: translate(15px, 0); } 50% { transform: translate(15px, -15px); } 75% { transform: translate(0, -15px); } } .loading5 .shape4.data-v-7e96cf90 { animation: animation5shape4-7e96cf90 2s ease 0s infinite reverse; } @keyframes animation5shape4-7e96cf90 { 0% { transform: translate(0, 0); } 25% { transform: translate(0, -15px); } 50% { transform: translate(-15px, -15px); } 75% { transform: translate(-15px, 0); } }