[progress] Animated Progress Bar

Всякакви bbcodes за phpbb.
Аватар
d3ath2435
Извън линия
Рекламатор
Рекламатор
Мнения: 542
Регистриран на: 04 Фев 2017, 19:59
Се отблагодари: 64 пъти
Получена благодарност: 127 пъти
Обратна връзка:

[progress] Animated Progress Bar

Мнение от d3ath2435 » 05 Ное 2017, 15:32

Изображение
Онлайн демо с цветовете
 ! Съобщение от: 1fRaNkkK
За да добавите BBCode-а без цветовете използвайте кодовете след числото 1!
За да добавите BBCode-а със цветовете използвайте кодовете след числото 2!
BBCode Usage: Select all
  1. Код за потвърждение: Избери целия код

    [progress]{NUMBER}[/progress]
  2. Код за потвърждение: Избери целия код

    [progress={COLOR}]{NUMBER}[/progress]

HTML Replacement: Select all
  1. Код за потвърждение: Избери целия код

    <div style="display: inline-block; background-color: #282828; border-radius: 7px; box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3); height: 17px; padding: 6px; width: 380px;"><div style="display: inline-block; height: 100%; width: {NUMBER}%; max-width: 100%; background-color: CornflowerBlue; border-radius: 3px;"><div style="width: 100%; height: 15px; border-radius: 20px; -webkit-animation: progress 1s linear infinite; -moz-animation: progress 1s linear infinite; animation: progress 1s linear infinite; background-repeat: repeat-x; background-size: 30px 30px; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);"></div></div></div>
  2. Код за потвърждение: Избери целия код

    <div style="display: inline-block; background-color: #282828; border-radius: 7px; box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3); height: 17px; padding: 6px; width: 380px;"><div style="display: inline-block; height: 100%; width: {NUMBER}%; max-width: 100%; background-color: {COLOR}; border-radius: 3px;"><div style="width: 100%; height: 15px; border-radius: 20px; -webkit-animation: progress 1s linear infinite; -moz-animation: progress 1s linear infinite; animation: progress 1s linear infinite; background-repeat: repeat-x; background-size: 30px 30px; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);"></div></div></div>
Help Line: Select all
  1. Код за потвърждение: Избери целия код

    [progress]Number from 1 to 100[/progress]
  2. Код за потвърждение: Избери целия код

    [progress=colorName]Number between 0 & 100[progress]
След като създадете bbcode-а(който и да е) отваряте styles/your_style/theme/common.css и най-отдолу в кода поставяте:

Код за потвърждение: Избери целия код

@-webkit-keyframes progress {
    to {
        background-position: 30px 0;
    }
}

@-moz-keyframes progress {
    to {
        background-position: 30px 0;
    }
}

@keyframes progress {
    to {
        background-position: 30px 0;
    }
}
Редактирана - 1fRaNkkK
Благодарности - OciXCrom™ (за кода с цветната версия)
Източник - DGP-BG.COM (за кода без цветовете)
Последно промяна от 1fRaNkkK на 24 Яну 2018, 00:08, променено общо 2 пъти.
Причина: Цялостен update на темата!

Аватар
1fRaNkkK
Извън линия
Потребител
Потребител
Мнения: 776
Регистриран на: 09 Окт 2016, 15:21
Се отблагодари: 8 пъти
Получена благодарност: 55 пъти

[progress] Animated Progress Bar

Мнение от 1fRaNkkK » 24 Яну 2018, 00:10

Темата е изцяло update-ната, както и почистена, т.е. всички мнения са изтрити, тъй като вече всичко е обяснено в първото мнение.
Задължително прочетете темата и следвайте стъпките преди да пишете в темата!

Публикувай отговор
  • Подобни теми
    Отговори
    Преглеждания
     Последно мнение

Обратно към “BBCodes”

Кой е на линия

Потребители разглеждащи този форум: 0 регистрирани и 8 госта