loading bar
上面的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的更多相关文章
- HTML5+CSS3 loading 效果收集－－转载
用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...
- Essential controls for web app
AUTO-COMPLETE/AUTO-SUGGEST Auto-complete using Vaadin Offer auto-suggest or auto-complete to help yo ...
- 20个免费的 AngularJS 资源和开发教程
曾经,jQuery 无疑是最受欢迎的开源的 JavaScript 库,如今它有了很多的竞争对手,像 AngularJS.React.KnockoutJS 等等.在这里,我想重点关注一下 Angular ...
- angular插件合集
图片视频类 angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery.imageloaded和Masonry angular-deckgrid 另一个照片 ...
- 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 ...
- 纯css3实现的动画加载条
之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...
- angularjs开发总结
使用AngularJS有差不多一年时间了,前前后后也用了不少库和指令,整理了一下,分成四大类列出.有demo地址的,就直接连接到demo地址,其它的直接链到github托管库中. 图片视频类 angu ...
- Fix an “Unapproved Caller” SecurityAgent Message in Mac OS X
上午一进公司就被日本分公司的美女呼叫,说mac硬盘加密经常开机后需要输入硬盘加密密码才可以登录,我想应该是硬盘加密后没有给用户添加许可证,所以每次登录系统都要进行验证.于是远程到用户电脑上后,准备在硬 ...
- Angular 学习笔记 ( PWA + App Shell )
PWA (Progressive Web Apps) 是未来网页设计的方向. 渐进式网站. Angular v5 开始支持 pwa 网站 (所谓支持意思是说有一些 build in 的方法和规范去实现 ...
随机推荐
- SpringBoot启动流程分析（一）：SpringApplication类初始化过程
SpringBoot系列文章简介 SpringBoot源码阅读辅助篇: Spring IoC容器与应用上下文的设计与实现 SpringBoot启动流程源码分析: SpringBoot启动流程分析(一) ...
- Paxos算法学习
早在1990年,Leslie Lamport(即 LaTeX 中的"La",微软研究院科学家,获得2013年图灵奖)向ACM Transactions on Computer Sy ...
- python 安装protobuf
安装准备:python和protoc(编译proto到各个语言) 下载protobuf源代码(各种语言实现):https://github.com/google/protobuf 1.到Python ...
- 认识 service worker
离线缓存可以提升用户体验,可以节省网络资源,但是,浏览器对资源缓存和自定义网络请求的控制一直不够完善,service worker 的出现就是为了解决这些问题 它可以解决目前离线应用的问题,同时也可以 ...
- 不同特权级间代码段的跳转{ 门 + 跳转（jmp + call） + 返回（ret） }
[0]写在前面 0.1)我们讲 CPU的保护机制,它是可靠的多任务运行环境所必须的: 0.2) CPU保护机制:分为段级保护 + 页级保护: 0.2.1)段级保护分为:段限长 limit 检查.段类型 ...
- HDU1864 最大报销额 01背包
非常裸的01背包,水题.注意控制精度 #include <iostream> #include <algorithm> #include <cstdio> #inc ...
- CountDownTimer
package com.daoge.widget; import java.text.DecimalFormat; import android.os.CountDownTimer; import a ...
- iOS程序自动检测更新的实现
本文转载至 http://blog.csdn.net/davidsph/article/details/8931718 App Store自动更新itunes 之前项目需要用到app自动更 ...
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之：内部搜索功能的实现
上一篇介绍了处理接口获取的数据,本篇将介绍如何在接收到的数据中搜索出自己符合条件的数据: 为了页面的美观,我们往往会以分页的形式来进行数据的展示.但是,当需要展示出来的数据太多的时候,我们很难迅速的找 ...
- WebApi 传参详解（转）
一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中 ...