圆形进度条

最新推荐文章于 2024-05-07 15:08:09 发布
最新推荐文章于 2024-05-07 15:08:09 发布
阅读量463 收藏
点赞数
文章标签： html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40285497/article/details/84328663
版权

今天做一个圆环进度条，html加css，原理很简单，看下面这段代码就知道了

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
        }
        *{
            box-sizing: border-box;
        }

        .circle-progress{
            position: relative;
            display: flex;
            width: 150px;
            height: 150px;
            border: 1px solid #000;
        }
        .circle-progress .annulus{
            position: absolute;
            left: 0;
            top: 0;
            border: 20px solid #f00;
            width: 50%;
            height: 100%;
            border-right: none;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            transform-origin: right 50%;
        }
        .left-circle{
            animation: rotate_1 3s linear forwards;
        }
        .right-circle{
            animation: rotate_2 6s linear forwards;
        }
        .left-shade{
            position: absolute;
            background-color: #fff;
            left: 0;
            top: 0;
            width: 50%;
            height: 100%;
            animation: hidden_1 0s 3s forwards;
        }
        @keyframes rotate_1 {
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(180deg);
            }
        }
        @keyframes rotate_2 {
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(360deg);
            }
        }
        @keyframes hidden_1 {
            from{
                background-color: #fff;
            }
            to{
                background-color: transparent;
            }
        }
    </style>
</head>
<body>
<div class="circle-progress">
    <div class="annulus left-circle"></div>
    <div class="annulus right-circle"></div>
    <div class="left-shade"></div>
</div>
</body>
</html>

为了之后使用方便，下面要做的是将它封装起来，使用时调用一个函数，传入参数就能够实现快慢，是否显示百分比等！！！

下面这段代码包含了圆形进度条的html,css,js可以直接改变css改变样式，也可以直接调用封装好的js方法改变样式，需要的还可以加，当前这个代码不带虚线的进度条，需要虚线进度条可以看我另一篇博客https://blog.csdn.net/qq_40285497/article/details/84100682

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
        }
        *{
            box-sizing: border-box;
        }

        .circle-progress{
            position: relative;
            display: flex;
            width: 150px;
            height: 150px;
        }
        .circle-progress .annulus{
            position: absolute;
            left: 0;
            top: 0;
            border: 20px solid #f00;
            width: 50%;
            height: 100%;
            border-right: none;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            transform-origin: right 50%;
        }
        .circle-progress .left-circle{
            animation: rotate_1 3s linear forwards;
        }
        .circle-progress .right-circle{
            animation: rotate_2 6s linear forwards;
        }
        .circle-progress .left-shade{
            position: absolute;
            background-color: #fff;
            left: 0;
            top: 0;
            width: 50%;
            height: 100%;
            animation: hidden_1 0s 3s forwards;
        }
        .circle-progress .percent{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        @keyframes rotate_1 {
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(180deg);
            }
        }
        @keyframes rotate_2 {
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(360deg);
            }
        }
        @keyframes hidden_1 {
            from{
                background-color: #fff;
            }
            to{
                background-color: transparent;
            }
        }
    </style>
</head>
<body>
<div id="circleProgress"></div>

