1、效果预览

2、用到的知识

主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性。

在看下面文章之前，你需要了解
<!DOCTYPE html>

<html>

<head>

    <title>svg demo</title>

    <style type="text/css">

        #line{

            transition: all 2s;

            stroke-dasharray:300,320;

            stroke-dashoffset:300;

        }

        svg:hover #line{

            stroke-dashoffset: 0;

        }

        #circle{

            transition: all 2s;

            stroke-dasharray:314,314;

            stroke-dashoffset:314;

        }

        svg:hover #circle{

            stroke-dashoffset:0;

        }

    </style>

</head>

<body>

<h3>线段区域</h3>

<svg width="100%" height="40" >

   <line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" />

</svg>

<h3>圆区域</h3>

<svg  width="200" height="200" viewBox="0 0 200 200">

   <circle id="circle" cx="100" cy="80" r="50"  fill="gray" stroke-width="5" stroke="green" />

</svg>

</body>

</html>

3、使用

有两种方式，一种是直接安装即可使用，一种需要封装。选一种适合自己的即可。

（1）、安装插件
安装Vue插件

npm install loading-vue-component

使用

// main.js

import loading from 'loading-vue-component'

Vue.use(loading)

// app.vue

<template>

  <div id="app">

      <loading :radius="20" :progress="progress" :stroke="2" :color='color'></loading>

  </div>

</template>

<script>

export default {

  name: 'app',

  data() {

    return { progress: 0,color:'#1989fa'}

  }

}

</script>

（2）、封装插件
Vue版

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>loading</title>

    <style>

    html,

    body {

        display: flex;

        align-items: center;

        justify-content: center;

        height: 100%;

        position: relative;

        margin: 0;

        padding: 0;

    }

    circle {

        transition: stroke-dashoffset 0.15s;

        transform: rotate(-90deg);

        transform-origin: 50% 50%;

    }

    .txt{

        font-size: 14px;

        text-align: center;

    }

    .loading{

        padding:40vh;

    }

    </style>

</head>

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119327892

封装环形加载进度条（Vue插件版和原生js版）的更多相关文章

  1. 自己写的页面加载进度条jquery插件

    (function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...

  2. react封装简单的浏览器顶部加载进度条全局组件

    在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...

  3. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  4. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  5. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  6. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  7. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

  8. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  9. iOS UIWebView 加载进度条的使用-WKWebView的使用，更新2017.6.26

    1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...

随机推荐

  1. 《手写Mybatis》第4章：Mapper XML的解析和注册使用

    作者:小傅哥 系列:https://bugstack.cn/md/spring/develop-mybatis/2022-03-20-%E7%AC%AC1%E7%AB%A0%EF%BC%9A%E5%B ...

  2. thymeleaf模板使用

    使用模板页面,实现在同一个页面展现不同数据,controller实现页面跳转的时候就不在需要打开新页面

  3. 面试官：为什么Vue中的v-if和v-for不建议一起用?

    一.作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in item ...

  4. Educational Codeforces Round 113 (Rated for Div. 2)

    多拿纸画画 ! ! ! Problem - B - Codeforces 题意 给出n个数字(数字为1或2), 1代表这第i个选手没有输过,  2代表这第i个选手至少赢一次 输出为n*n矩阵( i行j ...

  5. Ansible Notes: Tower Credential的本质

    Ansible AWX/Tower credential 的本质 Ansible Tower (社区版本叫AWX)用credential这个资源来对象来存储playbook运行过程中用到的机密信息.比 ...

  6. 国产芯片DP9637-K总线收发器替代L9637D芯片和SI9241

    DP9637可以替代L9637D,低成本解决方案,只需要做简单硬件修改,感兴趣可以留言或者联系小编了解详细资料.   主要特性    电压工作范围 6V≤VBAT≤36V    具有超低休眠电流 ...

  7. 使用 bitnami/postgresql-repmgr 镜像快速设置 PostgreSQL HA

    什么是 PostgreSQL HA? 此 PostgreSQL 集群解决方案包括 PostgreSQL 复制管理器(replication manager),这是一种用于管理 PostgreSQL 集 ...

  8. springboot整合freemark,thymeleaf

    先在pom文件引入freemark,thymeleaf的依赖,thymeleaf的html文件放在Resource-templates-thymeleaf目录下,freekmarker的ftl文件放在 ...

  9. liunx对磁盘进行配额限制

    说明,我们给你一个分区进行磁盘配额进行限制 1.首先我们要进行那个分区进行限制,通过修改配置文件加上uquota ,然后再重启一下系统 二.quota 命令用于管理设备的磁盘容量配额,语法格式为 xf ...

  10. 看完复旦博士用Python统计核酸结果后，我照着也写了一个

    前几天,人民日报公众号报道了复旦博士生自己写代码,通过OCR和正则表达式统计核酸截图结果.具体文章见:https://mp.weixin.qq.com/s/l8u9JifKDlRDoz32-jZWQg ...