一个不错的进度条样式

直接上源码。

<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>

### 如何用CSS实现圆形进度条样式 #### 使用纯CSS构建基础圆形进度条 为了创建一个简单的圆形进度条,可以通过定义一个容器元素并应用特定的CSS属性来完成。首先,需要设定一个固定大小的正方形作为圆的基础形状,并通过`border-radius`将其转换成圆形。 ```css .circle-progress { width: 100px; height: 100px; border-radius: 50%; } ``` 接着,在这个基础上添加伪类`:before`或`:after`用于表示实际的进度部分[^3]: ```css .circle-progress:before { content: ""; position: absolute; top: 10px; /* 调整内边距 */ left: 10px; right: 10px; bottom: 10px; background-color: #f7f8fa; border-radius: inherit; } .circle-progress .progress-bar { clip: rect(0, 100px, 100px, 50px); position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: blue; } ``` 对于动态显示不同比例的进度,则可通过JavaScript控制旋转角度或者改变`clip`区域的位置来模拟进度变化效果[^2]。 #### 利用SVG增强功能性和兼容性 虽然仅靠CSS就能做出不错的视觉效果,但如果追求更精确地绘制弧线以及更好的浏览器支持度,推荐采用SVG图形配合CSS的方式。这种方式不仅能够简化某些复杂动画的设计过程,还能确保在各种设备上都能获得一致的表现[^1]。 ```xml <svg viewBox="0 0 36 36" class="circular-chart"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/> </svg> ``` 以上代码片段展示了如何利用SVG路径命令中的椭圆弧(`a`)指令画出完整的背景圈;而具体的进度填充则可以根据当前百分比计算对应的终点坐标来进行渲染。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值