1.环形进度条

源码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>环形进度条</title>

    <style>

        .wrapper {

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            width: 4em;

            height: 4em;

            margin: auto;

        }

        .container {

            position: absolute;

            top: 0;

            bottom: 0;

            width: 2em;

            overflow: hidden;

        }

        .halfCir {

            width: 2em;

            height: 4em;

            background: red;

        }

        .container1 {

            left: 2em;

        }

        .container1 .halfCir {

            left: 0;

            border-radius: 0 4em 4em 0;

            transform-origin: 0 50%;

            animation: halfCir1 4s infinite linear;

        }

        .container2 {

            left: 0;

        }

        .container2 .halfCir {

            border-radius: 4em 0 0 4em;

            transform-origin: 2em 2em;

            animation: halfCir2 4s infinite linear;

        }

        @keyframes halfCir1 {

            50%, 100% {

                transform: rotateZ(180deg);

            }

        }

        @keyframes halfCir2 {

            0%, 50% {

                transform: rotateZ(0);

            }

            100% {

                transform: rotateZ(180deg);

            }

        }

        .wrapper::after {

            position: absolute;

            top: 0.5em;

            left: 0.5em;

            width: 3em;

            height: 3em;

            background: #fff;

            border-radius: 50%;

            content: "";

        }

        .cir {

            position: absolute;

            top: 0;

            right: 0;

            left: 0;

            width: 0.5em;

            height: 0.5em;

            margin: auto;

            background: red;

            border-radius: 50%;

        }

        .cir2 {

            transform-origin: 50% 2em;

            animation: cir2 4s infinite linear;

        }

        @keyframes cir2 {

            100% {

                transform: rotateZ(360deg);

            }

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <div class="container container1">

            <div class="halfCir"></div>

        </div>

        <div class="container container2">

            <div class="halfCir"></div>

        </div>

        <div class="cir cir1"></div>

        <div class="cir cir2"></div>

    </div>

</body>

</html>

2.顶部进度条

源码

<!Doctype html>

<html>

<head>

    <title>页面顶部显示的进度条效果</title>

    <meta http-equiv=Content-Type content="text/html;charset=utf-8">

</head>

<body>

    <div id="web_loading"><div></div></div>

    <script src="http://files.cnblogs.com/ningvsban/jquery1.8.3.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        jQuery(document).ready(function () {

            jQuery("#web_loading div").animate({ width: "100%" }, , function () {

                setTimeout(function () {

                    jQuery("#web_loading div").fadeIn();

                });

            });

        });

    </script>

    <style>

        #web_loading {

            z-index: ;

            width: %;

        }

            #web_loading div {

                width: ;

                height: 5px;

                background: #FF9F15;

            }

    </style>

</body>

</html>




												


											
css进度条的更多相关文章
	

    
						
  1. css 进度条
		
    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
    
		
    2. 
						
  2. div+css进度条
		
    效果图: 进度条代码: <style type="text/css"> 红色:background-color:f05153:border:1px solid #f05 ...
    
		
    3. 
						
  3. css 进度条的文字根据进度渐变
		
    需求 1.进度条里面的文字需要根据进度的长度而变化 原理 用两个一模一样的样式的 div 重叠起来 效果 字体开始为 蓝色,跟随进度条变为 白色 在线预览: https://jsfiddle.net/ ...
    
		
    4. 
								
  4. 纯css进度条,各种兼容
		
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...
    
		
    5. 
						
  5. 纯css进度条效果
		
    <!--html代码--> <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...
    
		
    6. 
						
  6. bootstrap.css 进度条没有动画效果
		
    操作系统设置会影响浏览器的行为 Win+R 输入 sysdm.cpl ,3 打开 性能 的 设置 确保 窗口内动画控件和元素 被勾选
    
		
    7. 
						
  7. css 实现进度条
		
    <select id="progress" onchange="changeProgress(this)"> <option value=&q ...
    
		
    8. 
						
  8. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. 纯CSS3实现圆形进度条动画
		
    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. H5、C3、ES6的新特性
			
    H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其 ...
    
			
    2. 
						
  2. Linux常用命令--文件操作
			
    常用Linux命令笔记(1) 1. 创建文件/文件夹 参考博客:https://www.cnblogs.com/lclq/p/5741852.html. 使用cat命令创建新文件: 输入命令 # ca ...
    
			
    3. 
						
  3. django apscheduler在特定时间执行一次任务(run at a specify time only once)
			
      如何使程序在特定时间只执行一次,我查了一下. celery可以,时间以秒计. task = mytask.apply_async(args=[10, 20], countdown=60) 不过,我 ...
    
			
    4. 
						
  4. 解决Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.7.0:compile
			
    原因: 由于项目所需jdk版本和你当前使用的jdk版本不一致导致的,因为我项目的pom.xml中定义了java版本为1.8,但是我实际idea中run这个项目却是1.7 解决方案: 更换当前jdk版本 ...
    
			
    5. 
						
  5. centos7的主机名配置
			
    centos7的主机名配置 方法一:通过配置文件/etc/hostname (重启后生效) 方法二:通过命令hostnamectl  set-hostname    新主机名(会自动把主机名改为小写) ...
    
			
    6. 
						
  6. 运行SSIS包的六种方式
			
    注意: 1~5都需要SSIS安装在对应的机器上. 一.直接在Data Tool里运行 右键选择要运行的包,然后直接选择运行包 二.使用SQL Server的Job作业 可以选择:a. File Sys ...
    
			
    7. 
						
  7. 使用git提交代码到github,每次都要输入用户名和密码的解决方法
			
    自从使用git提交代码到github后,发现自己使用git的功力增长了不少,但也遇到不少问题.比如,使用git提交代码到github的时候,经常要求输入用户名和密码,类似这种: 网上有这么一种解决方法 ...
    
			
    8. 
						
  8. apache环境下ssl证书链不完整问题解决，原因是缺少中间证书
			
    事情的起因是,对一个网站的升级,从http升级到https,苹果手机可以正常访问,唯独安卓手机出现空白,安卓访问https的时候是出现的空白. 服务器的系统是windows Server 2008 R ...
    
			
    9. 
						
  9. Jenkins-2.154 windows平台部署 FAQ
			
    部署过程中遇到的问题及解决办法如下 1.如何将 Jenkins 汉化? 1.进入系统管理 -> 插件管理 -> 选中“可选插件” 标签 -> 在过滤条件中输入“local”进行查找插 ...
    
			
    10. 
						
  10. 数据结构学习之栈求解n皇后问题
			
    数据结构学习之栈求解n皇后问题 0x1 目的 ​ 深入掌握栈应用的算法和设计 0x2 内容 ​ 编写一个程序exp3-8.cpp求解n皇后问题. 0x3 问题描述 即在n×n的方格棋盘上,放置n个皇后 ...
    
			
    11.