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. 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. 解决gitbook报错问题

    这个问题困扰了我 很久,网友给出了很多解决方案,我都亲测不靠谱. 以下解决方法亲测靠谱: OS:Win7 Gitbook版本: 3.2.3 Nodejs: V8.9.1 步骤: 1. 编辑文件 C:\ ...

  2. 关于HTTPS的简要内容

    HTTPS是什么? 超文本传输安全协议(英语:Hypertext Transfer Protocol Secure,缩写:HTTPS,常称为HTTP over TLS,HTTP over SSL或HT ...

  3. python中的zip()函数和map()函数

    一.zip()函数 1.语法: zip(iterable, ...) 参数说明: iterable,...-- 一个或多个迭代器; 在python2中: zip() 函数用于将可迭代的对象作为参数,将 ...

  4. 腾讯云申请SSL证书与Nginx配置Https

    0x00 为什么要安装证书 信息传输的保密性 数据交换的完整性 信息的不可否认性 交易者身份确定性 如今各大浏览器厂商不断推进Https安全访问强制性要求,为了避免以后网站数据量增多时安装证书造成不必 ...

  5. arcgis api 3.x for js 入门开发系列十五台风轨迹

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. 高通平台如何避免误入FFBM模式

    前面两篇博客分别介绍了通过fastboot和QFIL工具退出FFBM模式的方法.虽然售后的同学可以这么指导用户做恢复,但步骤多操作也麻烦,且属于事后处理,如果大面积高概率地出现,会严重影响用户体验.这 ...

  7. SSIS中xml的输入输出

    输出为XML的两种方法 1.用数据流, 将平面文件作为DES输出 在SQL里将要输出的数据查询成为单列的字符串: SELECT (SELECT * FROM A FOR XML ROOT('A'),E ...

  8. Jsp的基本知识

    jsp页面的基本组成部分:指令,表达式,小脚本,声明,注释,静态内容. 指令元素有三种: 1.page:eg <%@ page 属性名="属性值" 属性名="属性值 ...

  9. 任意N个不同数的逆序对平均值

    在学习数据结构的时候看到了以下定理: 但是老师并没有解释,本着钻研的精神决定搞清楚为什么是这个数. 在百度 google一番之后并没有找到,决定自己试着证明. 最开始走了一些弯路,但突然灵光一闪很容易 ...

  10. c文件操作整理

    <c陷阱与缺陷> FILE *fp; fp = fopen(file, "r+"); 编程者也许认为,程序一旦执行上述操作完毕,就可以自由地进行读取和写入的操作了.遗憾 ...