上面的loading条,想到的办法是用两个半圆覆盖实现,结果也就这么做了,可是明明一个圆就可以的,哎智商堪忧...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
margin: 100px auto;
width: 664px;
height: 664px;
}
.circle-wrap{
position: relative;/* 相对定位 */
width: 664px;
height: 329px;/* 1/2高 */
overflow: hidden;
}
.circle-con{
position: absolute;/* 绝对定位 */
width: 658px;
height: 658px;
border-width: 3px;
border-style: solid;
border-radius: 50%;
border-color: #ed506c #ed506c #87c1ff #87c1ff;
transform: rotate(135deg);
transition: 1s;
}
.pan-bg{
margin: -300px auto;
width: 601px;
height: 326px;
background: url(./pan_bg.png) no-repeat;
}
.pan-txt{
margin-top: 60px;
text-align: center;
}
.pt-top{
font-size: 168px;
color: #ed506c;
font-weight: bold;
}
.pt-cen{
margin-top: -20px;
font-size: 68px;
color: #ed506c;
}
.pt-bot{
font-size: 27px;
color: #9ecdff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="circle-wrap">
<div class="circle-con"></div>
</div>
<div class="pan-bg"></div>
<div class="pan-txt">
<p class="pt-top">646</p>
<p class="pt-cen">财商优秀</p>
<p class="pt-bot">评估时间:2016.05.12</p>
</div>
</div>
</body>
</html>

loading bar的更多相关文章

  1. HTML5+CSS3 loading 效果收集--转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

  2. Essential controls for web app

    AUTO-COMPLETE/AUTO-SUGGEST Auto-complete using Vaadin Offer auto-suggest or auto-complete to help yo ...

  3. 20个免费的 AngularJS 资源和开发教程

    曾经,jQuery 无疑是最受欢迎的开源的 JavaScript 库,如今它有了很多的竞争对手,像 AngularJS.React.KnockoutJS 等等.在这里,我想重点关注一下 Angular ...

  4. angular插件合集

    图片视频类 angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery.imageloaded和Masonry angular-deckgrid 另一个照片 ...

  5. SourceTree - 正在检查源... When cloning a repository, "Checking Source" spins forever

    I am trying to clone a repository, my OpenSSH is set up correctly and I can do everything fine in Gi ...

  6. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  7. angularjs开发总结

    使用AngularJS有差不多一年时间了,前前后后也用了不少库和指令,整理了一下,分成四大类列出.有demo地址的,就直接连接到demo地址,其它的直接链到github托管库中. 图片视频类 angu ...

  8. Fix an “Unapproved Caller” SecurityAgent Message in Mac OS X

    上午一进公司就被日本分公司的美女呼叫,说mac硬盘加密经常开机后需要输入硬盘加密密码才可以登录,我想应该是硬盘加密后没有给用户添加许可证,所以每次登录系统都要进行验证.于是远程到用户电脑上后,准备在硬 ...

  9. Angular 学习笔记 ( PWA + App Shell )

    PWA (Progressive Web Apps) 是未来网页设计的方向. 渐进式网站. Angular v5 开始支持 pwa 网站 (所谓支持意思是说有一些 build in 的方法和规范去实现 ...

随机推荐

  1. iReport+jasperreport创建子表的几种方式(1)

    在制作报表的过程中,子表是不可缺少的.今天就研究了一下制作子表的几种方式 一.连接数据库创建子表 以MySQL为例: 我的数据源数据库中的表 watermark/2/text/aHR0cDovL2Js ...

  2. vim 穿越时空

    1. 回到以前的文件状态 :earlier 3m   回到文件3分钟之前的状态 2. 回到以后的文件状态 :later 3m      回到文件3分钟之后的状态 3. 时间单位 s 秒 m 分钟 d ...

  3. Java中的Enum的继承

    public interface Icolor{ int apply(int x,int y); } public enum color implements Icolor{ plus("+ ...

  4. emacs 简记

    简介 Emacs作为神的编辑器,不用介绍了吧,说点感受. 用了一段时间了,总体感觉其实Emacs是很简单的,甚至比vim还简单,因为在X环境下,打开后可以就像记事本一样使用.但是,使用Emacs的人一 ...

  5. 【GoldenGate】使用OGG,两个Oracle库之间单向同步数据

    ************************************************************************ ****原文:blog.csdn.net/clark_ ...

  6. cacti 安装和组件添加

    安装cacti 步骤 1.准备lamp环境 2.准备所需包:rrdtool(绘图) cacti(安装程序) net-snmpd(数据收集) 3.安装所需库文件 rrdtool所需库文件有: cairo ...

  7. 07 redi sorder set结构及命令详解

    zadd key score1 value1 score2 value2 .. 添加元素 redis 127.0.0.1:6379> zadd stu 18 lily 19 hmm 20 lil ...

  8. sigar 监控服务器硬件信息

    转载 http://www.cnblogs.com/jifeng/archive/2012/05/16/2503519.html 通过使用第三方开源jar包sigar.jar我们可以获得本地的信息 1 ...

  9. 基于redis的分布式锁二种应用场景

    “分布式锁”是用来解决分布式应用中“并发冲突”的一种常用手段,实现方式一般有基于zookeeper及基于redis二种.具体到业务场景中,我们要考虑二种情况: 一.抢不到锁的请求,允许丢弃(即:忽略) ...

  10. EasyPlayerPro(Windows)流媒体播放器功能介绍及应用场景

    EasyPLyerPro(Windows)经过为期一个月的开发已经基本完成,虽然目前仍存在一些小问题,但是总体功能还是趋于比较稳定和强大的,下面对其功能和应用场景做简要介绍. 一.EasyPlayer ...