css做进度条

CSS是前端开发常用的技术之一，通过CSS可以实现各种各样的效果，比如制作进度条。下面我们来学习一下如何使用CSS来制作一个简单的进度条。

    .progress-bar {
            position: relative;
            width: 100%;
            height: 16px;
            border-radius: 20px;
            background-color: #ddd;
    }
    .progress {
            position: absolute;
            width: 50%;
            height: 100%;
            background-color: #4CAF50;
            border-radius: 20px;
    }
    .progress span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
    }
    

首先，我们定义了一个进度条的容器，使用position: relative; 设置相对定位，width和height分别设置为100%和16px，border-radius设置为20px，background-color设置为灰色。这个容器就是进度条的背景。

接着，我们定义了一个进度条的进度，使用position: absolute; 设置绝对定位，设置width为50%（代表50%的进度），height为100%（因为进度条的高度在背景中已经定义过了），background-color设置为绿色，border-radius设置为20px（与背景保持一样），这样进度条就有了绿色的进度。

最后，我们在进度条中间添加了一个文本，使用position: absolute; 定位到进度条中间，使用transform属性将元素水平和垂直居中，text-align设置为center，这样文本就能在进度条中央显示。

通过上述代码，我们便实现了一个简单的进度条。当需要改变进度时，只需要调整进度条进度的宽度，就能轻松实现进度条动态变化的效果。CSS的能力真是非常强大啊！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！