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. 安卓记账本开发学习day5之版本兼容问题

    安卓5.0以上版本想要隐藏DatePicker头布局的写法比较复杂,需要一层一层隐藏 int headerId = getContext().getResources().getIdentifier( ...

  2. 1903021116—吉琛—Java第六周作业—类的定义

    项目 内容 课程班级博客链接 19信计班 这个作业要求链接 第六周作业链接 java面向对象的概念和定义 博客名称 学号-姓名-Java第六周作业-题目自拟 要求 每道题要有题目,代码(使用插入代码, ...

  3. Transactional事务,事务嵌套的时候,如果主事务出现问题,子事务执行不需要回滚怎么做?

    如果调用的方法在不在同一个service当中,则只需要在子事务当中的方法上方添加注解即可 下方即是:这就话代表:重新开启一个新的事务 @Transactional(propagation = Prop ...

  4. Divan and bitwise operations

    这是一道比较综合的数学题目,光是吧题目看懂就花了我好一会儿时间,先看看题目吧: 题目分析:对于m段给定连续段的或值,要求出n个数的序列子序列的异或值之和: 题解: 这道题,我们先不要把它当作一个数一个 ...

  5. 2021.07.20 CF1477A Nezzar and Board(最大公因数,未证)

    2021.07.20 CF1477A Nezzar and Board(最大公因数,未证) CF1477A Nezzar and Board - 洛谷 | 计算机科学教育新生态 (luogu.com. ...

  6. C语言超全学习路线(收藏让你少走弯路)

    刚入门是否觉得C语言很难?那可能是你还没找到正确的C语言学习路线,收藏以防找不到,让你少走弯路. 基本语法 选择控制语句 if,swith 循环控制语句 while,for 控制语句相关关键字分析 变 ...

  7. Linux_yum源仓库-本地-网络-练习实验

    1.本地光盘挂载使用yum源 实验环境centos8 系统版本CentOS-8.3.2011-x86_64-dvd1 1)配置前检查 1.1 虚拟机设置选择对应版本镜像文件 1.2 启动虚拟机后处于连 ...

  8. 【Pandas vs SQL】数据分析代码逐行比对,孰优孰劣?

    在数据分析领域,pandas是python数据分析基础工具,SQL是数据库最常用分析语言.二者有相通的地方,也有很大的语法不同,做起数据分析来,谁将更胜一筹呢? 做过业务开发.跟数据库打交道比较多的小 ...

  9. linux中MySQL主从配置(Django实现主从读写分离)

    一 linux中MySQL主从配置原理(主从分离,主从同步) mysql主从配置的流程大体如图: 1)master会将变动记录到二进制日志里面: 2)master有一个I/O线程将二进制日志发送到sl ...

  10. Spring 源码(16)Spring Bean的创建过程(7)属性填充

    知识回顾 上一篇介绍了Spring中三级缓存的singletonObjects.earlySingletonObjects.singletonFactories,Spring在处理循环依赖时在实例化后 ...