.container.data-v-3b2040f4 { width: 30px; height: 30px; position: relative; } .container.loading6.data-v-3b2040f4 { animation: rotation 1s infinite; } .container.loading6 .shape.data-v-3b2040f4 { width: 12px; height: 12px; border-radius: 2px; } .container .shape.data-v-3b2040f4 { position: absolute; width: 10px; height: 10px; border-radius: 1px; } .container .shape.shape1.data-v-3b2040f4 { left: 0; background-color: #1890ff; } .container .shape.shape2.data-v-3b2040f4 { right: 0; background-color: #91cb74; } .container .shape.shape3.data-v-3b2040f4 { bottom: 0; background-color: #fac858; } .container .shape.shape4.data-v-3b2040f4 { bottom: 0; right: 0; background-color: #ee6666; } .loading6 .shape1.data-v-3b2040f4 { animation: animation6shape1-3b2040f4 2s linear 0s infinite normal; } @keyframes animation6shape1-3b2040f4 { 0% { transform: translate(0, 0); } 25% { transform: translate(0, 18px); } 50% { transform: translate(18px, 18px); } 75% { transform: translate(18px, 0); } } .loading6 .shape2.data-v-3b2040f4 { animation: animation6shape2-3b2040f4 2s linear 0s infinite normal; } @keyframes animation6shape2-3b2040f4 { 0% { transform: translate(0, 0); } 25% { transform: translate(-18px, 0); } 50% { transform: translate(-18px, 18px); } 75% { transform: translate(0, 18px); } } .loading6 .shape3.data-v-3b2040f4 { animation: animation6shape3-3b2040f4 2s linear 0s infinite normal; } @keyframes animation6shape3-3b2040f4 { 0% { transform: translate(0, 0); } 25% { transform: translate(18px, 0); } 50% { transform: translate(18px, -18px); } 75% { transform: translate(0, -18px); } } .loading6 .shape4.data-v-3b2040f4 { animation: animation6shape4-3b2040f4 2s linear 0s infinite normal; } @keyframes animation6shape4-3b2040f4 { 0% { transform: translate(0, 0); } 25% { transform: translate(0, -18px); } 50% { transform: translate(-18px, -18px); } 75% { transform: translate(-18px, 0); } }