使用GDI+绘进度条的方式多种多样,可以封装一个UserControl,也可以直接使用一个控件来绘制(Label.Image.Panel等),甚至可以直接在winForm上画一个,关键代码没几行(这里是一个量杯的进度条为例): Graphics g = e.Graphics; SolidBrush brush = null; string strName = ""; //由下至上的进度条需要开始时设置一个100%进度的背景色+一个白色层,使用时白色层根据进度减小高度 brush = n…
日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩展缺省的option,添加一个orientation的参数,实现一个垂直滚动调效果,代码如下: /* * jQuery UI Progressbar 1.8.2 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual…
1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;position:relative;width:100px;height:100px;border-radius:50px;overflow:hidden; } .pie { position:absolute;background-color:#e74c3c;width:100px;height:100…
有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先看一下这篇博客,博客地址:http://www.brighttj.com/ios/ios-implement-loop-progress.html这篇博客写的不错,不过看上去还是略微复杂了,我自己根据自己的思路整理了一下,当然目的是为了更加简洁易懂. 一:先制作一个不带颜色渐变的进度条 自定义一个cycleView,在.m 中实…
参考来源 <Radial progress indicator using CSS>,该文核心是用纯CSS来做一个环形的进度条.纯css的意思就是连百分比这种数字,都是css生成的.文章作者采取的方式是生成100个span标签,然后为这100个标签生成100段css代码(用less生成,代码量倒不大,只是生成的代码量会很大),不知道有没有更NB更省资源的css方案.而我的需求很简单,只需要学习怎么画环进进度条即可,进度掌控当然得由js来通知(比如下载进度,或者音乐播放进度)对E文没有恐惧感的话…
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高相等的子盒子,左侧的子盒子左上角和左下角以及右侧子盒子的右上角和右下角利用border-radius:半径,这样两个矩形便组成了一个完整的圆形. 我们让左侧的子盒子绕着右边的中点旋转180°,这样左侧的半圆就隐藏了,右侧半圆同理.这个地方设置旋转中心是用的transform-origin属性,第一个…
最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有需要的可以拿去尝试,因为今天主要是讲css3的方法,canvas我就不多解释了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>…
wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox 基本原理: 当进度小于180度,rightBox以左中点为原点进行旋转 当进度大于180度,rightBox位置不变 背景变成灰色,leftBox以右中点为原点进行旋转,旋转度数=进度-180   问题:rpx在转换成px时有误差 导致小圆不在中心位置 border-radius计算不准确 解决办法…
逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果:   然后我们再用一个比底圆小的圆去覆盖这个大圆就可以出进度条效果了 代码: <style>     /*支持IE9及以上*/    .circle-bar {margin: 20px; font-size:200px; width: 1em; height: 1em; position: relative;  background-colo…
引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给出的css代码代入,然后根据自己的需求改,发现圆环可以完美转动了,但是好像没法用百分比控制,所以放弃了随便copy一个现成的想法,该动动脑子还是有必要的. 实现原理 css实现圆环的方法很多,我看大部分都是采用边框(border)+ 裁剪(clip:rect())来实现的,所以我也准备采用这种方式.…