基于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. QT插件和服务培训

    下载地址:http://files.cnblogs.com/files/senior-engineer/%E6%8F%92%E4%BB%B6%E5%92%8C%E6%9C%8D%E5%8A%A1%E5 ...

  2. IO模式设置网络编程常见问题总结—IO模式设置，阻塞与非阻塞的比较，recv参数对性能的影响—O_NONBLOCK(open使用)、IPC_NOWAIT(msgrcv)、MSG_DONTWAIT(re

    非阻塞IO 和阻塞IO: 在网络编程中对于一个网络句柄会遇到阻塞IO 和非阻塞IO 的概念, 这里对于这两种socket 先做一下说明:       基本概念: 阻塞IO:: socket 的阻塞模式 ...

  3. c++判断一个字符串是否是数字

    bool isNum(const string& str) { bool bRet = false; bool point = false; ) { return bRet; } ]) &am ...

  4. asp之vbscript函数

    '函数Abs(number)'返回绝对值.Array(arglist)'创建一个数组.Asc(string)'返回字符串第一个字符的ANSI码.Atn(number)'返回反正弦值.CBool(exp ...

  5. 观光公交noip<贪心>

    题目链接:https://www.oj.swust.edu.cn/problem/show/1190 思路: 每在一段路上使用一次加速器,就会对某些人或者说某些路段上的人产生影响,目的是使产生的影响最 ...

  6. js入门实例

    <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My F ...

  7. GameUnity 2.0 发布倒计时

    万众期待的 gameunity 网络游戏框架 已经完成了,现在在最后的检验调试阶段. 因为版本 改动非常之大,所以 版本号 从0.2版本 改成 2.0版本. gameunity事件部分,一如既往保持高 ...

  8. 让横向ul在页面中水平居中的方法

    在导航的布局中,导航条会用横向布局的ul li.如果要让其居中,怎么办呢? 第一种方法: ul{text-align:center;} li{display:inline} 这种方法不适合ie低版本. ...

  9. Telepro工具注册码

    Teleport Pro v1.54 注册码 Teleport Pro v1.54姓名(Name):3ddown.com序列号(Serial):161594593

  10. PAT1008

    1008. Elevator (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B The highest building in our city has on ...