javascript - HTML5 进度元素

Question

我的 HTML5 进度元素

var value = 0, pos = 0,
    progressHidden = false,
    progressEl = $('progress'),
    timer = setInterval(progress, 100);

function progress() {

    // run counter
    value++;
    if (value <= 100) {
        progressEl.val(value);
        pos = 1 - (value / 100);
    }

    // update background
    progressEl.css('background-position', '0 ' + pos + 'em');

    // show/hide progress
    if (progressHidden && value < 100) {
        progressEl.val(0);
        progressEl.removeClass("hidden");
        progressHidden = false;
    }

}

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:700);
body {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 50px;
	background: #000000;
}
progress {
	appearance: none;
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 1em;
	padding: 0;
	border: none;
	font-family: "Ubuntu Mono", sans-serif;
	font-size: 120px;
	transition: height .4s;
}

progress.hidden {
	height: 0;
	transition-delay: .4s;
}

progress::before {
	content: attr(value);
	position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	text-align: center;
	font-size: 1.5em;
	line-height: .62em;
	color: hsla(0,0%,100%,.2);
	background: linear-gradient( 
		hsla(0,0%,100%,.6),
		hsla(0,0%,100%,.0) 70% ) 
		no-repeat center;
	background-position: inherit;
	-webkit-background-clip: text;
	background-clip: text;
}


progress::-webkit-progress-bar,
	progress::-webkit-progress-value {
	background: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress max="99"></progress>

问题

1).我如何使用“Comic Sans MS”、草书、无衬线字体？

我试图替换用于构建此 HTML5 Progress 元素的源代码中使用的 Google 字体，结果导致数字被 chop 或诸如此类。我是这个功能的新手，曾尝试使用 font-size、line-height 等等，但都没有成功。此外，我更喜欢使用 px 而不是 em 并且在尝试转换 中的 font-size 之类的东西时:在扇区之前，会出现更多的困惑。

同样，在将字体更改为 “Comic Sans MS”、草书、无衬线字体 后，每增加 10 个字体似乎就会出现文本定位错误。

2).如何添加百分比 (%) 符号？

我想在数字末尾添加一个百分比符号，而不是从 0 到 100 的简单数字计数器，以指示加载的百分比。

3).如何实现颜色补间？

从红色开始，我想补间到橙色，然后在百分比接近 100 时补间到绿色。

Answer 1

var value = 0, pos = 0,
    progressHidden = false,
    progressEl = $('progress'),
    timer = setInterval(progress, 100);

function progress() {

    // run counter
    value++;
    if (value <= 100) {
        progressEl.val(value);
        pos = 1 - (value / 100);
		if(value == '10') {
			$('progress').addClass('ten');
		}
		if(value == '100') {
			$('progress').addClass('hundred');
		}
    }
    // update background
    progressEl.css('background-position', '0 ' + pos + 'em');

    // show/hide progress
    if (progressHidden && value < 100) {
        progressEl.val(0);
        progressEl.removeClass("hidden");
        progressHidden = false;
    }
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 50px;
	background: #000000;
}
progress {
	appearance: none;
	position: relative;
	width: 450px;
	height: 1.4em;
	padding: 0;
	border: none;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size: 120px;
	transition: height .4s;
}
progress.hidden {
	height: 0;
	transition-delay: .4s;
}
progress::before {
	content: attr(value);
	position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
	text-align: center;
	font-size: 1.5em;
	line-height: .80em;
	color: hsla(0,0%,100%,.2);
	background: linear-gradient( green, orange ) no-repeat center;
	background: -moz-linear-gradient( green, orange ) no-repeat center;
	background: -webkit-linear-gradient( green, orange ) no-repeat center;
	background: -o-linear-gradient( green, orange ) no-repeat center;
	background: -ms-linear-gradient( green, orange ) no-repeat center;
	background-position: inherit;
	-webkit-background-clip: text;
	background-clip: text;
}
progress::after {
	content: '%';
	position: absolute;
		top: 0;
		right: 190px;
		bottom: 0;
	text-align: center;
	font-size: 1.5em;
	line-height: .80em;
	color: hsla(0,0%,100%,.2);
	background: linear-gradient( green, orange ) no-repeat center;
	background: -moz-linear-gradient( green, orange ) no-repeat center;
	background: -webkit-linear-gradient( green, orange ) no-repeat center;
	background: -o-linear-gradient( green, orange ) no-repeat center;
	background: -ms-linear-gradient( green, orange ) no-repeat center;
	background-position: inherit;
	-webkit-background-clip: text;
	background-clip: text;
}
progress.ten::after {
		right: 100px;
}
progress.hundred::after {
		right: 0px;
}
progress::-webkit-progress-bar,
	progress::-webkit-progress-value {
	background: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress max="99"></progress>