基于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. System.IO命名空间，用于文件/流的处理。

    主要类的介绍:1  Path类——静态实用类,用于处理路径名称.2 File类和FileInfo类● File —— 静态实用类,提供许多静态方法,用于移动.复制和删除文件.● FileInfo —— ...

  2. Django Template模板

    Django Template 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python 代码之中. 下面我们来调用html views def ind ...

  3. Application的多种值判断测试程序

    Application.Contents.Remove("FriendLink") Response.Write("Application.Contents.Remove ...

  4. 【转】Git代码行统计命令集

    http://blog.csdn.NET/dwarven/article/details/46550117 http://blog.csdn.net/hshl1214/article/details/ ...

  5. cocos2d-x中使用tinyxml遇到的问题及解决

    1.问题: cocos2d-x集成tinyxml后在vs下运行正常,但是在Android下在读取xml文件时发生异常,读取时使用的是LoadFile函数 2. 解决方案: 先把xml文件内容读取到内存 ...

  6. 解决oracle数据库连接不上的问题

    今天打开部署好的java开发的网站系统,反应好慢,第一反应就是后台有问题. 查看tomcat一堆的报错信息,重启还是存在. 使用plSql连接数据库看看,登录提示如下:ORA-12514:TNS:监听 ...

  7. Opencv基础知识-----视频的读取和操作

    Opencv读取视频代码 #include "stdafx.h" #include"highgui.h"   int main(int argc,char* a ...

  8. 怎样将MySQL数据库上传到服务器

    首先,需要将本地的数据库导出来,作为一个数据文件,以备稍后上传到服务器用,在本地登陆phpmyadmin控制面板: 登陆成功后,在左侧选择需要操作的数据库: 选择后,页面会自动刷新,然后再在右边点击[ ...

  9. 集合工具类CollectionUtils、ListUtils、SetUtils、MapUtils探究

    之前一直以为集合工具类只有CollectionUtils,主要用它的isEmpty(final Collection<?> coll)静态方法来判断一个给定的集合是否为null或者是否长度 ...

  10. CodeForces 682C Alyona and the Tree（广搜 + 技巧）

    方法:从根节点开始广搜,如果遇到了应该删除的点,就再广搜删掉它的子树并标记,然后统计一下被标记的个数就是答案,所谓技巧就是从根节点开始搜索的时候,如果遇到了某个节点的距离<0,就让它是0,0可以 ...