基于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. Shell脚本，自动化发布tomcat项目【转】

    Shell脚本,自动化发布tomcat项目脚本. 1. vko2c_auto_build_by_scp.sh 文件内容: #---------------------start------------ ...

  2. PHP set_error_handler()函数的使用【转载】

    我们写程序,难免会有问题(是经常会遇到问题 ),而PHP遇到错误时,就会给出出错脚本的位置.行数和原因.有很多人说,这并没有什么大不了.确实,在调试程序阶段,这确实是没啥的,而且我认为给出错误路径是必 ...

  3. IOS抓包工具paros的使用

    一,环境安装,软件安装 1.下载安装java JDK for Mac,可以从Oracle官网下载(但是一般Oracle的都是最新的版本的),或者从苹果的开发者网站下载,我是从苹果官网下载的javafo ...

  4. java 单例模式及getInstance的好处

    1.什么是单例模式 简单理解为,有一个类,只能有一个实例化对象,这就是单例模式. 2.getInstance的好处 首先看一下怎样使用getInstance实现单例模式 public class Co ...

  5. stl function扩展(一)

    #ifndef _FUNCTION_LIB_H_ #define _FUNCTION_LIB_H_ #include <functional> namespace function_lib ...

  6. linux(视频学习）2

    第二部分(javaee的开发环境的搭建): 1. 安装jdk的过程: 安装ios的镜像文件,挂载到/mnt目录下.挂载: mount  /mnt/cdrom卸载: umount  /mnt/cdrom ...

  7. HDU 5768 Lucky7 （容斥原理 + 中国剩余定理 + 状态压缩 + 带膜乘法）

    题意:……应该不用我说了,看起来就很容斥原理,很中国剩余定理…… 方法:因为题目中的n最大是15,使用状态压缩可以将所有的组合都举出来,然后再拆开成数组,进行中国剩余定理的运算,中国剩余定理能够求出同 ...

  8. 每个程序员都应该学习使用Python或Ruby

    每个程序员都应该学习使用Python或Ruby 如果你是个学生,你应该会C,C++和Java.还会一些VB,或C#/.NET.多少你还可能开发过一些Web网页,你知道一些HTML,CSS和JavaSc ...

  9. PAT (Advanced Level) 1102. Invert a Binary Tree (25)

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  10. springMVC如何访问静态文件

    在进行Spring MVC的配置时,通常我们会配置一个dispatcher servlet用于处理对应的URL.配置如下:<servlet><servlet-name>mvc- ...