基于css3实现的环形动态加载条，也用到了jquery。当时的想法是通过两个半圆的转动，来实现相应的效果，其实用css3的animation也可以实现这种效果。之所以用jquery是因为通过jquery可以在网站中动态改变加载的百分比。同时，用如果单纯用css3的animation的话扩展性太差，因为你要先确定出百分比是多少，而如果百分比超过一半时，左边的半圆也需转动，单纯用animation就太复杂了。

　　另外，svg和canvas都可以实现这样的效果。canvas的话我感觉原理应该差不多。有人提到通过大量的图片来实现应该也可以。

代码没有封装，封装的话可以做成一个插件。

<!DOCTYPE html>

<html>

<head>

	<title>circle loading</title>

	<style>

		.cricle{

			width:200px;height:200px;background:#0cc;

			border-radius:50%;position:absolute;

		}

		.pre_left, .pre_right {

    		width: 200px;

    		height: 200px;

    		position: absolute;

    		top: 0;left: 0;

		}

		.left,.right{

			display:block;

			width:200px;height:200px;background:#00aacc;

			position:absolute;top:0;left:0;border-radius:50%;

		}

		.pre_right, .right {

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

		}

		.pre_left, .left {

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

		}

		.mask{

			width:150px;height:150px;background:#fff;border-radius:50%;

			position:absolute;top:25px;left:25px;

			line-height:150px;text-align:center;color:#00aacc;font-size:30px;

		}

	</style>

</head>

<body>

		<div class="cricle">

			<div class="pre_left"><div class="left"></div></div>

			<div class="pre_right"><div class="right"></div></div>

			<div class="mask"><span>0</span>%</div>

		</div>

		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

		<script>

			function criclefn(num){

				var degree=num*3.6;

				if(degree>360) degree=360;

				if(degree<0) degree=0;

				$({property:0}).animate({property:100},

					{

						duration:600,

						step:function(){

							var deg=this.property/100*degree;

							var percent=parseInt(this.property/100*num)+1;

							if (deg<=180) {

								$(".right").css("-webkit-transform","rotate("+deg+"deg)");

								$(".mask span").text(percent);

							}else{

								$(".cricle").css("background-color","orange");

								$(".mask").css("color","orange");

								deg=deg-180;

								$(".right").css("-webkit-transform","rotate("+180+"deg)");

								$(".left").css("-webkit-transform","rotate("+deg+"deg)");

								$(".mask span").text(percent);

							}

						}

				});

			}

			$(function($){

				criclefn(70);

			});

		</script>

</body>

</html>

基于css3的环形动态进度条（原创）的更多相关文章

  1. svg和css3创建环形渐变进度条

    在负责的项目中,有一个环形渐变读取进度的效果的需求,于是在网上查阅相关资料整理一下.代码如下: <!DOCTYPE html> <html lang="en"&g ...

  2. Qt实现炫酷启动图-动态进度条

    目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...

  3. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  4. bootstrap得动态进度条

    Bootstrap的动态进度条: html: 创建一个modal   这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...

  5. 超简单CSS3水平动态进度条+小圆球+背景色渐变

    实现的的效果图如下:效果是动态加载的 代码如下: <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

  7. 【iOS】环形渐变进度条实现

    之前有人在找渐变进度条的效果,闲来无事就顺手写了一个,然后画了视图层级,方便讲解. 环境信息: Mac OS X 10.10.3 Xcode 6.3.1 iOS 8.3 效果图: 源码下载地址: ht ...

  8. Vue实现mp3音乐播放及动态进度条

    今天碰到一个Vue点击mp3播放及进度条动态走动的小功能,记录一下: 首先是通过HTML5 audio标签引入音频: <template> <div class="x-fo ...

  9. 利用面向对象思想封装Konva动态进度条

    1.html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. Android Studio 如何将包名按层级展示

    在project视图右上角有个“设置”的按钮,点开,然后将上图所圈部分去勾选就可以了.

  2. 删除sql计划 调用的目标发生了异常。 (mscorlib) 其他信息: 用户 'sa' 登录失败。

    在删除以前创建的sql的计划任务时,弹出如题错误提示,发现错误原因在于,sa密码更改过,导致在删除时因为sa的密码和当前的密码不正确出现此错误. 解决办法: 1.在计划任务的编辑窗口,找到管理连接 2 ...

  3. SQL　列拆分

    with CTE as( SELECT A.id, B.value FROM( SELECT id, value = CONVERT(xml,'<root><v>' + REP ...

  4. 使用anyremote进行远程鼠标控制

    源代码安装 http://anyremote.sourceforge.net/pre.html 安装  -xtest apt-get install libxtst-dev 安装 glib sudo ...

  5. HTML-中<li>标签value值的兼容问题

    今天在做项目测试的时候,发现IE浏览器对HTML中<li>标记的value取值存在兼容性问题,特意从4个浏览器出发进行了一些测试.现将测试结论展示如下: 测试类型 IE8 FF16.0.1 ...

  6. UML类图图示样例

    下图来自<大话设计模式>一书:

  7. java中的类修饰符、成员变量修饰符、方法修饰符

    类修饰符:  public(访问控制符),将一个类声明为公共类,他可以被任何对象访问,一个程序的主类必须是公共类. abstract,将一个类声明为抽象类,没有实现的方法,需要子类提供方法实现. fi ...

  8. C++ 字符串字面值

    C++ 字符串字面值 C++ 基本字符串类型 C++ 字符串类型 char 和 wchar_t c11 新增了 char16_t 和 char32_t 例子: wchat_t title[] = L& ...

  9. 用ifconfig命令，只有lo，没有eth0的解决方案

    解决方案: 1. 进入/etc/sysconfig/network-scripts 目录,发现有ifcfg-eth0,即网卡(驱动)存在但未启用. 2. 输入ifconfig -a命令,可显示eth0 ...

  10. Flask architecture

    论文The Flask Security Architecture: System Support for Diverse Security Policies 介绍了Flask architectur ...