溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了環形加載進度條封裝代碼，供大家參考，具體內容如下
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>
<h4>線段區域</h4>
<svg width="100%" height="40" >
<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" />
</svg>
<h4>圓區域</h4>
<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>
<body>
<div id="example"></div>
</body>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script>
// 子組件
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: `
<div class='loading'>
<svg
: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 class='txt'>加載中</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 class="progress-ring" width="120" height="120">
<circle class="progress-ring__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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
