Как сделать process bar з длиной больше чем 100?

Question

[ccactuss]

Сделала process bar , но хочу сделать диапазон больше 100, т.к. будут использоваться значения 30000 и больше.

По сути все считаеться по фромуле $this.css("width", per + '%');, но может есть другой способ заполнить шкалу.

Jquery

$('.Number__two').each(function () {
    var $this = $(this);
    var per = $this.attr('per');
    $this.css("width", per + '%');
    $({ animatedValue: 0 }).animate({ animatedValue: per }, {
        duration: 1000,
        step: function () {
            $this.attr('per', Math.floor(this.animatedValue));
        },
        complete: function () {
            $this.attr('per', Math.floor(this.animatedValue));
        }
    });
});

HTML:

<div class="col-xl-6">
                    <div class="detail__value">
                        <div class="bl_text">
                            <p>3DMark Ice Storm GPU</p>
                        </div>
                        <div class="value">
                            <div class="Number__lineChart">
                                <div class="Number__two" per='30'></div>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

[Александр]

Если у Вас имеется максимально возможно значение, то Вы можете рассчитать процент по формуле (now / total) * 100:

function calculatePercent(value, max) {
    return (value / max) * 100;
}

Comments

[ccactuss]

Спасибо!