android源生进度条,如何使用源生css3实现圆环加载进度条

这次给大家带来如何使用源生css3实现圆环加载进度条，使用源生css3实现圆环加载进度条的注意事项有哪些，下面就是实战案例，一起来看一下。

效果图：

当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用border-img来做渐变图了，还有一个超笨的方法就是写50个长方形分布在进度条上。css3提供的渐变有线性渐变，径向渐变和重复渐变，想不出来怎样实现扇形渐变。不说了，上代码：

Document

margin: 0;

padding: 0;

}

.wrap,.circle,.percent{

position: absolute;

width: 200px;

height: 200px;

border-radius: 50%;

}

.wrap{

top:50px;

left:50px;

background-color: #ccc;

}

.circle{

box-sizing: border-box;

border:20px solid #ccc;

clip:rect(0,200px,200px,100px);

}

.clip-auto{

clip:rect(auto, auto, auto, auto);

}

.percent{

box-sizing: border-box;

top:-20px;

left:-20px;

}

.left{

transition:transform ease;

border:20px solid blue;

clip: rect(0,100px,200px,0);

}

.right{

border:20px solid blue;

clip: rect(0,200px,200px,100px);

}

.wth0{

width:0;

}

.num{

position: absolute;

box-sizing: border-box;

width: 160px;

height: 160px;

line-height: 160px;

text-align: center;

font-size: 40px;

left: 20px;

top: 20px;

border-radius: 50%;

background-color: #fff;

z-index: 1;

}

var percent=0;

var loading=setInterval(function(){

if(percent>100){

percent=0;

$('.circle').removeClass('clip-auto');

$('.right').addClass('wth0');

}else if(percent>50){

$('.circle').addClass('clip-auto');

$('.right').removeClass('wth0');

}

$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");

$('.num>span').text(percent);

percent++;

},200);

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

android源生进度条,如何使用源生css3实现圆环加载进度条相关推荐

html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
android 加载条封装,Android基于JsBridge封装的高效带加载进度的WebView
图片发自简书App 概述从去年4月项目就一直用起了JsBridge,前面也针对jsBridge使用姿势介绍过一篇入门篇,<Android JsBridge实战打造专属你的Hybrid APP ...
Android 下载进度条，自定义加载进度条，loading动画
1.自定义loadingline动画 /*** 作者:created by meixi* 邮箱:13164716840@163.com* 日期:2018/9/6 10*/public class Lo ...
android webview设置加载进度条
1.自定义属性文件--attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources& ...
css3实现加载进度条的效果(二)
css3实现光效加载的进度条,下面来看实现方法! <div class="progress-bar orange shine"><span id="bl ...
android 自定义view 加载图片,Android自定义View基础开发之图片加载进度条
学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了, ...
Android缓冲进度条或加载进度条
缓冲进度条或加载进度条,在加载页面或者视频加载过程中,为了做到更好的UI及App功能体验交互,这些缓冲加载的等待效果是必不可少的: 下面来看一下旋转的动画效果: 那么,他们的具体源码在这里:loadi ...
Android学习笔记（Android Studio）3-3（ProgressBar ProgressDialog）（加载进度条、转圈圈）UI组件之弹出组件
Android学习笔记3-3 推荐新手向学习视频:B站https://www.bilibili.com/video/av38409964点我传送 3-3 ProgressBar & Progr ...
CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...

android源生进度条,如何使用源生css3实现圆环加载进度条

android源生进度条,如何使用源生css3实现圆环加载进度条相关推荐

最新文章

热门文章