css3 制作圆环进度条
引子
移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制。
CSS3 实现圆环
刚开始写这个圆环的时候是参照帖子上给出的css代码代入,然后根据自己的需求改,发现圆环可以完美转动了,但是好像没法用百分比控制,所以放弃了随便copy一个现成的想法,该动动脑子还是有必要的。
实现原理
css实现圆环的方法很多,我看大部分都是采用边框(border)+ 裁剪(clip:rect())来实现的,所以我也准备采用这种方式。
主要是布局问题,我看大部分圆环进度条都大同小异,就是布局和转动方式不同
// html
<div id="loading" class="loading">
<div class="circle">
<div class="percent left"></div>
<div class="percent right wth0"></div>
</div>
<div class="per"></div>
</div>
// css
.loading {
position: fixed;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 9999;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.circle{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:10px solid #fff;
clip:rect(0,100px,100px,50px);
}
.clip-auto{
clip:rect(auto, auto, auto, auto);
}
.percent{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
top:-10px;
left:-10px;
}
.left{
-webkit-transition:-webkit-transform ease;
transition:-webkit-transform ease;
transition:transform ease;
border:10px solid #E54B00;
clip: rect(0,50px,100px,0);
}
.right{
border:10px solid #E54B00;
clip: rect(0,100px,100px,50px);
}
.wth0{
width:0;
}
// js
$('.left').animate({
deg: per*3.6
}, {
step: function(n, fx) {
if(per>180){
$('.circle').addClass('clip-auto');
$('.right').removeClass('wth0');
}
$(this).css({
"-webkit-transform":"rotate("+n+"deg)",
"-moz-transform":"rotate("+n+"deg)",
"transform":"rotate("+n+"deg)"
});
},
duration:500
})
通过对 .circle(左右两侧圆环的父元素) 的裁剪只显示左侧的圆环,右侧的圆环的宽度直接为 0 ,当进度条进行到50%的时候,即左侧圆环转动角度为 transform: rotate(180deg) ,将 .circle 的裁剪去掉 (.clip-auto),右侧圆环的宽度恢复。基本就是这个套路。
jQuery的 动画方法 animate() 的 step属性
如果仅用
$(this).css({
"-webkit-transform":"rotate("+n+"deg)",
"-moz-transform":"rotate("+n+"deg)",
"transform":"rotate("+n+"deg)"
});
来控制角度的转动,没有丝毫动画显得比较生硬,这时候就要考虑给它加个动画了,而jq提供的 animate 对只有数字值可创建动画,而字符串类型的值无法创建动画。
这时候需要用到 animate的step属性了。
step介绍
animate的progress属性是我们经常用的,对数字值的属性进行操作,但是字符串值的属性却并不能用它进行操作,这时候就需要step属性了。
step 顾名思义就是对一段动画进行步骤分解,在animate方法中,每一步具体是怎么分解的,不是由我们设定的CSS属性值和动画时长来决定的,是由系统来决定的。
$(".left").animate({left:50},{
duration:100,
step:function(now,fx){
console.log(now) //控制台输出,看看这个动画被分解成了几个片段
}
});
这个地方主要是解释为什么在这里给角度赋值,顺便说明一下它到底将该值分成多少个片段并不是由我们人为控制的。
step方法的第二个参数——fx
$(".demo").animate({
first:2,
second:10
}, {
step:function(n,fx){
// 动画元素的每个动画属性每一次动画效果的执行都将调用的函数。第1个参数是当前动画正在改变的属性的实时值(每1次动画过程中,属性值的实时反馈呈现);第2个参数为修改Tween 对象提供了一个机会来改变animate第1个参数中设置的属性在动画结束时的值。
// fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
// 执行动画的元素:elem;
// 动画正在改变的属性:prop;
// 正在改变属性的当前值:now;
// 正在改变属性的结束值:end;
// 正在改变属性的单位:unit;等
// 可在这里改变animate第1个参数中设置的属性second在动画结束时的值
if(fx.prop=="second"){fx.end=5}
console.log(fx.prop+": "+n);
},
duration:2000
})
结束
做这个动画遇到了自己两个知识盲点,clip的运用以及jq的step属性,写这篇文章主要目的还是加深理解,以及分享。
css3 制作圆环进度条的更多相关文章
- CSS3实现圆环进度条
摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...
- 浅谈一下关于使用css3来制作圆环进度条
最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...
- 移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
- CSS3制作同心圆进度条
1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
- Vue/React圆环进度条
数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- CSS3时钟式进度条
CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCT ...
- canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ...
随机推荐
- Django用户认证模块中继承AbstractUser与AbstractBaseUser重写User表的区别
AbstractUser和AbstractBaseUser看起来十分相似,如果你不熟悉djiango的auth重写User,那你很容易弄错,导致一堆bug. 我们查看AbstractUser的源码得知 ...
- fcntl和flock两个系统调用的区别
总的来说,flock函数只能锁定整个文件,无法锁定文件的某一区域.而fcntl可以利用struct flock结构体,来实现文件里部分区域锁定的操作. 附:fcntl(文件描述词操作) 相关函数 op ...
- 【转帖】sysbench压力测试工具简介
sysbench压力测试工具简介 https://www.cnblogs.com/pdlife/p/6698957.html 一.sysbench压力测试工具简介: sysbench是一个开源的.模块 ...
- vue去掉链接中的#
在router.js中修改, const router = new VueRouter({ mode: 'history', routes: [...] })
- 复合模式MVC
这里也只说一下简单的原理. Model:模型实现处理数据的切逻辑. View:视图呈现模型的数据和状态. Control:解读视图对模型的操作. 视图和模型之间使用观察者模式,只要模型的状态改变视图立 ...
- # 双值Hash
双值Hash 简单介绍 Hash的应用:Hash其实就像一个加密过程,很多加密算法都会用到Hash,像GitHub中生成的token值也是Hash的结果. Hash冲突:简单来说就是不同的数映射到了同 ...
- 用pandas库对csv文件中的文本数据进行分析处理
#数据分析 import pandas import csv old_path = r'd:\2000W\200W-400W.csv' f = open(old_path,'r',encoding=' ...
- 批量Insert
oracle INSERT ALL ,) ,) ,) FROM DUAL
- Java实现发邮件功能---网易邮箱
目录 Java实现发邮件功能 前言 开发环境 代码 效果 结束语 Java实现发邮件功能 前言 电子邮件的应用场景非常广泛,例如新用户加入,即时发送优惠清单.通过邮件找回密码.监听后台程序,出现异常自 ...
- css优先级及其对应的权重
1.选择器的优先级 !important>内联选择器(style)>id选择器>类选择器 | 属性选择器 | 伪类选择器 > 元素选择器>通配符(*) 2.选择器的权重( ...