上面的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. VueJS构造器:new Vue({})

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的: var vm = new Vue({ // 选项 }) 属性与方法 每个 Vue 实例都会代理其 dat ...

  2. Linux 网络概述

    OSI參考模型与TCP/IP參考模型 如上图所看到的. OSI的应用层.表示层.会话层相应TCP/IP的应用层:OSI的传输层相应TCP/IP的传输层.OSI的网络层相应TCP/IP的网络层:OIS的 ...

  3. DCDC电路电感和电容啸叫的原因

    电感啸叫原因 如果耳朵能听到啸叫(吱吱声),可以肯定电感两端存在一个20HZ-20KHZ(人耳范围)左右的开关电流. 例如DC-DC电路的电感啸叫,由于负载电流过大 DC内部有一个限流保护电路,当负载 ...

  4. 自己编译GCC（compile gcc from source）

    有的时候,我不是第一次遇到这种时候,编译内核时报出编译器BUG.如果是ubuntu还好一点,默认软件仓库中就有好几个GCC,换一换总能找到一个好使的,实在不行还有个Tooltrain的ppa,但Deb ...

  5. ASP.NET MVC 4 技术讲解

    ASP.NET MVC 相关的社群与讨论区 Routing 与 ASP.NET MVC 生命周期 Model相关技术 Controller相关技术 View数据呈现相关技术 Area区域相关技术 AS ...

  6. struts2 Eclipse 中集成strust2开发框架实例

    下面通过建立一个小的实例具体来说明Eclipse 集成struts2,以下实例采用的为 struts2 版本为 struts2 2.2.3.1 为应用. 1. 下载struts2的开发包 第一步: 在 ...

  7. python 基础 1.5 数据类型（二）--列表

    一.python 数据类型序列---列表 1.列表是可变型的数据类型.列表里边的元素是可变的,可以增加,可以删除.   2.列表(list)是处理一组有序项目的数据结构,即可以在列表中存储一个序列的项 ...

  8. ajax学习笔记(3)--$.get()方法

    <head runat="server"> <title>jQuery中的$.get()方法</title> <script src=&q ...

  9. c++标准库比较

    1 GNU standard c++ library debian发行版中使用的c++标准库是GNU standard c++标准库. 2 Boost debian发行版中也是用了boost库,但是不 ...

  10. Software-defined networking

    Software-defined networking administrators to programmatically initialize, control, change, and mana ...