Прогресс-бар с пользовательской модификацией - PullRequest
Новая
       53

Прогресс-бар с пользовательской модификацией

0 голосов
/ 25 октября 2019

Я вставляю код моего индикатора прогресса ниже

jQuery(function ($) {
    var bar = $(".bar");
    var sec = $(".seconds");
    var width = 0;
    var id = setInterval(
        function () {
            if (width >= 2000) {
                window.location.href = '#';
                clearInterval(id);
            } else {
                width++;
                bar.width(width / 20 + '%');
                sec.html((width / 20).toFixed() + '%');
            }
        }, 5);
});

body {
    background: #0d344f;
    color: #fff;
    margin: 0 auto;
}

.kontener_glowny {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sekcja_glowna,
.sekcja_dolna {
    text-align: center;
}

.sekcja_glowna {
    width: 100%;
    height: 70%;
}

.countdown {
    background-color: transparent;
    position: relative;
}

.countdown::after {
    content: "";
    height: 0px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.bar {
    width: 0%;
    height: 40px;
    background-color: #4CAF50;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    margin: 10px auto;
}

.seconds {
    font-size: 26px;
    line-height: 39px;
    font-weight: 600;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kontener_glowny">
    <div class="sekcja_glowna">
        <div class="countdown">
            <div class="bar">
                <div class="seconds"></div>
            </div>
        </div>
    </div>
</div>

Я хотел бы изменить свой код так, чтобы он отображал текст после n% под индикатором выполнения

например,

30%- показать текст_160% - показать текст_290% - показать текст_3

и т. Д. Во-вторых, я хотел бы сохранить настройки времени загрузки индикатора выполнения, например, 0–100% через 20 секунд, но хотелось бы, чтобы анимация загрузки не была линейной.

Оригинальный код https://jsfiddle.net/jhf74Lwv/

...