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 Element的Google字体导致数字被切断或诸如此类。我是这个功能的新手，尝试过使用font-size，line-height等等，但没有成功。此外，我更喜欢使用px而不是em，并且在尝试转换font-size扇区内的:before之类的内容时，会发生更多混乱。

同样在将字体更改为"Comic Sans MS", cursive, sans-serif时，每个第10个增量似乎都会影响文本的位置。

2）。如何添加百分比（％）符号？

我希望在数字的末尾添加一个百分比符号来表示加载的百分比，而不是0到100之间的简单数字计数器。

第3）。如何实施补色？

从红色开始我想补间橙色然后补间变为绿色，因为百分比接近100。

Answer 1

＆＃13;

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;
    }
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

可以使用以下内容来改变颜色。但是休息查询，我也想不通。

                    background: #ffffff; /* For browsers that do not support gradients */
                    background: -webkit-linear-gradient(green,red); /* For Safari 5.1 to 6.0 */
                    background: -o-linear-gradient(green,red); /* For Opera 11.1 to 12.0 */
                    background: -moz-linear-gradient(green,red); /* For Firefox 3.6 to 15 */
                    background: linear-gradient(green,red); /* Standard syntax */

HTML5进度元素

我的HTML5进度元素

问题

2 个答案: