CSS3创建圆圈进度条
最近在工作中需要做一个圆圈倒计时,刚开始的想法是做个纯数字的倒计时即可,可是需求觉得这个不太好看,想加个倒计时进度条。于是就有了接下来的分析过程...
我们知道CSS3可以很方便的画圆,圆环,然后在加上一个旋转动画不就可以实现了吗?
于是先把圆环画出来了
做到这里问题又来了,如何让红色的圆环一点一点的消失呢?此处一个圆环再怎么旋转终究是一个圆环,
此时觉得一个圆可能不够,何不在画一个白色的半圆再旋转呢?可是白色的半圆又如何一点一点的显示呢?貌似又回到了问题的起点。
我们知道overflow:hidden;可以让多余的部分隐藏,如果在配合两个半圆旋转不就可以实现了吗?
先画两个半圆试试
左半圆
右半圆
如果都顺时针旋转45度再刚刚好拼在一起就是一个完整的圆环
.circleProgress_wrapper{
width: 160px;
height: 160px;
margin: 10px auto;
position: relative;
}
.wrapper{
width: 80px;
height: 160px;
position: absolute;
top:0;
/*overflow: hidden;*/
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
/*transform: rotate(45deg);*/
}
.rightcircle{
border-top:20px solid red;
border-right:20px solid red;
right:0;
animation: circleProgressLoad_right 6s linear infinite;
}
.leftcircle{
border-bottom:20px solid red;
border-left:20px solid red;
left:0;
animation: circleProgressLoad_left 6s linear infinite;
}
此时当我们再旋转的时候发现,圆环可以实现一点一点的消失了,但是当转过一个180度的时候这个半圆右出现了,此时我们可以用到前面的overflow:hidden;
CSS代码如下
.circleProgress_wrapper{
width: 160px;
height: 160px;
margin: 10px auto;
position: relative;
}
.wrapper{
width: 80px;
height: 160px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
/*transform: rotate(45deg);*/
}
.rightcircle{
border-top:20px solid red;
border-right:20px solid red;
right:0;
animation: circleProgressLoad_right 6s linear infinite;
}
.leftcircle{
border-bottom:20px solid red;
border-left:20px solid red;
left:0;
animation: circleProgressLoad_left 6s linear infinite;
}
接下来用css3写个旋转动画即可
.rightcircle{
border-top:20px solid red;
border-right:20px solid red;
right:0;
animation: circleProgressLoad_right 6s linear infinite;
}
.leftcircle{
border-bottom:20px solid red;
border-left:20px solid red;
left:0;
animation: circleProgressLoad_left 6s linear infinite;
}
@keyframes circleProgressLoad_right{
0%{
transform: rotate(45deg);
}
50%,100%{
transform: rotate(225deg);
}
}
@keyframes circleProgressLoad_left{
0%,50%{
transform: rotate(45deg);
}
100%{
transform: rotate(225deg);
}
}
完整的demo可以查看下面的实例
目前这里的倒计时动画是动画时间是6s,这里可以根据需要自行修改,这里的运行时间我在项目中是用js控制的,这样可以根据后台下发的时间值来倒计时,非常方便。
CSS3创建圆圈进度条的更多相关文章
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- CSS3时钟式进度条
CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCT ...
- CSS3实现圆环进度条
摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...
- css3 制作圆环进度条
引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...
- CSS3实现圆形进度条
介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...
- css3飞机起飞进度条
效果:http://hovertree.com/texiao/css3/27/ 源码下载:http://hovertree.com/h/bjaf/pgwql1x2.htm 本效果使用Font Awes ...
- 【JavaScript】HTML5/CSS3实现五彩进度条应用
今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...
- 纯CSS3实现圆形进度条动画
悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
- 超简单CSS3水平动态进度条+小圆球+背景色渐变
实现的的效果图如下:效果是动态加载的 代码如下: <!DOCTYPE html> <html lang="en"> <head> <met ...
随机推荐
- django rest framework serializers解读
serializers是什么?官网是这样的"Serializers allow complex data such as querysets and model instances to b ...
- [视频]K8飞刀 正则采集WordPress站点用户
链接:https://pan.baidu.com/s/16NCuC-mD4-3dxfVdcIFkxg 提取码:k3bw
- (转)Linux开启路由转发功能
原文:https://www.linuxidc.com/Linux/2016-12/138661.htm 标记一下,今天想让一台Red Hat Enterprise Linux 7开通iptables ...
- li内有span需要右浮的问题
图一和图二换了一下span的位置,但是其页面展示是一样的,兼容性比较好的是第二种
- Hadoop生态系统之Yarn
Apache YARN(Yet Another Resource Negotiator) 是Hadoop的集群资源管理系统.YARN被引入Hadoop2最初是为了改善MapReduce的实现,但它具有 ...
- 高手速成android开源项目【View篇】
主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.ProgressBar及其他如Dialo ...
- 使用Jenkins部署Spring Boot项目
jenkins是devops神器,本篇文章介绍如何安装和使用jenkins部署Spring Boot项目 jenkins搭建 部署分为三个步骤: 第一步,jenkins安装 第二步,插件安装和配置 第 ...
- Hadoop项目实战-用户行为分析之应用概述(一)
1.概述 本课程的视频教程地址:<Hadoop 回顾> 好的,下面就开始本篇教程的内容分享,本篇教程我为大家介绍我们要做一个什么样的Hadoop项目,并且对Hadoop项目的基本特点和其中 ...
- 从完整备份恢复单个innodb表
现在大多数同学在线上采取的备份策略都是xtrabackup全备+binlog备份,那么当某天某张表意外的删除那么如何从xtrabackup全备中恢复呢?从mysql 5.6版本开始,支持可移动表空间( ...
- spring-boot-2.0.3应用篇 - shiro集成
前言 上一篇:spring-boot-2.0.3源码篇 - 国际化,讲了如何实现国际化,实际上我工作用的模版引擎是freemaker,而不是thymeleaf,不过原理都是相通的. 接着上一篇,这一篇 ...