[代码] 使用less实现圆圈环形进度条(CSS3)

示例为使用less实现的环形进度条:

html

<div class="radial-progress" data-progress="0">
	<div class="circle">
		<div class="mask full">
			<div class="fill"></div>
		</div>
		<div class="mask half">
			<div class="fill"></div>
			<div class="fill fix"></div>
		</div>
		<div class="shadow"></div>
	</div>
	<div class="inset">
		<div class="percentage">
			<div class="numbers"><span>-</span><span>0%</span><span>1%</span><span>2%</span><span>3%</span><span>4%</span><span>5%</span><span>6%</span><span>7%</span><span>8%</span><span>9%</span><span>10%</span><span>11%</span><span>12%</span><span>13%</span><span>14%</span><span>15%</span><span>16%</span><span>17%</span><span>18%</span><span>19%</span><span>20%</span><span>21%</span><span>22%</span><span>23%</span><span>24%</span><span>25%</span><span>26%</span><span>27%</span><span>28%</span><span>29%</span><span>30%</span><span>31%</span><span>32%</span><span>33%</span><span>34%</span><span>35%</span><span>36%</span><span>37%</span><span>38%</span><span>39%</span><span>40%</span><span>41%</span><span>42%</span><span>43%</span><span>44%</span><span>45%</span><span>46%</span><span>47%</span><span>48%</span><span>49%</span><span>50%</span><span>51%</span><span>52%</span><span>53%</span><span>54%</span><span>55%</span><span>56%</span><span>57%</span><span>58%</span><span>59%</span><span>60%</span><span>61%</span><span>62%</span><span>63%</span><span>64%</span><span>65%</span><span>66%</span><span>67%</span><span>68%</span><span>69%</span><span>70%</span><span>71%</span><span>72%</span><span>73%</span><span>74%</span><span>75%</span><span>76%</span><span>77%</span><span>78%</span><span>79%</span><span>80%</span><span>81%</span><span>82%</span><span>83%</span><span>84%</span><span>85%</span><span>86%</span><span>87%</span><span>88%</span><span>89%</span><span>90%</span><span>91%</span><span>92%</span><span>93%</span><span>94%</span><span>95%</span><span>96%</span><span>97%</span><span>98%</span><span>99%</span><span>100%</span></div>
		</div>
	</div>
</div>

LESS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

.radial-progress {
	@circle-size: 120px;
	@circle-background: #d6dadc;
	@circle-color: #97a71d;
	@inset-size: 90px;
	@inset-color: #fbfbfb;
	@transition-length: 1s;
	@shadow: 6px 6px 10px rgba(0,0,0,0.2);
	@percentage-color: #97a71d;
	@percentage-font-size: 22px;
	@percentage-text-width: 57px;

	margin: 50px;
	width: @circle-size;
	height: @circle-size;

	background-color: @circle-background;
	border-radius: 50%;
	.circle {
		.mask, .fill, .shadow {
			width:  @circle-size;
			height:  @circle-size;
			position: absolute;
			border-radius: 50%;
		}
		.shadow {
			box-shadow: @shadow inset;
		}
		.mask, .fill {
			-webkit-backface-visibility: hidden;
			transition: -webkit-transform @transition-length;
			transition: -ms-transform @transition-length;
			transition: transform @transition-length;
			border-radius: 50%;
		}
		.mask {
			clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
			.fill {
				clip: rect(0px, @circle-size/2, @circle-size, 0px);
				background-color: @circle-color;
			}
		}
	}
	.inset {
		width:    @inset-size;
		height:   @inset-size;
		position:  absolute;
		margin-left: (@circle-size - @inset-size)/2;
		margin-top: (@circle-size - @inset-size)/2;

		background-color: @inset-color;
		border-radius: 50%;
		box-shadow: @shadow;
		.percentage {
			height:  @percentage-font-size;
			width:  @percentage-text-width;
			overflow: hidden;

			position: absolute;
			top:   (@inset-size - @percentage-font-size) / 2;
			left:   (@inset-size - @percentage-text-width) / 2;

			line-height: 1;
			.numbers {
				margin-top: -@percentage-font-size;
				transition: width @transition-length;
				span {
					width:     @percentage-text-width;
					display:    inline-block;
					vertical-align: top;
					text-align:   center;
					font-weight:  800;
					font-size:   @percentage-font-size;
					font-family:  "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
					color:     @percentage-color;
				}
			}
		}
	}

	@i: 0;
	@increment: 180deg / 100;
	.loop (@i) when (@i <= 100) {
		&[data-progress="@{i}"] {
			.circle {
				.mask.full, .fill {
					-webkit-transform: rotate(@increment * @i);
					-ms-transform: rotate(@increment * @i);
					transform: rotate(@increment * @i);
				}	
				.fill.fix {
					-webkit-transform: rotate(@increment * @i * 2);
					-ms-transform: rotate(@increment * @i * 2);
					transform: rotate(@increment * @i * 2);
				}
			}
			.inset .percentage .numbers {
				width: @i * @percentage-text-width + @percentage-text-width;
			}
		}
		.loop(@i + 1);
	}
	.loop(@i);
}

使用:

$('.radial-progress').attr('data-progress', 10);

代码来源:https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9

版权声明:著作权归作者所有。

相关推荐

[译]CSS变量实现酷炫的悬停效果

我最近受Grover网站上有趣悬停动画的启发。 将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。 这个想法很简单,但效果是按钮会脱颖而出,并得到点击。我们怎样才能达到类似的效果,让我们的网站脱颖而出呢? 其实,它不像你想象的那么难!跟踪位置我们首先要获取鼠标的位置。document.querySelector('.button').onmousemove 

Spring Boot使用springProfile实现Logback多环境的通用配置

在一个基于Spring boot开发的项目里,常常需要有多套环境的配置:开发,测试以及产品。这里给出一个logback的通用配置。在src/main/resources目录下创建配置文件logback-spring.xml,多环境的通用配置内容如下:<?xml version="1.0" encoding="UTF-8"?

Android使用CountDownTimer实现倒计时示例(Kotlin)

CountDownTimer是一个抽象类,它的构造函数为CountDownTimer(long millisInFuture, long countDownInterval) millisInFuture:倒计时的总时间,从调用start()方法开始。毫秒数countDownInterval:倒计时的时间间隔。毫秒数。CountDownTimer主要有四个方法:syn

使用pace.js在页面顶部添加加载进度条

很多网站(如Github,Stackoverflow)在加载页面时,页面的顶部会看到页面加载进度条。使用pace.js可以很简单的实现此功能。下载pace.jspace官网下载:http://github.hubspot.com/pace/docs/welcome/(包含主题介绍)Github下载:https://github.com/HubSpot/pace完整zip包:http://githu

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主