极乐门资源网 Design By www.ioogu.com
本文实例为大家分享了环形加载进度条封装代码,供大家参考,具体内容如下
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> <body> <div id="example"></div> </body> <script src="/UploadFiles/2021-04-02/vue.js">原生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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无环形加载进度条封装(Vue插件版和原生js版)的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]