CSS如何实现进度条和订单进度条

小编给大家分享一下CSS如何实现进度条和订单进度条，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

站在用户的角度思考问题，与客户深入沟通，找到海安网站设计与海安网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广、空间域名、网页空间、企业邮箱。业务覆盖海安地区。

简单地效果图如下：

CSS如何实现进度条和订单进度条

CSS实现进度条：

html结构：

70%

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结构：

#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; }

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

以上是“CSS如何实现进度条和订单进度条”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

大橙子网站建设，新征程启航

CSS如何实现进度条和订单进度条

其他资讯