精华内容
下载资源
问答
  • 原生js百分比进度条效果,可以实现百分比进度条外观样式
  • 百分比进度条

    2018-09-30 17:39:19
    简单的百分比进度条,可以任意修改你想要的长度,宽度.一步修改,轻松实现.
  • 主要介绍了jQuery实现的简单百分比进度条效果,结合简单实例形式分析了jQuery针对页面元素的运算与动态操作相关操作技巧,需要的朋友可以参考下
  • WPF百分比进度条

    2017-11-22 16:11:46
    使用WPF的ProgressBar实现百分比进度条,颜色和背景都有设置
  • 主要为大家详细介绍了Android自定义View实现水平带数字百分比进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • C 复制文件显示百分比进度条,不过本程序的外观样式有点个性哦,进度条是基于小图片实现的,使用的是GIF动画图片,和Windows中的复制文件窗口大致相同。  本程序的进度条和复制文件模块已封装在一个MFC库中,便于...
  • jQuery圆形百分比进度条插件circleChart.js,jQuery圆形百分比进度条插件circleChart.js
  • 基于jquery展示条状百分比占比图,非bootstrap样式无需引用bootstrap的css
  • 一个提供程序执行的进度显示和百分比进度条的库
  • 主要介绍了java控制台输出百分比进度条示例,需要的朋友可以参考下
  • 10款时尚漂亮的jQuery css3百分比进度条动画特效,10种样式各有特色,有动感效果、发光效果等。非常不错的网页进度条插件。
  • jqbar.js柱状图动态百分比进度条特效
  • jquery和angularJS两种百分比进度条实现方式
  • HTML5百分比进度条.zip

    2019-05-23 15:42:09
    HTML5百分比进度条是一款基于jQuery实现的百分比进度条特效代码,有红、黄、绿三种颜色渐变效果,分别代表不同百分比进度,百分比进度越大颜色越向绿色进行渐变。
  • 效果描述: 一个非常简单的纯js实现的loading动画效果 由于没有实际的进度显示 故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 ...
  • 效果描述: 一个非常简单的纯js实现的loading动画效果 由于没有实际的进度显示 故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 使用方法: 1、将CSS样式拷贝...
  • 这是一款基于JavaScript和CSS3的3D环形百分比进度条图表,它可以展示当前数据的百分比情况,与之前分享过的一款HTML5 SVG环形图表应用相比,这款环形图表应用的特点是它的外观呈现3D立体的视觉效果,而且实用性也是...
  • 多种酷炫的自定义ProgressBar的圆形加载进度条源码,带百分比进度显示
  • 一个背景图片,用定位来显示百分比。左右写两个盒子。代码思路第一种:给父级加个定位position: relative;在加一个背景颜色。用css3-moz-linear-gradient样例:background: -moz-linear-gradient(top, #000000 0%, #...

    实践思路

    两种解决方案,简单和繁琐。

    一个背景图片,用定位来显示百分比。

    左右写两个盒子。

    代码思路

    第一种:

    给父级加个定位position: relative;

    在加一个背景颜色。用css3-moz-linear-gradient

    样例:background: -moz-linear-gradient(top, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 50%, #ffffff 100%); /* FF3.6-15 */

    给每个span都分别定位position: absolute;定位按照设计图走。

    每个span都不要背景颜色。

    另外我span的命名都是瞎起的,你运用到自己的项目中,要起含义一致的。

    其他的,我觉得就是ajax请求,并把获得的数据覆盖上。

    关于百分比的参数,你可以跟后台沟通,可以直接让他把对应的值告诉你,你在把获取的值,拼到样式里。这个就需要你跟后台人员对接了。

    购买支持

    60%

    40%

    购买支持

    第二种:

    给浮动的两个div分别写一种不同颜色的背景。其他的就没有什么区别了。

    购买支持

    60%

    40%

    购买支持

    展开全文
  • 圆形百分比进度条效果

    千次阅读 2019-05-20 16:43:56
    今天写篇文章和大家分享一个常用的效果,圆形百分比进度条。前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步讲解。 如果您觉得对您有帮助的话,请给我个赞或...

    一、前言

    最近有点懈怠啊,没怎么整理发布博客。今天写篇文章和大家分享一个常用的效果,圆形百分比进度条。前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步讲解。

    如果您觉得对您有帮助的话,请给我个赞或评论,谢谢~

    先放效果图:
    在这里插入图片描述
    参考别人的链接:HTML+CSS 实现环形比例图效果

    二、整体思路

    1.设置一个浅灰色的圆当背景,里面只有两个子元素,
    一个在右侧的浅蓝色半圆,一个小一点的白色圆在中间做遮罩以及显示文字。

    <div class="bg">
    	<div class="circle-right"></div>
    	<div class="text">%</div>
    </div>
    

    在这里插入图片描述

    2.当进度小于等于50%时,往右侧浅蓝色的半圆里添加一子元素,是个填充满它的灰色半圆,
    根据进度的值对该灰色半圆进行顺时针旋转,就会显示出代表进度的浅蓝色。
    圆一圈是360度,我们这里的满进度是100,
    那当进度为10%时,就让灰色半圆顺时针旋转36度,就可以显示出36度范围的浅蓝色。

    <div class="bg">
    	<div class="circle-right">
    		<div class="mask-right" style="transform:rotate(36deg)"></div>
    	</div>
    	<div class="text">10%</div>
    </div>
    

    在这里插入图片描述
    在这里插入图片描述

    3.当进度大于50时,往右侧浅蓝色半圆后面添加一个元素,是个左侧的浅蓝色半圆,
    该左侧半圆里包含一子元素是个填充满它的灰色半圆,于是左侧展示的效果是灰色半圆。
    右侧浅蓝色半圆代表进度50,剩下的进度则是左侧半圆里灰色半圆的顺时针旋转度数,来展示剩下的浅蓝色进度。
    例如当进度为60%时,右侧不动,左侧半圆里灰色半圆顺时针旋转36度,来展示36度范围的浅蓝色。

    <div class="bg">
    	<div class="circle-right"></div>
    	<div class="circle-left">
    		<div class="mask-left" style="transform: rotate(36deg);"></div>
    	</div>
    	<div class="text">60%</div>
    </div>
    

    在这里插入图片描述
    在这里插入图片描述

    三、完整案例

    通过上面的介绍,我想大家对这个实现的流程已经有了思路,现在我放出完整的demo给大家,直接复制就可以看到效果:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>圆形百分比进度条效果</title>
    		<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.bg{
    			width: 200px;
    			height: 200px;
    			border-radius: 100%;
    			background: #ccc;
    			position: relative;
    			margin: 20px auto;
    		}
    		.circle-right, .circle-left, .mask-right, .mask-left{
    			width: 200px;
    			height: 200px;
    			border-radius: 100%;
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    		.circle-right, .circle-left{
    			background: skyblue;
    		}
    		.mask-right, .mask-left{
    			background: #ccc;
    		}
    		.circle-right, .mask-right{
    			clip: rect(0,200px,200px,100px);
    		}
    		.circle-left, .mask-left{
    			clip: rect(0,100px,200px,0);
    		}
    		.text{
    			width: 160px;
    			height: 160px;
    			line-height: 160px;
    			text-align: center;
    			font-size: 34px;
    			color: deepskyblue;
    			border-radius: 100%;
    			background: #fff;
    			position: absolute;
    			top: 20px;
    			left: 20px;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="bg">
    			<div class="circle-right"></div>
    			<div class="text">90%</div>
    		</div>
    		
    		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//获取百分比值
    				var value = parseInt($('.text').html());
    				
    				//当百分比小于等于50
    				if(value <= 50){
    					var html = '';
    					
    					html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
    					
    					//元素里添加子元素
    					$('.circle-right').append(html);
    				}else{
    					value -= 50;
    					var html = '';
    					
    					html += '<div class="circle-left">';
    					html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
    					html += '</div>';
    					
    					//元素后添加元素
    					$('.circle-right').after(html);
    				}
    			})
    		</script>
    		
    	</body>
    </html>
    

    四、添加过渡

    在完成我们要的效果后,我们可以给它添加一个过渡的效果,我这里是用计时器来完成的,过渡的其实不是很自然,大家也可以用其他的方式来实现。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>圆形百分比进度条效果</title>
    		<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.bg{
    			width: 200px;
    			height: 200px;
    			border-radius: 100%;
    			background: #ccc;
    			position: relative;
    			margin: 20px auto;
    		}
    		.circle-right, .circle-left, .mask-right, .mask-left{
    			width: 200px;
    			height: 200px;
    			border-radius: 100%;
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    		.circle-right, .circle-left{
    			background: skyblue;
    		}
    		.mask-right, .mask-left{
    			background: #ccc;
    		}
    		.circle-right, .mask-right{
    			clip: rect(0,200px,200px,100px);
    		}
    		.circle-left, .mask-left{
    			clip: rect(0,100px,200px,0);
    		}
    		.text{
    			width: 160px;
    			height: 160px;
    			line-height: 160px;
    			text-align: center;
    			font-size: 34px;
    			color: deepskyblue;
    			border-radius: 100%;
    			background: #fff;
    			position: absolute;
    			top: 20px;
    			left: 20px;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="bg">
    			<div class="circle-right"></div>
    			<div class="text">10%</div>
    		</div>
    		
    		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    		<script type="text/javascript">
    			$(function(){				
    				//获取百分比值
    				var num = parseInt($('.text').html());
    				
    				//通过计时器来显示过渡的百分比进度
    				var temp = 0;
    				var timer = setInterval(function(){
    					calculate(temp);
    					//清除计时器结束该方法调用
    					if(temp == num){
    						clearInterval(timer);
    					}
    					temp++;
    				},30)
    
    				//改变页面显示百分比
    				function calculate(value){
    					//改变页面显示的值
    					$('.text').html(value + '%');
    					
    					//清除上次调用该方法残留的效果
    					$('.circle-left').remove();
    					$('.mask-right').remove();
    					
    					//当百分比小于等于50
    					if(value <= 50){
    						var html = '';
    						
    						html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
    						
    						//元素里添加子元素
    						$('.circle-right').append(html);
    					}else{
    						value -= 50;
    						var html = '';
    						
    						html += '<div class="circle-left">';
    						html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
    						html += '</div>';
    						
    						//元素后添加元素
    						$('.circle-right').after(html);
    					}
    				}
    			})
    		</script>
    		
    	</body>
    </html>
    
    
    展开全文
  • 3款漂亮的html5+css3 3D百分比进度条动画特效,可缩放和拖动的3D滑块进度条样式。
  • 主要介绍了jquery实现模拟百分比进度条渐变效果代码,涉及jQuery基于时间函数操作页面元素样式变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 实现百分数进度条控制.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • 是一个圆环形状的反映真实进度的进度条百分比的进度文字跟随已完成进度的圆弧转动。以下是效果图: 这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小。 先说一下思路:这个View一共分为三部分:第一...
  • 这篇文章主要介绍了jQuery实现的简单百分比进度条效果,结合简单实例形式分析了jQuery针对页面元素的运算与动态操作相关操作技巧,需要的朋友可以参考下JSP页面1.添加table标签 正在进行保存,用时较长,请稍后... 这...

    这篇文章主要介绍了jQuery实现的简单百分比进度条效果,结合简单实例形式分析了jQuery针对页面元素的运算与动态操作相关操作技巧,需要的朋友可以参考下

    JSP页面

    1.添加table标签

    正在进行保存,用时较长,请稍后...
      

    这个table标签要隐藏,进度条执行的时候再显示。id为tdOne和tdTwo分别为进度条的蓝色和灰色区域。

    2.添加js代码

    /**添加带百分比的进度条*/var xmlHttp;//创建ajax引擎function createXMLHttpRequest() { if (window.XMLHttpRequest) {

    xmlHttp = new XMLHttpRequest();

    } else if (window.ActiveXObject) { try {

    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e1) {try {

    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    } catch (e2) {

    }

    }

    }

    } function loading() {

    createXMLHttpRequest();

    clearLoad();var url = "elecCommonMsgAction_progressBar.do";

    xmlHttp.open("GET", url, true);

    xmlHttp.onreadystatechange = createCallback;

    xmlHttp.send(null);

    } function createCallback() {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {//每隔1秒钟执行一次percentServer()方法,直到当前访问结束setTimeout("percentServer()", 1000);

    }

    }

    } function percentServer() {

    createXMLHttpRequest();var url = "elecCommonMsgAction_progressBar.do";

    xmlHttp.open("GET", url, true);

    xmlHttp.onreadystatechange = updateCallback;

    xmlHttp.send(null);

    } function updateCallback() {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {//获取XML数据中的percent存放的百分比的值var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;var tdOne = document.getElementById("tdOne");var progressPersent = document.getElementById("progressPersent");//改变蓝色区域的宽度tdOne.width = percent_complete + "%";//将百分比的数值显示到页面上progressPersent.innerHTML = percent_complete + "%";//如果计算获取的百分比的数值没有达到100,则继续调用方法,直到操作结束为止if (percent_complete < 100) {

    setTimeout("percentServer()", 1000);

    }

    }

    }

    } function clearLoad() {

    document.getElementById("load").style.display="";

    document.getElementById("opperate1").style.display="none";

    document.getElementById("opperate2").style.display="none";

    }

    当点击保存时,执行loading()方法。

    Action类

    progressBar()方法

    /**

    * @throws Exception

    * @Name: progressBar

    * @Description: 在页面执行保存后,使用ajax,计算执行的百分比情况,将结果显示到页面上

    * @Parameters: 无

    * @Return: ajax如果不需要跳转页面,返回null或者NONE*/public String progressBar() throws Exception{//从session中获取操作方法中计算的百分比Double percent = (Double) request.getSession().getAttribute("percent");

    String res = "";//此时说明操作的业务方法仍然继续在执行if(percent!=null){//计算的小数,四舍五入取整int percentInt = (int) Math.rint(percent);

    res = "" + percentInt + "";

    }//此时说明操作的业务方法已经执行完毕,session中的值已经被清空else{//存放百分比res = "" + 100 + "";

    }//定义ajax的返回结果是XML的形式PrintWriter out = response.getWriter();

    response.setContentType("text/xml");

    response.setHeader("Cache-Control", "no-cache");//存放结果数据,例如:88out.println("");

    out.println(res);

    out.println("");

    out.close();return null;

    }

    save()方法

    /**

    * @Name: save

    * @Description: 保存表单数据到数据库

    * @Parameters: 无

    * @Return: String:重定向到system/actingIndex.jsp再查询*/public String save(){//模拟:循环保存150次,方便观察百分比变化for(int i=1;i<=150;i++){

    elecCommonMsgService.saveCommonMsg(elecCommonMsg);//保存数据request.getSession().setAttribute("percent", (double)i/150*100);

    }//线程结束,清空sessionrequest.getSession().removeAttribute("percent");return "save";

    }

    注意:可以在复杂的业务中将代码段分成点,一个点的进度是占百分之多少,然后存放到Session中,然后通过ajax调用服务从Session中获取值,返回进度并显示即可。

    效果

    9d3493e6022b8c5511b718c86d499363.png

    输入数据,点击【保存】时:

    1afdb3a7621b34b90a5f80e1f063db21.png

    总结

    带百分比的进度条,实际上是用ajax在保存中开启多个线程实现的:一个线程,执行保存的操作:

    1.将百分比计算出来,放到session中;

    2.在线程结束的时候,将session清空。另一个线程,从session中获取百分比的内容:

    1.使用ajax将结果返回并显示在页面上

    展开全文
  • 简单的百分比进度条样式代码,有多种颜色风格可以选择。
  • 主要介绍了jQuery实现html可联动的百分比进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • echarts 百分比进度条

    千次阅读 2020-10-14 18:36:36
    echarts 百分比进度条如下图两种,下面代码是第二张图的,第一个的稍加修改label值即可 <div id="main" style="width: 180px;height:30px;"></div> <script> var myChart = echarts.init...

    echarts 百分比进度条如下图两种,下面代码是第二张图的,第一个的稍加修改label值即可

    在这里插入图片描述
    在这里插入图片描述

    直接上代码:

    <div id="main" style="width: 180px;height:30px;"></div>
    <script>
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        grid: {
            top: 5,
            bottom: 5,
            left: 5,
            right: 50
        },
        title: {
            text: percent + '%',
            right: 0,
            top: 'middle',
            textStyle: {
                fontWeight: 500,
                fontSize: 12
            }
        },
        color: ['#74d1fd', '#eee'],
        xAxis: {
            show:false,
            type : 'value',
            boundaryGap : [0, 0]
        },
        yAxis: [
            {
                type : 'category',
                data : [''],
                axisLine:{show:false},
                axisTick:[{
                    show:false
                }]
            }
        ],
        series: [
            {
                type: 'bar', 
                name: '已完成',
                stack: '总量',
                barMaxWidth: 20,
                label: {
                    show: false,
                    position: 'inside',
                    formatter: '{c}%'
                },
                itemStyle: {
                    barBorderRadius: [10, 10, 10, 10]
                },
                data: [37.5]
            },
            {
                type: 'bar', 
                name: '未完成',
                stack: '总量',
                barMaxWidth: 20,
                label: {
                    show: false,
                    color: '#aaa',
                    position: 'inside' ,
                    formatter: '{c}%'
                },
                showBackground: true,
                backgroundStyle: {
                    color: '#eee',
                    barBorderRadius: [10,10,10,10]
                },
                itemStyle: {
                    color: '#eee',
                    barBorderRadius: [0, 10, 10, 0],
                },
                silent:true,
                data: [62.5]
            }
        ]
    };
    myChart.setOption(option);
    </script>
    

    注:如果进度条样式不对,可能是echarts版本的问题。

    如上demo使用的是4.3.2版本的。

    纯干货,喜欢的朋友,点个赞(),鼓励鼓励~
    展开全文
  • 源码CoreAnimation,根据自己样式,稍作修改, 可做1、百分比进度条,2、波浪效果,3、两种背景图片动画切换,4、窗户效果, 5、拉窗帘, 6、开门, 7、关门 等各种样式 使用方法: 加入头文件: #...
  • 最近做项目遇到这样的需求要求当进行文件长传保存等操作时,能在页面显示一个带百分比进度条,给用户一个好的交互体验,下面通过实例代码给大家介绍基于ajax实现带百分比进度条效果,需要的的朋友参考下吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,913
精华内容 7,965
关键字:

百分比进度条