CODEWITHSUNDEEP
javascriptjquerycsshtml
Tyler
Tyler

Reputation: 874

HTML5 Progress Element

My HTML5 Progress Element

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>

Questions

1). How Can I Use "Comic Sans MS", cursive, sans-serif?

My attempts to replace the Google font which was used in the source for building this HTML5 Progress Element have resulted in the number being cut off or whatnot. I'm new to this feature and have tried playing around with the font-size, line-height and whatnot with no success. In addition, I much prefer using px rather than em and upon attempting to convert the likes of the font-size within the :before sector, more chaos occurs.

Also upon changing the font to "Comic Sans MS", cursive, sans-serif, each 10th increment seems to glitch the positioning of the text.

2). How Can I Add A Percentage (%) Symbol?

Instead of a simply numeric counter from 0 to 100, I would like to add a percentage symbol to the end of the number to indicate the percentage loaded.

3). How Can I Implement A Colour Tween?

Starting with red I would then like to tween to orange and then tween to green as the percentage draws closer to 100.

Upvotes: 2

Views: 620

Answers (2)

Faisal Ramzan
Faisal Ramzan

Reputation: 169

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>

Upvotes: 1

T.Shah
T.Shah

Reputation: 2768

May be you can use the following to change color. But rest queries, I could not figure out too.

                    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 */

Upvotes: 0

Related Questions