XenForo 2.x.x прогресс бар для сбора чего-либо (денег, людей)

liner

Проверенные
Сообщения
1,010
Решения
2
Реакции
395
Баллы
8,195
Приветствую. Интересует такая фича как прогресс-бар для напрример
- сбора денег (с ручным релактирование финальной суммы и вводом, сколько собрано)
- сбора людей на мероприятие
и т.п.

есть что-нибудь подобное? Как тут
 
Последнее редактирование:
Просто если надо HTML и LESS
HTML:
<div class="progress-bar--wrap" style="color: #16A085">
    <div class="progress-bar">
        <div class="progress-bar--inner" style="width: 20%; background-color: #16A085"></div>
    </div>
    <span class="progress-bar--counter">20%</span>
</div>
Less:
.progress-bar--wrap {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    margin: 10px;
    .progress-bar {
        background: #f1f6fa;
        border: 1px solid #ccd6dd;
        border-radius: 10px;
        height: 15px;
        overflow: hidden;
        position: relative;
        width: 300px;
        .progress-bar--inner {
            background-image: linear-gradient(-45deg, rgba(0,0,0,.15) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.15) 75%, transparent 75%, transparent);
            background-size: 2.5em 2.5em;
            border-radius: 10px;
            height: 13px;
            left: 0;
            min-height: 10px;
            position: absolute;
            top: 0;
            animation: bar-anim 5s linear infinite;
        }
    }
    .progress-bar--counter {
        margin-left: 10px;
    }
}

@keyframes bar-anim {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 5em 0;
    }
}
 
Последнее редактирование:
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу