一个不错的进度条样式

最新推荐文章于 2024-06-13 18:23:52 发布

wangjingming01

最新推荐文章于 2024-06-13 18:23:52 发布

阅读量782

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wangjingming01/article/details/18706857

直接上源码。

<html>
<head>
<style>
.controls
{
left: 0px;
height: 35px;
right: 0px;
bottom: 0px;
border-top-color: #222;
border-top-width: 1px;
border-top-style: solid;
position: absolute;
z-index: 100;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), inset 0px -1px 0px rgba(0,0,0,0.12);
background-image: linear-gradient(rgb(94, 91, 92), rgb(50, 50, 50));
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: rgb(94, 91, 92);
}
.controls
{
height: 35px;
padding-left: 10px;
}

div.scrubber_holder
{
left: 95px;
height: 8px;
right: 80px;
bottom: 0px;
padding-top: 14px;
padding-right: 0px;
padding-bottom: 14px;
padding-left: 0px;
position: absolute;
z-index: 3;
}
div.scrubber
{
height: 6px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
box-shadow: 0px 1px 0px rgba(255,255,255,0.12), 0px -1px 0px rgba(0,0,0,0.12);
background-image: linear-gradient(rgb(0, 0, 0), rgb(34, 34, 34));
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: rgb(0, 0, 0);
}
div.scrubber .scrubbed
{
height: 6px;
min-width: 6px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-image: linear-gradient(rgb(56, 173, 117), rgb(14, 99, 85));
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
}

</style>
</head>
<body>
<div>
dddd
</div>
<div class="controls mouse-activity-disabled">
<div class="scrubber_holder">
      <div class="scrubber">
        <div class="scrubbed" style="width: 25%;"></div>
      </div>
    </div>
    </div>
</body>
</html>