用css3简单实现进度条

2019独角兽企业重金招聘Python工程师标准>>>

css3是一个神奇的东西，刚才一时手痒，写了一个很简单的进度条不用js：

直接嵌套一个div，然后设置里面的div用animation动画就可以了。

html:

<div class="loading"><div class="progress"></div></div>

loading css:

.loading{width: 300px;height: 15px;border-radius: 10px;border: 1px solid blue;box-shadow: 2px 2px 5px 1px blue;}

progress css:

.progress{width:0%;//设置起始时的进度为0height: 100%;background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));border-radius: 10px;}

然后动画可以用animation和transition都可以来做。

以animation为例：

@-webkit-keyframes aaa{0%{ width: 0%; }30%{width:30%; }60%{width:60%;}100%{width:80%; }}.progress{width:0%;height: 100%;background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));border-radius: 10px;-webkit-animation:aaa 2s linear;}

这只是九牛一毛，没有做不到只有想不到的，css3，你好啊。

转载于:https://my.oschina.net/u/1400666/blog/181912

用css3简单实现进度条相关推荐

CSS3制作一个简单的进度条
这里只是一个小demo,一个用CSS3写的进度条. 如图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo ...
ajax百分比加载特效,jQuery实现的简单百分比进度条效果示例
本文实例讲述了jQuery实现的简单百分比进度条.分享给大家供大家参考,具体如下: 一.JS Code: var progressId = "ProgressBarID"; fun ...
android 时钟进度条,CSS3时钟式进度条
/p> Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
CSS3过渡练习-进度条（CSS3）
CSS3过渡练习-进度条(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
使用CSS3实现圆形进度条
使用CSS3实现圆形进度条导语: 一般我们见到的进度条通常都是矩形的,从左往右开始推进,直到100%:但是很少有圆形的进度条,本篇文章稍微讲解下如何使用CSS3实现圆形进度条一般我们见到的进度条通 ...
前端圆形进度图_使用CSS3实现圆形进度条
一般我们见到的进度条通常都是矩形的,从左往右开始推进,直到100%:但是很少有圆形的进度条,本篇文章稍微讲解下如何使用CSS3实现圆形进度条一般我们见到的进度条通常都是矩形的,从左往右开始推进,直到 ...
php js 进度条,JavaScript实现简单动态进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 ...
JS简单实现进度条效果
今天我们来学习一下,用JS来实现简单的进度条效果首先我们先来到HTML部分 <div class="box1"></div> css部分 .box1{wi ...
Android花样loading进度条（二）-简单环形进度条
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条,包括水平.圆形.环形.圆弧形.不规则形状等. 本篇我们从圆形进度条讲起,讲简单形式的环形进度条,只有进度色彩,没有进 ...

用css3简单实现进度条

用css3简单实现进度条相关推荐

最新文章

热门文章