526互联

vue3 css ts 双重弹跳加载动画

发布时间 2023-06-14 15:14:27作者: yjxQWQ

/双重弹跳加载动画 */
效果如同页面 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>