index.html

<script src="https://cdn.rawgit.com/straker/html-tagged-template/043f11d7659365d25e3b0784bcd613d1c738253b/index.js"></script>

<div class="wrapper">
	<div class="bars"></div>
	<div class="grad"></div>
</div>

<style>
	.wrapper {
		display: flex;
		flex-flow: row nowrap;
	}
	.wrapper > * {
		flex: 1;
	}
	.wrapper > *:not(:last-child) {
		margin-right: 10px;
	}
</style>

<script>
	function findWordForProgress(maxProgress, currentProgress) {
		const progress = currentProgress / maxProgress

		if (progress >= 1) {
			return 'hundred'
		}
		else if (progress >= 0.9) {
			return 'ninety'
		}
		else if (progress >= 0.8) {
			return 'eighty'
		}
		else if (progress >= 0.7) {
			return 'seventy'
		}
		else if (progress >= 0.6) {
			return 'sixty'
		}
		else if (progress >= 0.5) {
			return 'fifty'
		}
		else if (progress >= 0.4) {
			return 'forty'
		}
		else if (progress >= 0.3) {
			return 'thirty'
		}
		else if (progress >= 0.2) {
			return 'twenty'
		}
		else if (progress >= 0.1) {
			return 'ten'
		}
		else if (progress > 0) {
			return 'under-ten'
		}

		return 'zero'
	}
</script>


<script>
	function bar(value, max) {
		value = value === undefined ? 0 : value
		max = max === undefined ? 1 : max

		const width = 100 * (value / max)
		const progressWord = findWordForProgress(max, value)

		return html`<div class='progress-bar ${progressWord}' data-progress="${value}" data-of="${max}">
			<div class='progress-bar--track' style="height: 100%; width: 100%">
				<div class='progress-bar--value' style="height: 100%; width: ${width}%" />
			</div>
		</div>`
	}
</script>

<script>
	function bar2(value, max) {
		value = value === undefined ? 0 : value
		max = max === undefined ? 1 : max

		const width = 100 * (value / max)
		const progressWord = findWordForProgress(max, value)

		return html`<div class='progress-bar2 ${progressWord}' data-progress="${value}" data-of="${max}">
			<div class='progress-bar--track' style="height: 100%; width: 100%">
				<div class='progress-bar--value' style="height: 100%; width: ${width}%" />
			</div>
		</div>`
	}
</script>

<script>
	function* range(to) {
		for (let i = 0; i < to; i++) {
			yield i;
		}
	}
</script>

<script>
	let el1 = document.querySelector('.bars')
	for (let i of range(101)) {
		el1.appendChild(bar(i, 100))
	}

	let el2 = document.querySelector('.grad')
	for (let i of range(101)) {
		el2.appendChild(bar2(i, 100))
	}
</script>


<style>
	.progress-bar {
	    border: 1px solid currentColor;
	    border-radius: 3px;
	    background-color: white;
	    height: 5px;

	    color: #e0e0e0;
	}
	.progress-bar.hundred   { color: #81c784; }
	.progress-bar.ninety    { color: #ffb74d; }
	.progress-bar.eighty    { color: #ffb74d; }
	.progress-bar.seventy   { color: #ffb74d; }
	.progress-bar.sixty     { color: #fbc02d; }
	.progress-bar.fifty     { color: #fdd835; }
	.progress-bar.forty     { color: #fdd835; }
	.progress-bar.thirty    { color: #ffc107; }
	.progress-bar.twenty    { color: #e57373; }
	.progress-bar.ten       { color: #e57373; }
	.progress-bar.under-ten { color: #e57373; }

	.progress-bar .progress-bar--value {
	    background-color: currentColor;
	    max-width: 100%;
	}
</style>

<style>
.progress-bar2 {
    border: 1px solid currentColor;
    border-radius: 3px;
    /*background-color: white;*/
    height: 5px;

    /*color: #e0e0e0;*/
}
/*.progress-bar2.hundred   { color: #81c784; }
.progress-bar2.ninety    { color: #ffb74d; }
.progress-bar2.eighty    { color: #ffb74d; }
.progress-bar2.seventy   { color: #ffb74d; }
.progress-bar2.sixty     { color: #fbc02d; }
.progress-bar2.fifty     { color: #fdd835; }
.progress-bar2.forty     { color: #fdd835; }
.progress-bar2.thirty    { color: #ffc107; }
.progress-bar2.twenty    { color: #e57373; }
.progress-bar2.ten       { color: #e57373; }
.progress-bar2.under-ten { color: #e57373; }*/

.progress-bar2 .progress-bar--value {
    background-image: linear-gradient(to right, #e0e0e0, #e57373, #e57373, #e57373, #ffc107, #fdd835, #fdd835, #fbc02d, #ffb74d, #ffb74d, #ffb74d, #81c784);
    background-color: currentColor;
    max-width: 100%;
}
</style>

Opto sempre por jogar apenas no mesmo sítio de apostas online mostbet.com a que estou habituado e onde gosto realmente de passar o tempo a jogar e onde pode tentar jogar também, porque é fácil entrar no jogo e começar a ganhar mais do que nunca, recomendo que experimente!