基于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. ckediter

    ckediter ##<link rel='stylesheet' href='/css/index.css' /> <script type="text/javascri ...

  2. Mybatis——helloWorld级程序

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC & ...

  3. 最佳死链接href= "#" VS href= "javascript:void(0);"

    href= "#" 熟悉hash跳转的同学都知道,只是一个hash跳转,跳转到页面的顶部,可以发现地址栏多了一个#,点击返回会返回本页面. href= "javascri ...

  4. ActionResult的其它返回值

    我们上边所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Inde ...

  5. oracle常用高级sql---1

    Oracle/Sql高级篇   1.TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. SELECT TOP number|percen ...

  6. gSoap工具wsdl2h及soapcpp2指令汇总

    gSoap开发包的下载地址http://sourceforge.net/projects/gsoap2,在bin目录下提供了两个工具: 1:wsdl2h:The gSOAP wsdl2h tool i ...

  7. ubuntu下安装nagios

    第一步安装apache root@root01-virtual-machine:/etc/apache2/conf-available# vi charset.conf 可修改apache服务器的编码 ...

  8. java abstract类和abstract方法

    Example5_12.java abstract class A { abstract int add(int x,int y); int sub(int x,int y) { return x-y ...

  9. UVA - 12563 Jin Ge Jin Qu hao （01背包变形）

    此题应该注意两个点,首先背包容量应该缩减为t-1,因为最长的歌不超过三分钟,而劲歌金曲有678s,所以肯定要留出这个时间来.其次注意优先级,保证唱的歌曲数目最多,在此前提下尽可能的延长时间. 处理方法 ...

  10. HDU 4612 Warm up（双连通分量缩点+求树的直径）

    思路:强连通分量缩点,建立一颗新的树,然后求树的最长直径,然后加上一条边能够去掉的桥数,就是直径的长度. 树的直径长度的求法:两次bfs可以求,第一次随便找一个点u,然后进行bfs搜到的最后一个点v, ...