jquery+css实现圆环圆弧进度条显示效果
代码语言:html
所属分类:进度条
代码描述:jquery+css实现圆环圆弧进度条显示效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .panel{ width: 120px; float: left; margin: 50px; } .circle { width: 120px; height: 120px; position: relative; border-radius: 50%; background: #2c7efd; } .clip_left,.clip_right { width: 120px; height: 120px; position: absolute; top: 0px; left: 0px; } .circle_left, .circle_right { width: 120px; height: 120px; position: absolute; border-radius: 50%; top: 0px; left: 0px; background: #fdbf62; } /*出于展示用的改变背景色*/ /*.circle_left{ background: green; } .circle_right{ background: lightblue; }*/ .circle_right,.clip_right { clip: rect(0,auto,auto,60px); } .circle_left , .clip_left { clip: rect(0,60px,auto,0); } /* *当top和left取值为auto时,相当于0 *当bottom和right取值为auto时,相当于100% */ .mask { width: 90px; height: 90px; border-radius: 50%; left: 15px; top: 15px; background: #FFF; position: absolute; text-align: center; line-height: 90px; font-size: 16px; } .text{ text-align: center; } </style> </head> <body> <div class="panel"> <!--背景圆--> <div class="circle"> <!--左半边圆--> <div class="circle_left"> <div class="clip_left"> </div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0