码迷,mamicode.com
首页 > 其他好文 > 详细

进度条编写

时间:2019-10-10 09:19:54      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:width   ESS   ogre   hidden   form   color   data-   注意   nbsp   

 

<style>
.mui-progressbar {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 2px;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    vertical-align: middle;
    border-radius: 2px;
    background: #b6b6b6;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    }
    
    .mui-progressbar span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: 150ms;
    transition: 150ms;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
    background: #007aff;
}
    
</style>

<p class="mui-progressbar mui-progressbar-in" data-progress="20"><span style="transform: translate3d(-70%, 0px, 0px);"></span></p>

注意:控制红色的部分 -70% 比例就好,使用100-20=70,加上负号和百分比就OK

 

进度条编写

标签:width   ESS   ogre   hidden   form   color   data-   注意   nbsp   

原文地址:https://www.cnblogs.com/louby/p/11645737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!