/双重弹跳加载动画 */
效果如同页面 https://codepen.io/yjx123/pen/zYMvbML
<a href="javascript:void(0)" @click="startLoading">
<inline-svg :src="getAssetPath(iconPath)"></inline-svg>
<div
:style="{ width: spinkitSize, height: spinkitSize }"
class="sk-double-bounce"
v-show="loading"
>
<div
class="sk-child sk-double-bounce-1"
:style="{ backgroundColor: spinnerColor }"
></div>
<div
class="sk-child sk-double-bounce-2"
:style="{ backgroundColor: spinnerColor }"
></div>
</div>
</a>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { getAssetPath } from "@/core/helpers/assets";
import { useI18n } from "vue-i18n";
import { ElNotification } from "element-plus";
const { t } = useI18n();
// const props = defineProps({
// data: Object,
// text: String,
// }); loading: boolean = true;
const spinkitSize = "16px"; // 设置加载动画的尺寸
const spinnerColor = "#13227a"; // 设置加载动画的颜色
const loading = ref(false);
const bouncing = ref(false);
const iconPath = ref("media/icons/duotune/arrows/arr00111.svg");
const startLoading = () => {
bouncing.value = true;
iconPath.value = "";
loading.value = true;
setTimeout(() => {
bouncing.value = false;
loading.value = false;
iconPath.value = "media/icons/duotune/arrows/arr00111.svg";
open4();
}, 2000);
};
const open4 = () => {
ElNotification({
title: "Error",
message: t("prompt5"),
type: "error",
position: "bottom-right",
});
};
</script>
<style scoped>
user agent stylesheet a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
/* /双重弹跳加载动画 */
.sk-double-bounce {
width: 100%;
height: 100%;
position: relative;
margin: auto;
display: inline-block;
}
.sk-child {
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
animation: sk-double-bounce 2s infinite ease-in-out;
}
.sk-double-bounce-2 {
animation-delay: -1s;
}
@keyframes sk-double-bounce {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
</style>
标签:动画,const,100%,ts,value,sk,vue3,css,加载
From: https://www.cnblogs.com/xxdmua/p/17480304.html