div css实现进度条
2018-02-02 16:13
239 查看
div css实现进度条
进度条前端开发中经常用到今天来看下简单的HTML和css实现的进度条。我们先看下代码:
<div class="progress"> <span class="bar" style="width: 40%;">40%</span> </div>
也可以将
<span>标签换为
<div>
下面重点是css代码:
<style type="text/css"> body{margin: 0;} .progress { overflow: hidden; height: 20px; margin-bottom: 20px; margin-top: 20px; margin-left: 30px; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width:408px; margin-right:12px; } .progress .bar { width: 0%; height: 100%; color: #ffffff; float: left; font-size: 12px; text-align: center; align-items: center; display: flex; justify-content: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } </style>
今天简单介绍简单进度条,接下来会继续写环形进度条 和滑动条的希望对大家有帮助。
相关文章推荐
- 纯DIV+CSS实现进度条
- CSS实现div圆角
- CSS实现的div悬浮框并且兼容IE6的样式
- div+css实现仿猪八戒首页导航菜单效果
- css实现div旋转任意角度
- 黄聪:JS+DIV+CSS实现图表、饼状图、折线图功能Highcharts
- 纯div+css实现手风琴效果下拉框的两种方法
- div+css实现效果和
- DIV+CSS实现的绿色水平一级菜单代码
- DIV+CSS定义滚动条样式,实现内嵌效果
- 纯DIV+CSS百分比进度条
- 纯css实现固定在页面底部的div层
- Css实现DIV绝对定位
- JS+CSS实现带关闭按钮DIV弹出窗口的方法
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
- css实现div中的图片自动上下左右居中
- DIV、CSS和JavaScript实现可隐藏并重现悬浮版块
- DIV半透明层 CSS来实现网页背景半透明
- css实现div内图片上下左右居中
- css实现div框阴影