html原生js进度条圆形,环形加载进度条封装（Vue插件版和原生js版）

本文实例为大家分享了环形加载进度条封装代码，供大家参考，具体内容如下

1、效果预览

2、用到的知识

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

在看下面文章之前，你需要了解

svg demo

#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;

}

线段区域

圆区域

3、使用

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

(1)、安装插件

安装Vue插件

npm install loading-vue-component

使用

// main.js

import loading from 'loading-vue-component'

Vue.use(loading)

// app.vue

export default {

name: 'app',

data() {

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

}

}

(2)、封装插件

Vue版

loading

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;

}

// 子组件

const Loading = Vue.component('Loading', {

props: {

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: `

:height="radius * 2"

:width="radius * 2"

>

:stroke="color"

:stroke-dasharray="circumference + ' ' + circumference"

:style="{ strokeDashoffset: strokeDashoffset }"

:stroke-width="stroke"

fill="transparent"

:r="normalizedRadius"

:cx="radius"

:cy="radius"

/>

加载中

`

});

// 父组件

new Vue({

el: '#example',

components: {

'Loading': Loading

},

data() {

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

},

mounted () {

setTimeout(() => {

this.show = false

},3000)

},

template: `

`

});

原生js版

progress

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;

}

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);

}

})

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