CSS：改变progress进度条样式
本帖最后由 马黑黑 于 2022-11-27 15:26 编辑 <br /><br /><style>.prog {
-webkit-appearance: none;
width: 200px;
height: 12px;
outline: none;
border: none;
}
.prog::-webkit-progress-bar {
background: pink;
border-radius: 12px;
}
.forFirefox {
background: pink;
border-radius: 12px;
}
.prog::-webkit-progress-value {
background: red;
border-radius: 12px;
}
.prog::-moz-progress-bar {
background: red;
border-radius: 12px;
}
</style>
<p>progress是HTML5新增标签，用于表示任务完成进度，任务总量用属性 max 表示（max是最大值的意思）、任务完成进度用属性 value 表示（value就是值的意思）：<br><br><progress max="100" value="25"></progress><br><br></p>
<p><progress max="100" value="25"></progress></p>
<p><br>不同的浏览器上面的 progress 标签效果是不一样的，IE要到10或以上版本才支持progress标签。<br><br></p>
<p>由于progress任务完成量和未完成任务的指示颜色是分开的，就很合适用来做音频播放器进度条，但为了在各浏览器下统一外观、且能自定义轨道和进度指示颜色，我们需要给它换装。这里先适配chromium即基于 webkit 内核的浏览器。</p>
<p><br>第一步：脱衣（这回我们温和一点，不剥皮了）——</p><p><br></p><p>progress {<br> <font color="#ff0000">-webkit-appearance: none;</font></p><p> height: 12px;</p><p> width: 200px;<br> border: none;<br> outline: none;<br>}</p><p><br></p><p><font color="#ff0000">-webkit-appearance: none; </font>就是把progress的外观设置成啥也木有。当然，身体是有的，所以，我们同时给它设置一下高宽尺寸，为了确保其他浏览器下出现意外，我们还将边框、外边框都设置为无。</p>
<p><br>第二步：穿新衣<br><br>先给它穿件连衣裙外套，头和脚都罩好，免得赤身衤果体的会招来城管的严厉管教。——这个，其实就是<span style="background-color: sandybrown;">轨道整体颜色</span>，chromium有一个内置的伪元素留给web开发者使用，<font color="#ff0000">-webkit-progress-bar</font>——</p><p><br></p><p>progress<font color="#ff0000">::-webkit-progress-bar</font> {<br><span style="white-space: pre;"> </span>background: pink;<br><span style="white-space: pre;"> </span>border-radius: 12px;<br>}</p><p><br>border-radius的设置值和前面的height值一致或略小一点，这就能保证两头是圆角的，若不设置border-radius，穿好新衣后的progress是条状矩形，两头有菱有角不圆润。</p><p><br>接着给它穿条短裙装饰一下就会美美哒啦。——这个，其实就是<span style="background-color: sandybrown;">任务完成量的颜色</span>指示，chromium提供的内置伪元素是 <font color="#ff0000">::-webkit-progress-value</font>——<br><br>progress<font color="#ff0000">::-webkit-progress-value</font> {<br> background: red;<br> border-radius: 12px;<br>}</p><p><br>欧~，效果来了：<br><br></p>
<p><progress max="100" value="25" class="prog"></progress></p>
<p><br>哇~，很酷是吧？</p><p><br>上面的progress效果，现在在chromium内核的浏览器下美丽动人，可但是，Firefox下，样纸很难看。嗯，Firefox也有一个 bar，但它是指progress短裙部分的，就是它是<span style="background-color: sandybrown;">任务完成量</span>的指示颜色，<font color="#ff0000">::-moz-progress-bar</font>——</p><p><br></p><p> #prog<font color="#ff0000">::-moz-progress-bar</font> {</p><p> <span style="white-space:pre"> </span>/* -moz-progress-bar 等同于 -webkit-progress-value */<br> background: red;<br> border-radius: 12px;</p><p> }</p><p><br>那Firefox下它的长裙（轨道）肿么办呢？好办，直接在前面的 <span style="background-color: sandybrown;">progress { ... }</span> 那里添加就好：</p><p><br></p><p>progress {<br> -webkit-appearance: none;</p><p> height: 12px;</p><p> width: 200px;<br> border: none;<br> outline: none;<br> <font color="#008000">/* for Firefox below */</font><br></p><p><font color="#ff0000"> background: pink;<br> border-radius: 12px;</font><br>}</p><p><br>现在，下面的效果，Firefox浏览器也应该是一位高雅漂亮的 progress 菇凉了（其实它和上面那位是同一个progress，只是加了基于Firefox的设置）——</p>
<p><br><progress max="100" value="25" class="prog forFirefox"></progress><br></p>
<p><br>最后，请观赏两位progress菇凉，其value值都未设置，一位是默认的，一位是穿包头包脚长裙的：</p>
<p><br><progress max="100"></progress><br></p>
<p><br><progress max="100" class="prog forFirefox"></progress><br></p> 当不设置 value 值是，chromium以轨道颜色、Firefox以任务完成指示颜色渲染progress 本帖最后由 马黑黑 于 2022-11-27 18:17 编辑 <br /><br /><style>
#papa {
margin: auto;
display: grid;
place-items: center;
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) {cKey = j;if (mKey === j) showLrc(data.lrcAr);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;lrc.dataset.lrc = data.lrcAr.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) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);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 = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
HCPlayer({
lrcAr: lrcAr,
});
</script>
上楼代码：
<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) {cKey = j;if (mKey === j) showLrc(data.lrcAr);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;lrc.dataset.lrc = data.lrcAr.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) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);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 = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
HCPlayer({
lrcAr: lrcAr,
});
</script>
又把progress给整容了，黑黑真是手段高明{:4_199:} 红影 发表于 2022-11-27 19:37
又把progress给整容了，黑黑真是手段高明
就是因为你上次问progress能不能自定义进度条颜色，我去查了一下火狐开发手册，然后又看MSDN有关文档，就做出来了 先剥皮，再换衣，然后就以崭新面貌出现了。记得之前还问你如何修改进度条颜色呢，现在终于可以换了{:4_187:} 红影 发表于 2022-11-27 19:52
先剥皮，再换衣，然后就以崭新面貌出现了。记得之前还问你如何修改进度条颜色呢，现在终于可以换了{:4_187: ...
看6# 多谢老师的代码分享，欣赏问好！{:4_187:} 梦缘 发表于 2022-11-27 20:59
多谢老师的代码分享，欣赏问好！
晚上好 马黑黑 发表于 2022-11-27 19:42
就是因为你上次问progress能不能自定义进度条颜色，我去查了一下火狐开发手册，然后又看MSDN有关文档，就 ...
是啊，那些觉得进度条颜色和背景合不上，没想到现在被黑黑开发出可换颜色了，太厉害了{:4_199:} 马黑黑 发表于 2022-11-27 19:56
看6#
呵呵，我们都想起这事了，我也是一边回帖一边想起那次问你怎么改颜色{:4_173:} 红影 发表于 2022-11-27 21:28
呵呵，我们都想起这事了，我也是一边回帖一边想起那次问你怎么改颜色
{:4_364:} 红影 发表于 2022-11-27 21:27
是啊，那些觉得进度条颜色和背景合不上，没想到现在被黑黑开发出可换颜色了，太厉害了
所用的都是基于浏览器的伪元素，w3c并没有提供这些规范 马黑黑 发表于 2022-11-27 21:47
黑黑辛苦了，请你喝酒，别哭了{:4_173:}{:4_191:} 马黑黑 发表于 2022-11-27 21:48
所用的都是基于浏览器的伪元素，w3c并没有提供这些规范
能被黑黑想出办法来，真的很不容易呢{:4_187:} 红影 发表于 2022-11-28 10:43
能被黑黑想出办法来，真的很不容易呢
有文档的，会查就行 红影 发表于 2022-11-28 10:42
黑黑辛苦了，请你喝酒，别哭了
那是含泪点头同意 马黑黑 发表于 2022-11-28 12:29
有文档的，会查就行
入不了门径的人连文档都找不到的呀{:4_173:} 马黑黑 发表于 2022-11-28 12:29
那是含泪点头同意
被你一说，才发现好多表情都没去用过{:6_257:}