CSS：改变progress进度条样式

马黑黑 · 发表于 2022-11-27 15:06

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-11-27 15:26 编辑

progress是HTML5新增标签，用于表示任务完成进度，任务总量用属性 max 表示（max是最大值的意思）、任务完成进度用属性 value 表示（value就是值的意思）：

<progress max="100" value="25"></progress>

不同的浏览器上面的 progress 标签效果是不一样的，IE要到10或以上版本才支持progress标签。

由于progress任务完成量和未完成任务的指示颜色是分开的，就很合适用来做音频播放器进度条，但为了在各浏览器下统一外观、且能自定义轨道和进度指示颜色，我们需要给它换装。这里先适配chromium即基于 webkit 内核的浏览器。

第一步：脱衣（这回我们温和一点，不剥皮了）——

progress {
-webkit-appearance: none;

height: 12px;

width: 200px;
border: none;
outline: none;
}

-webkit-appearance: none; 就是把progress的外观设置成啥也木有。当然，身体是有的，所以，我们同时给它设置一下高宽尺寸，为了确保其他浏览器下出现意外，我们还将边框、外边框都设置为无。

第二步：穿新衣

先给它穿件连衣裙外套，头和脚都罩好，免得赤身衤果体的会招来城管的严厉管教。——这个，其实就是轨道整体颜色，chromium有一个内置的伪元素留给web开发者使用，-webkit-progress-bar——

progress::-webkit-progress-bar {
background: pink;
border-radius: 12px;
}

border-radius的设置值和前面的height值一致或略小一点，这就能保证两头是圆角的，若不设置border-radius，穿好新衣后的progress是条状矩形，两头有菱有角不圆润。

接着给它穿条短裙装饰一下就会美美哒啦。——这个，其实就是任务完成量的颜色指示，chromium提供的内置伪元素是 ::-webkit-progress-value——

progress::-webkit-progress-value {
background: red;
border-radius: 12px;
}

欧~，效果来了：

哇~，很酷是吧？

上面的progress效果，现在在chromium内核的浏览器下美丽动人，可但是，Firefox下，样纸很难看。嗯，Firefox也有一个 bar，但它是指progress短裙部分的，就是它是任务完成量的指示颜色，::-moz-progress-bar——

#prog::-moz-progress-bar {

/* -moz-progress-bar 等同于 -webkit-progress-value */
background: red;
border-radius: 12px;

}

那Firefox下它的长裙（轨道）肿么办呢？好办，直接在前面的 progress { ... } 那里添加就好：

progress {
-webkit-appearance: none;

height: 12px;

width: 200px;
border: none;
outline: none;
/* for Firefox below */

background: pink;
border-radius: 12px;
}

现在，下面的效果，Firefox浏览器也应该是一位高雅漂亮的 progress 菇凉了（其实它和上面那位是同一个progress，只是加了基于Firefox的设置）——

最后，请观赏两位progress菇凉，其value值都未设置，一位是默认的，一位是穿包头包脚长裙的：

马黑黑 · 发表于 2022-11-27 15:25

当不设置 value 值是，chromium以轨道颜色、Firefox以任务完成指示颜色渲染progress

马黑黑 · 发表于 2022-11-27 18:11

本帖最后由马黑黑于 2022-11-27 18:17 编辑

马黑黑 · 发表于 2022-11-27 18:43

上楼代码：

<style>
#papa {
margin: auto;
width: 700px;
height: 460px;
background: gray;
box-shadow: 3px 3px 20px #000;
user-select: none;
position: relative;
}
</style>
<div id="papa">
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=419596664.mp3" loop autoplay></audio>
</div>
<script >
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer {position: absolute;bottom: 20px;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 6px;display: grid;place-items: end center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 200px;--hh: 8px;--color: hsl(0, 100%, 100%);--track: hsla(0, 50%, 95%, .55);--prog: linear-gradient(90deg, hsla(120, 100%, 45%, .55), hsla(0, 90%, 50%, .35), hsla(120, 100%, 45%, .55));--btn_size: 35px;}#btnplay {--state: paused;grid-area: btnplay;width: var(--btn_size);height: var(--btn_size);background: conic-gradient(red,orange,yellow,green,teal,blue,purple);mask: radial-gradient(transparent 4px,red 0);-webkit-mask: radial-gradient(transparent 4px,red 0);border-radius: 50%;cursor: pointer;animation: rot 4s linear infinite;animation-play-state: var(--state);}#prog {-webkit-appearance: none;grid-area: prog;width: var(--ww);height: var(--hh);background: var(--track);border-radius: var(--hh);opacity: .95;outline: none;border: none;cursor: pointer;}#prog::-webkit-progress-bar {background: var(--track);border-radius: var(--hh);}#prog::-webkit-progress-value {background: var(--prog);border-radius: var(--hh);}#prog::-moz-progress-bar {background: var(--prog);border-radius: var(--hh);}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 40%, 50%, .6));position: absolute;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));z-index: 1000;}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><progress id="prog" max="100"></progress><span id="cur">00:00</span><span id="dur">00:00</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(data.lrcAr[j][2]);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr[mKey][1];lrc.dataset.lrc = data.lrcAr[mKey][1].replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr[mKey][2] - (aud.currentTime - data.lrcAr[mKey][0]);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [[6.00,"西风 - 阿鲁阿卓",6.0],[12.00,"电视剧《芈月传》片尾曲插曲",4.0],[16.00,"作词：陈涛作曲：王备",4.0],[20.00,"我今身披彩衣",5.1],[27.00,"我见繁花如许",5.7],[34.90,"我嫁与山河千乘万骑",7.9],[42.06,"我却追忆孩提",5.6],[50,"想过无猜无忌",4.9],[57.64,"想与云梦相许",6.0],[65.09,"想任你劫夺红尘知遇",7.2],[73.07,"永生不得离去",5.4],[82.03,"西风向孤独的人吟唱",7.5],[90.01,"是谁在拿捏心里的伤",6.5],[97.05,"将欢情推离片刻时光",8.0],[106.03,"琴箫已在夜中央",6.1],[112.08,"花潮LRC在线",35.0],[147.87,"想过无猜无忌",5.0],[155.02,"想与云梦相许",5.1],[163.00,"想任你劫夺红尘知遇",6.2],[170.01,"永生不得离去 ~",6.0],[180.03,"西风向孤独的人吟唱",7.0],[187.07,"是谁在拿捏心里的伤 ~",7.0],[195.01,"将欢情推离片刻时光",7.0],[204.00,"琴箫已在夜中央",5.1],[210.01,"西风向孤独的人吟唱",7.0],[217.06,"是谁在拿捏心里的伤 ~",7.0],[225.08,"将欢情推离片刻时光",8.6],[234,"琴箫已在夜中央",5.1],[240.01,"将欢情推离片刻时光",7.0],[249.01,"柳枝微扬夜中央",8.3],[258.05,"感谢欣赏",6]];
HCPlayer({
lrcAr: lrcAr,
});
</script>