From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 13:12:48 +0800 Subject: [PATCH] 项目初始化 --- src/components/qiun-data-charts/components/qiun-loading/loading5.vue | 229 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 229 insertions(+), 0 deletions(-) diff --git a/src/components/qiun-data-charts/components/qiun-loading/loading5.vue b/src/components/qiun-data-charts/components/qiun-loading/loading5.vue new file mode 100644 index 0000000..cb93a55 --- /dev/null +++ b/src/components/qiun-data-charts/components/qiun-loading/loading5.vue @@ -0,0 +1,229 @@ +<template> + <view class="container loading6"> + <view class="shape shape1"></view> + <view class="shape shape2"></view> + <view class="shape shape3"></view> + <view class="shape shape4"></view> + </view> +</template> + +<script> + export default { + name: 'loading6', + data() { + return { + + }; + } + } +</script> +<style scoped="true"> +.container { + width: 30px; + height: 30px; + position: relative; +} + +.container.loading6 { + -webkit-animation: rotation 1s infinite; + animation: rotation 1s infinite; +} +.container.loading6 .shape { + width: 12px; + height: 12px; + border-radius: 2px; +} +.container .shape { + position: absolute; + width: 10px; + height: 10px; + border-radius: 1px; +} +.container .shape.shape1 { + left: 0; + background-color: #1890FF; +} +.container .shape.shape2 { + right: 0; + background-color: #91CB74; +} +.container .shape.shape3 { + bottom: 0; + background-color: #FAC858; +} +.container .shape.shape4 { + bottom: 0; + right: 0; + background-color: #EE6666; +} + + +.loading6 .shape1 { + -webkit-animation: animation6shape1 2s linear 0s infinite normal; + animation: animation6shape1 2s linear 0s infinite normal; +} + +@-webkit-keyframes animation6shape1 { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 25% { + -webkit-transform: translate(0, 18px); + transform: translate(0, 18px); + } + 50% { + -webkit-transform: translate(18px, 18px); + transform: translate(18px, 18px); + } + 75% { + -webkit-transform: translate(18px, 0); + transform: translate(18px, 0); + } +} + +@keyframes animation6shape1 { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 25% { + -webkit-transform: translate(0, 18px); + transform: translate(0, 18px); + } + 50% { + -webkit-transform: translate(18px, 18px); + transform: translate(18px, 18px); + } + 75% { + -webkit-transform: translate(18px, 0); + transform: translate(18px, 0); + } +} +.loading6 .shape2 { + -webkit-animation: animation6shape2 2s linear 0s infinite normal; + animation: animation6shape2 2s linear 0s infinite normal; +} + +@-webkit-keyframes animation6shape2 { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 25% { + -webkit-transform: translate(-18px, 0); + transform: translate(-18px, 0); + } + 50% { + -webkit-transform: translate(-18px, 18px); + transform: translate(-18px, 18px); + } + 75% { + -webkit-transform: translate(0, 18px); + transform: translate(0, 18px); + } +} + +@keyframes animation6shape2 { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 25% { + -webkit-transform: translate(-18px, 0); + transform: translate(-18px, 0); + } + 50% { + -webkit-transform: translate(-18px, 18px); + transform: translate(-18px, 18px); + } + 75% { + -webkit-transform: translate(0, 18px); + transform: translate(0, 18px); + } +} +.loading6 .shape3 { + -webkit-animation: animation6shape3 2s linear 0s infinite normal; + animation: animation6shape3 2s linear 0s infinite normal; +} + +@-webkit-keyframes animation6shape3 { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 25% { + -webkit-transform: translate(18px, 0); + transform: translate(18px, 0); + } + 50% { + -webkit-transform: translate(18px, -18px); + transform: translate(18px, -18px); + } + 75% { + -webkit-transform: translate(0, -18px); + transform: translate(0, -18px); + } +} + +@keyframes animation6shape3 { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 25% { + -webkit-transform: translate(18px, 0); + transform: translate(18px, 0); + } + 50% { + -webkit-transform: translate(18px, -18px); + transform: translate(18px, -18px); + } + 75% { + -webkit-transform: translate(0, -18px); + transform: translate(0, -18px); + } +} +.loading6 .shape4 { + -webkit-animation: animation6shape4 2s linear 0s infinite normal; + animation: animation6shape4 2s linear 0s infinite normal; +} + +@-webkit-keyframes animation6shape4 { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 25% { + -webkit-transform: translate(0, -18px); + transform: translate(0, -18px); + } + 50% { + -webkit-transform: translate(-18px, -18px); + transform: translate(-18px, -18px); + } + 75% { + -webkit-transform: translate(-18px, 0); + transform: translate(-18px, 0); + } +} + +@keyframes animation6shape4 { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 25% { + -webkit-transform: translate(0, -18px); + transform: translate(0, -18px); + } + 50% { + -webkit-transform: translate(-18px, -18px); + transform: translate(-18px, -18px); + } + 75% { + -webkit-transform: translate(-18px, 0); + transform: translate(-18px, 0); + } +} +</style> -- Gitblit v1.9.3