<script>
    function circleProgress(opt) {
        var speed = opt.speed;
        var size = opt.size;
        var borderWidth = opt.borderWidth;
        var needPercent = opt.needPercent;
        var borderColor = opt.borderColor;
        var fontSize = opt.fontSize;
        var fontWeight = opt.fontWeight;
        var fontColor = opt.fontColor;

        //生成图
        var html = '<div class="circle-progress">\n' +
                    '    <div class="annulus left-circle"></div>\n' +
                    '    <div class="annulus right-circle"></div>\n' +
                    '    <div class="left-shade"></div>\n' +
                    '    <div class="percent"></div>\n' +
                    '</div>';
        var box = document.querySelector('#circleProgress');
        box.innerHTML = html;

        //改变速度
        if(speed){
            document.querySelector('#circleProgress .left-circle').style.animation = 'rotate_1 '+speed+'s linear forwards';
            document.querySelector('#circleProgress .right-circle').style.animation = 'rotate_2 '+speed*2+'s linear forwards';
            document.querySelector('#circleProgress .left-shade').style.animation = 'hidden_1 0s '+speed+'s forwards';
        }

        //改变大小
        if(size){
            document.querySelector('#circleProgress .circle-progress').style.width = size+'px';
            document.querySelector('#circleProgress .circle-progress').style.height = size+'px';
            document.querySelectorAll('#circleProgress .annulus')[0].style.borderWidth = size/5+'px';
            document.querySelectorAll('#circleProgress .annulus')[0].style.borderTopLeftRadius = size+'px';
            document.querySelectorAll('#circleProgress .annulus')[0].style.borderBottomLeftRadius = size+'px';
            document.querySelectorAll('#circleProgress .annulus')[1].style.borderWidth = size/5+'px';
            document.querySelectorAll('#circleProgress .annulus')[1].style.borderTopLeftRadius = size+'px';
            document.querySelectorAll('#circleProgress .annulus')[1].style.borderBottomLeftRadius = size+'px';
        }

        //改变边宽
        if(borderWidth){
            document.querySelectorAll('#circleProgress .annulus')[0].style.borderWidth = borderWidth+'px';
            document.querySelectorAll('#circleProgress .annulus')[1].style.borderWidth = borderWidth+'px';
        }

        //改变颜色
        if(borderColor){
            document.querySelectorAll('#circleProgress .annulus')[0].style.borderColor = borderColor;
            document.querySelectorAll('#circleProgress .annulus')[1].style.borderColor = borderColor;
        }

        //显示百分比
        if(needPercent){
            var percent = 0;
            var time = speed*2000/100;
            var percentBox = document.querySelector('#circleProgress .percent');
            var timer = setInterval(function () {
                percent++;
                percentBox.innerText = percent+'%';
                if(percent == 100){
                    clearInterval(timer);
                }
            },time)

            //字体大小
            if(fontSize){
                percentBox.style.fontSize = fontSize + 'px';
            }

            //字体加粗
            if(fontWeight){
                percentBox.style.fontWeight = fontWeight;
            }

            //字体颜色
            if(fontColor){
                percentBox.style.color = fontColor;
            }
        }

    }

    circleProgress({
        speed:1,
        needPercent:true,
        size:200,
        borderWidth:20,
        borderColor:'#0f0',
        fontSize:20,
        fontWeight:600,
        fontColor:'#f00'
    })
</script>
</body>
</html>

 

