封装环形加载进度条(Vue插件版和原生js版)
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版)的更多相关文章
- 自己写的页面加载进度条jquery插件
(function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...
- react封装简单的浏览器顶部加载进度条全局组件
在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
- pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- pace.js – 网页自动加载进度条插件
网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- iOS UIWebView 加载进度条的使用-WKWebView的使用,更新2017.6.26
1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...
随机推荐
- nginx配置后端映射(反向代理proxy_pass)
说明:配置反向代理proxy_pass和location无关,location后面加不加 / 都可以 1.配置 proxy_pass 时,当在后面的 url 加上了 /,相当于是绝对路径,则 Ngin ...
- 基于 Apache Hudi 构建增量和无限回放事件流的 OLAP 平台
1. 摘要 在本博客中,我们将讨论在构建流数据平台时如何利用 Hudi 的两个最令人难以置信的能力. 增量消费--每 30 分钟处理一次数据,并在我们的组织内构建每小时级别的OLAP平台 事件流的无限 ...
- 面试官:为什么Vue中的v-if和v-for不建议一起用?
一.作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in item ...
- 3.3 常用Linux命令
1.pwd命令 pwd命令用于显示用户当前所处的工作目录 2.cd命令 cd命令用于切换当前的工作路径,英文全称为"change directory",语法格式为"cd ...
- 攻防世界-MISC:hit-the-core
这是攻防世界MISC高手进阶区的题目,题目如下: 点击下载附件一,解压后得到一个后缀为.core的文件,用string分离一下,得到如下结果: 通过观察发现,每隔四个小写字母就可以看到一个大写字母,刚 ...
- 服务器脚本搭建国基北盛openstack平台
@ 目录 基础环境搭建 控制节点网卡配置 计算节点网卡配置 主机映射 3,关闭防火墙和selinux以及NetworkManager 设置yum源 计算节点分区 配置openrc.sh环境变量 平台组 ...
- MybatisCodeHelperPro简单使用
1.idea安装 2.连接mysql 3.创建实体等关联类 ,选择数据库表右键选择如图 4配置 生成后的 5简单应用 可以直接生成xml 总结:非常的方便快捷.
- SpringBoot从0到0.7——第二天
SpringBoot从0到0.7--第二天 今天来搭建一个登陆界面进行跳转,不带有数据库,看似就很简单的一个界面,却让我学习了好长时间去了解学习他的原理,能看懂的话还是尽量去看源码. 首先创建一个项目 ...
- 1903021121-刘明伟-java第七周作业-客户类测试
项目 内容 课程班级博客链接 19信计班(本) 作业要求链接 作业要求链接 博客名称 1903021121-刘明伟-java第七周作业-客户类测试 要求 每道题要有题目,代码,截图 第一部分: 创建客 ...
- 【多线程】线程休眠 Thread.sleep()
线程休眠 Thread.sleep() sleep (时间) 指定当前线程阻塞的毫秒数: sleep存在异常InterruptedException: sleep时间达到后线程进入就绪状态: slee ...