CSS原始进度条是一种简单的进度条样式,它直接使用CSS的属性和值对页面元素进行样式处理,不需要使用JavaScript等其他脚本语言,也不需要引入其他插件或库。
progress { background-color: #e5e5e5; border-radius: 10px; height: 15px; position: relative; overflow: hidden; } progress::-webkit-progress-value { background-color: #0080ff; border-radius: 10px; height: 100%; position: relative; -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } progress::-moz-progress-bar { background-color: #0080ff; border-radius: 10px; height: 100%; position: relative; -moz-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } }
上面的代码中,我们定义了一个<progress>
元素作为进度条的容器,并对其设置了background-color
、border-radius
、height
、position
和overflow
等样式属性,使其能够呈现出我们想要的进度条样式。
接着,在<progress>
元素的子元素::-webkit-progress-value
和::-moz-progress-bar
中,我们对进度条的进度部分进行了样式定义,如background-color
、border-radius
、height
、position
和-webkit-animation
等属性,其中-webkit-animation
和animation
是对动画的设置,让进度条在加载时具有条纹动画效果。
最后,我们还定义了两个@keyframes
规则,用于控制条纹动画的播放效果。