预约微信小程序开发_环形加载进度条封装(Vue插件版和原生js版

环形加载进度条封装(Vue插件版和原生js版)       这篇文章主要为大家详细介绍了环形加载进度条封装,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 ponent

使用

// main.js
import loading from 'ponent'
Vue.use(loading)

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 
 body 
 div id="example" /div 
 /body 
 script src=".10/dist/vue.js" /script 
 script 
// 子组件
const Loading = ponent('Loading', {
 pro凡科抠图: {
 radius: Number,
 progress: Number,
 stroke: Number,
 color:String
 data() {
 const progressed = this.progress;
 const colored = this.color
 const normalizedRadius = this.radius - this.stroke * 2; // 净半径,总半径-2*路径宽
 const circumference = normalizedRadius * 2 * Math.PI; // 周长,2πd
 return {
 normalizedRadius,
 circumference,
 progressed,
 colored
 mounted() {
 // emulating progress
 const interval = setInterval(() = {
 this.progressed += 25;
 if (this.progressed 101) {
 this.colored='white'
 this.colored='#1989fa'
 }, 150);
 computed: {
 strokeDashoffset() {
 return this.circumference - this.progressed / 100 * this.circumference;
 template: `
 div 
 :height="radius * 2"
 :width="radius * 2"
 circle
 :stroke="color"
 :stroke-dasharray="circumference + ' ' + circumference"
 : :stroke-width="stroke"
 fill="transparent"
 :r="normalizedRadius"
 :cx="radius"
 :cy="radius"
 /svg 
 p 加载中 /p 
 /div 
// 父组件
new Vue({
 el: '#example',
 components: {
 'Loading': Loading
 data() {
 return { progress: 0,color:'#1989fa',show:true}
 mounted () {
 setTimeout(() = {
 this.show = false
 },3000)
 template: `
 div 
 Loading :radius="20" :progress="progress" :stroke="2" :color='color' v-show='show' /Loading 
 /div 
 /script 
 /html 

原生js版

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title progress /title 
 style 
 html, body {
 background-color: #333;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
 position: relative;
.progress-ring__circle {
 transition: 0.35s stroke-dashoffset;
 transform: rotate(-90deg);
 transform-origin: 50% 50%;
input {
 position: fixed;
 top: 10px;
 left: 10px;
 width: 80px;
 /style 
 /head 
 body 
 svg width="120" height="120" 
 circle stroke="white" stroke-width="4" fill="transparent" r="52" cx="60" cy="60" / 
 /svg 
 input value="35" type="number" step="5" min="0" max="100" placeholder="progress" 
 /body 
 script type="text/javascript" 
var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
 const offset = circumference - percent / 100 * circumference;
 circle.style.strokeDashoffset = offset;
const input = document.querySelector('input');
setProgress(input.value);
input.addEventListener('change', function(e) {
 if (input.value 101 input.value -1) {
 setProgress(input.value);
 /script 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读