前端CSS篇之手写一个正在加载中转圈动画

最新推荐文章于 2024-03-29 18:05:58 发布

千瞱

最新推荐文章于 2024-03-29 18:05:58 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：前端 css 动画

本文链接：https://blog.csdn.net/qq_26822029/article/details/125138634

版权

前端专栏收录该内容

32 篇文章 23 订阅

订阅专栏

前端CSS篇之手写一个正在加载中转圈动画。
在这里插入图片描述

提供一个Google风格的加载中动画，使用SVG+CSS实现，无需javascript。贴上vue代码：

<template>
  <div class="loading">
    <svg width="40" height="40">
      <circle
        class="loading-circle"
        :cx="radius"
        :cy="radius"
        :r="radius - strokeWidth"
        :stroke-width="strokeWidth"
        :stroke="strokeColor"
        fill="transparent"
      />
    </svg>
  </div>
</template>

<script>
export default {
  name: "LoadingComp",
  props: {
    strokeColor: {
      type: String,
      default: "rgb(57, 123, 235)",
    },
    strokeWidth: {
      type: Number,
      default: 3,
    },
    radius: {
      type: Number,
      default: 20,
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.loading {
}

@keyframes loadingAnim {
  0% {
    stroke-dasharray: 20 160;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 120 60;
    stroke-dashoffset: -160;
  }
}

.loading-circle {
  animation: loadingAnim;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
</style>