一叶知秋9307
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
circleProgress 插件环形进度条
qq_34101362的博客
03-16 551
circleProgress 插件环形进度条 效果图 <!-- circleProgress 插件环形进度条--> <div class="clue-hd-right"> <a href="javascript:;" class="btnw">数据分析</a> <div class="redate-b...
微信小程序 环形进度条_Web微信小程序圆环形进度条组件CSS实现
weixin_29266749的博客
01-17 1278
首先理解小程序的自定义组件。原理看了网上的一些教程，实现圆环用的是两个半圆的旋转，通过overflow: hidden来控制的。首先绘制底层容器，一个正方形，通过圆角变圆，用来作为未读进度的圆环。然后在上面绘制两个半矩形，在圆形矩形中绘制两个半圆(通过border-left/right/top/bottom加上旋转角来实现，默认的旋转角为135°)。 通过控制半圆矩形(即半圆的父容器)，由于ov...
实现一个圆形进度条（vue）
JQ_zhong
09-15 3073
实现方式：首先是用svg画两个圆，同圆心同半径的两个圆，然后把颜色都设置成透明，利用圆的边框来实现。给两个圆设置相同的边框宽度，并且设置颜色（设置一个透明，一个有颜色）；然后创建stroke-dasharray实线/虚线线条，长度（值）为 2πr，即圆的周长；将stroke-dashoffset设置为动态属性，这个属性是“定义实线/虚线的起点距离 路径 的起点的距离”，利用这个属性来当做进度条，从而控制进度。 <template> <div id="pro"> <b
原生 js 画环形进度条
最新发布
工作中遇到问题记录
05-07 568
原生 js 画环形进度条
一步一步带你实现自定义圆形进度条（详解）
朝哥的博客
06-28 5676
每次看到别人做出炫酷的都会想，这个应该很难吧？这是心理上先入为主的就这么认为了，其实实现很简单，下面一步一步的详细剖析自定义圆形进度条的步骤。首先看效果图： 篇幅有点长，耐心看完肯定get新技能。看每一个视图都包含了些什么。 最里层一个蓝色圆形 中间一层显示进度的橙色扇形圆弧 最外层一个红色圆环 显示进度百分比的文字以及下方提示文字 下面来一步一步实现： 创建一个类继承View，并实现几个构造方法
小程序自定义圆形进度环
认真和努力总没有错
10-21 427
<view class="circle-progress" style="box-shadow: inset 0 0 0 {{width}}rpx {{bgColor}}; width:{{size}}rpx ;height:{{size}}rpx" > <view class="circle-progress-item circle-progress-item--l"> <view class="circle-progress-bar" style="t
小程序进度条_小程序用wxml+wxss描绘圆形进度条
weixin_39618275的博客
12-18 388
做一个这样的圆形进度条，不用canvas，当然值是可控的。为什么要用wxml+wxss描绘？其实canvas也可以。并且主流就是用canvas画，但是canvas画会有一个问题，在手机app中canvas的层级是最高的。在这个项目中，有个可以上拉的记录，如果用canvas画进度条，那么在手机端时，这个上拉框拉到进度条的高度时，进度条会浮在上拉框的上面。其实本来上拉框用cover-view...
自定义圆形进度条
whq_sky的博客
12-30 277
自定义圆形进度条 */ public class RoundProgress extends View { //    //    属性 //    private int roundColor = Color.GRAY; //    private int roundProgressColor = Color.RED; //    pr
Unity+UGUI 圆形进度条
07-12
本教程将详细介绍如何使用Unity和UGUI来创建一个圆形进度条，并探讨其在进度指示和拖拽验证码功能上的应用。 一、UGUI基础知识 UGUI是Unity 4.6版本引入的新的UI系统，它基于Canvas进行布局，通过 RectTransform ...
WPF实现的圆形进度条
03-16
在Windows Presentation Foundation (WPF) 中，开发人员可以利用丰富的图形功能来创建各种自定义UI元素，其中之一就是圆形进度条。圆形进度条通常用于展示一个任务的进度，它以直观的方式呈现百分比完成状态，与传统...
vue圆环进度条_vue圆环形进度条组件
weixin_39936558的博客
01-12 1686
1.先来个圆形背景，为了后续方便定位，请给它安排上position属性。CircleProgress.vueexport default {name: "circle-progress"};.circle-progress {position: relative;left: 0;top: 0;width: 100%;height: 100%;background-color: #5140b4;bo...
echarts实现圆形进度条，圆环中心显示进度
圆圆的 JavaScript 博客
11-03 8813
用echarts画圆形进度条，圆环中心显示进度
vue造轮子之圆形进度条
Only_ruiwen的博客
01-07 2922
在github上看到一个圆形进度条组件，比较适合于我现在的业务需求，然后就拷贝下来放进我的项目。但是cv程序员并不是我想要。所以就研究了一下它的源码，没想到的是源码竟然是如此简单和通俗易懂，先附上原作者的github地址和效果图。 https://github.com/cumt-robin/vue-awesome-progress 一.canvas基本用法 由于该组件是基于canvas完成的，所...
纯css制作圆形进度条
tdl081071tdy的博客
06-04 2323
效果图大概是这样的 第一步 先定义出一个方形盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style&g.
带进度的圆形进度条的实现
刘信的博客
04-29 1840
今天通过自定义View来实现一个带进度的圆形进度条，实现的最终效果如下图所示： 现在来讲一下设计的思路：首先这个进度条可以自定义小圆角矩形的数量、小圆角矩形大小、小圆角矩形的圆角角度、未完成进度时的颜色，完成进度时的颜色、文字大小、文字颜色、圆形半径，所以需要自定义这些参数；那如何画这个圆形进度呢？我们需要先画一个小圆角矩形，再旋转画布再画矩形，如图这里有12个小圆角矩形，每次旋转360/1...
Kotlin自定义圆形进度条
xuzhb
04-25 1064
实现一个圆形进度条，效果如下： 自定义布局属性： <!--圆形进度条--> <declare-styleable name="CircleProgressBar"> <attr name="max" format="integer" /> <attr name="progress" format="in...
圆形进度条 uniapp
01-31
以下是在uniapp中使用圆形进度条的示例： 1. 首先，需要导入圆形进度条组件。在你的页面文件中，使用import语句导入组件： ```javascript import circleProgressBar from '@/components/circle-progress-bar/circle...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值