Индикатор прогресса на основе % достижения цели ⇐ CSS

[Anonymous]

Я пытаюсь создать индикатор выполнения, который будет обновляться и показывать, насколько близок игрок к возможности приобрести обновление.
Приносим извинения, если это неправильно отформатировано! Первое сообщение.
Вот что у меня есть на данный момент:
HTML:

Код: Выделить всё

1%

CSS:

Код: Выделить всё

/* Progress Bar */
#Progress {
width: 100%;
background-color: black;
}

#progressBar {
width: 1%;
height: 40px;
background-color: purple;
text-align: center;
line-height: 40px;
color: white;
}

Что бы я добавил в свой JavaScript? Я пробовал следующим образом:

Код: Выделить всё

document.getElementById("progressBar").style.width = (gameData.gems / gameData.prestigeMultiCost)

Я понимаю, что это неправильно и представляет собой смесь нескольких концепций, но я не понимаю, как заставить это работать.
Спасибо!
РЕДАКТИРОВАТЬ: Вот мой последний фрагмент кода. Цель состоит в том, чтобы цвет фона менялся от белого к темно-золотому по мере того, как вы собираете больше алмазов, вплоть до 1000.

Код: Выделить всё

window.setInterval(function () {
document.body.style.backgroundColor = " rgb (255, " + (255 - (gameData.diamonds * 0.039)) + ", " + (255 - (gameData.diamonds * 0.255)) + ")"
}, 10)

РЕДАКТИРОВАТЬ 2: у меня просто было лишнее место... Хотя я это сделал!

Подробнее здесь: https://stackoverflow.com/questions/791 ... wards-goal