1.环形进度条

源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>环形进度条</title>
  6.     <style>
  7.         .wrapper {
  8.             position: absolute;
  9.             top: 0;
  10.             right: 0;
  11.             bottom: 0;
  12.             left: 0;
  13.             width: 4em;
  14.             height: 4em;
  15.             margin: auto;
  16.         }
  17.         .container {
  18.             position: absolute;
  19.             top: 0;
  20.             bottom: 0;
  21.             width: 2em;
  22.             overflow: hidden;
  23.         }
  24.         .halfCir {
  25.             width: 2em;
  26.             height: 4em;
  27.             background: red;
  28.         }
  29.         .container1 {
  30.             left: 2em;
  31.         }
  32.         .container1 .halfCir {
  33.             left: 0;
  34.             border-radius: 0 4em 4em 0;
  35.             transform-origin: 0 50%;
  36.             animation: halfCir1 4s infinite linear;
  37.         }
  38.         .container2 {
  39.             left: 0;
  40.         }
  41.         .container2 .halfCir {
  42.             border-radius: 4em 0 0 4em;
  43.             transform-origin: 2em 2em;
  44.             animation: halfCir2 4s infinite linear;
  45.         }
  46.         @keyframes halfCir1 {
  47.             50%, 100% {
  48.                 transform: rotateZ(180deg);
  49.             }
  50.         }
  51.         @keyframes halfCir2 {
  52.             0%, 50% {
  53.                 transform: rotateZ(0);
  54.             }
  55.             100% {
  56.                 transform: rotateZ(180deg);
  57.             }
  58.         }
  59.         .wrapper::after {
  60.             position: absolute;
  61.             top: 0.5em;
  62.             left: 0.5em;
  63.             width: 3em;
  64.             height: 3em;
  65.             background: #fff;
  66.             border-radius: 50%;
  67.             content: "";
  68.         }
  69.         .cir {
  70.             position: absolute;
  71.             top: 0;
  72.             right: 0;
  73.             left: 0;
  74.             width: 0.5em;
  75.             height: 0.5em;
  76.             margin: auto;
  77.             background: red;
  78.             border-radius: 50%;
  79.         }
  80.         .cir2 {
  81.             transform-origin: 50% 2em;
  82.             animation: cir2 4s infinite linear;
  83.         }
  84.         @keyframes cir2 {
  85.             100% {
  86.                 transform: rotateZ(360deg);
  87.             }
  88.         }
  89.     </style>
  90. </head>
  91. <body>
  92.     <div class="wrapper">
  93.         <div class="container container1">
  94.             <div class="halfCir"></div>
  95.         </div>
  96.         <div class="container container2">
  97.             <div class="halfCir"></div>
  98.         </div>
  99.         <div class="cir cir1"></div>
  100.         <div class="cir cir2"></div>
  101.     </div>
  102. </body>
  103. </html>

2.顶部进度条

源码

  1. <!Doctype html>
  2. <html>
  3. <head>
  4.     <title>页面顶部显示的进度条效果</title>
  5.     <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  6. </head>
  7. <body>
  8.     <div id="web_loading"><div></div></div>
  9.     <script src="http://files.cnblogs.com/ningvsban/jquery1.8.3.min.js" type="text/javascript"></script>
  10.     <script type="text/javascript">
  11.         jQuery(document).ready(function () {
  12.             jQuery("#web_loading div").animate({ width: "100%" }, , function () {
  13.                 setTimeout(function () {
  14.                     jQuery("#web_loading div").fadeIn();
  15.                 });
  16.             });
  17.         });
  18.     </script>
  19.     <style>
  20.         #web_loading {
  21.             z-index: ;
  22.             width: %;
  23.         }
  24.  
  25.             #web_loading div {
  26.                 width: ;
  27.                 height: 5px;
  28.                 background: #FF9F15;
  29.             }
  30.     </style>
  31. </body>
  32. </html>
  1.  

css进度条的更多相关文章

  1. css 进度条

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. div+css进度条

    效果图: 进度条代码: <style type="text/css"> 红色:background-color:f05153:border:1px solid #f05 ...

  3. css 进度条的文字根据进度渐变

    需求 1.进度条里面的文字需要根据进度的长度而变化 原理 用两个一模一样的样式的 div 重叠起来 效果 字体开始为 蓝色,跟随进度条变为 白色 在线预览: https://jsfiddle.net/ ...

  4. 纯css进度条,各种兼容

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...

  5. 纯css进度条效果

    <!--html代码--> <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...

  6. bootstrap.css 进度条没有动画效果

    操作系统设置会影响浏览器的行为 Win+R 输入 sysdm.cpl ,3 打开 性能 的 设置 确保 窗口内动画控件和元素 被勾选

  7. css 实现进度条

    <select id="progress" onchange="changeProgress(this)"> <option value=&q ...

  8. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

随机推荐

  1. Java开发相关的linux一些基础命令，必须要掌握的

      1.查找文件 find / -name filename.txt 根据名称查找/目录下的filename.txt文件. find . -name "*.xml" 递归查找所有的 ...

  2. ecstore中怎样使用ajax提交数据

    //javascript代码 $$(".bb").addEvent('change',function(e){ var order_item_id = this.get('orde ...

  3. 命令行操作mysql 未完待续......

    复制数据表 create table 新表 like 旧表: 删除表中某个字段 alter table 表名 drop column 字段; 例子: alter table news_apply_lo ...

  4. IDEA启动tomcat乱码

    1.找到IDEA安装目录 2.找到2个文件 3.编辑,在最后一行加入 -Dfile.encoding=UTF-8 4.修改IDEA里tomcat内得编码 5.修改IDEA中tomcat中,startu ...

  5. C#图片添加文字水印

    /// <summary> /// 给图片添加文字水印 /// </summary> /// <param name="img">图片</ ...

  6. 从0开始的Python学习018更多的Python内容

    特殊的方法 之前学习的都是一些常用的方法,为了使我们的学习更加的完整,我们在这里学习一些特殊的方法. 一般说来,特殊的方法都被用来模仿某个行为.例如,如果你想要为你的类使用x[key]这样的索引操作( ...

  7. Java：全局变量（成员变量）与局部变量

    分类细则: 变量按作用范围划分分为全局变量(成员变量)和局部变量 成员变量按调用方式划分分为实例属性与类属性 (有关实例属性与类属性的介绍见另一博文https://blog.csdn.net/Drag ...

  8. Django的URL调度

    1.URLconf (URL configuration):(Django版本1.11.20,其它版本可能各有差异.) 在Django中Python后端与前端URL进行交互,是通过一个名为urlcon ...

  9. NT路径，DOS路径和Device路径互相转换

    项目中遇到的比较奇葩的问题,从网上找到一份源码,https://blog.csdn.net/qq125096885/article/details/70766206 稍微整理了下,VS可以直接编译 # ...

  10. koa-ueditor上传图片到七牛

    问题描述:服务器系统架构采用的是koa(并非koa2),客户端富文本编辑器采用的是百度的ueditor控件.现在需要ueditor支持将图片直接上传到七牛云. 前提:百度的ueditor需要在本地配置 ...