CSS实现进度条和订单进度条的示例


Posted in HTML / CSS onNovember 05, 2020

最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯。

简单地效果图如下:

CSS实现进度条和订单进度条的示例

CSS实现进度条:

html结构:

<div id="progress">
    <span>70%</span>
</div>

css样式:

#progress{
    width: 50%; 
    height: 30px;
    border:1px solid #ccc;
    border-radius: 15px;
    margin: 50px 0 0 100px;
    overflow: hidden;
    box-shadow: 0 0 5px 0px #ddd inset;
}

#progress span {
    display: inline-block;
    width: 70%;
    height: 100%;
    background: #2989d8; /* Old browsers */
    background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */
    background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-size: 60px 30px;
    text-align: center;
    color:#fff;
}

对于进度条,其中的进度颜色也可以是纯色,若想要用渐变的话,可以到此网站:http://www.colorzilla.com/gradient-editor/ ,这样完成渐变效果就变得非常简单,跟用PS的操作是一样一样的。将背景设置为渐变后,还需要设置background-size,这样才能实现重复效果:

CSS实现进度条和订单进度条的示例

css实现订单进度条:

html结构:

<div id="progressBar">
     <!-- 进度条 -->
     <div>
         <span></span>
     </div>
     <!-- 五个圆 -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

css样式:

#progressBar{
    width: 80%;
    height: 50px;
    position: relative;
    margin: 50px 0 0 100px;
}
#progressBar div{
    width: 100%;
    height: 10px;
    position: absolute;
    top:50%;
    left: 0;
    margin-top:-20px;
    border:1px solid #ddd;
    background: #ccc;
}
#progressBar div span{
    position: absolute;
    display: inline-block;
    background: green;
    height: 10px;
    width: 25%;
}
#progressBar>span{
    position: absolute;
    top:0;
    margin-top: -10px;
    width: 40px;
    height: 40px;
    border:2px solid #ddd;
    border-radius: 50%;
    background: green;
    margin-left: -20px;
    color:#fff;
}
#progressBar>span:nth-child(1){
    left: 0%;
}
#progressBar>span:nth-child(2){
    left: 25%;
    background:green;
}
#progressBar>span:nth-child(3){
    left: 50%;
    background:#ccc;
}
#progressBar>span:nth-child(4){
    left: 75%;
    background:#ccc;
}
#progressBar>span:nth-child(5){
    left: 100%;
    background:#ccc;
}

然后用JS就能实现动态的进度条啦!

PS:CSS样式没怎么优化,然后调试CSS代码时发现第一个圆的样式不起作用,所以才将默认背景色改成绿色,希望能帮我解决这个小BUG的博友留言一下哟,谢谢 !!!

原文链接:https://www.cnblogs.com/jr1993/p/4598630.html

以上就是CSS实现进度条和订单进度条的示例的详细内容,更多关于css实现进度条的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 #HTML / CSS
CSS3实现时间轴特效
Nov 02 #HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 #HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 #HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 #HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 #HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 #HTML / CSS
You might like
Terran剧情介绍
2020/03/14 星际争霸
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
使用Redis做预定库存缓存功能
2022/04/02 Redis