• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Индикатор прогресс бара чего либо на CSS
Индикатор прогресс бара чего либо на CSS
workman
Воскресенье, 15 Октября 2017 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Теперь вы на своем сайте можете установить свой прогресс, который полностью работает на CSS. Где настроите под любую функцию и можно при настройке потом выводить.



По месту
Код
<h4 class="progress-title">НА ZORNET HTML</h4>
      <div class="progress pink">
        <div class="progress-bar" style="width:90%; background:#d01d4c;">
          <div class="progress-value">90%</div>
        </div>
      </div>

      <h4 class="progress-title">НА ZORNET CSS ФАЙЛОВ</h4>
      <div class="progress green">
        <div class="progress-bar" style="width:60%; background:#248075;">
          <div class="progress-value">60%</div>
        </div>
      </div>

      <h4 class="progress-title">НА ZORNET JQUERY</h4>
      <div class="progress yellow">
        <div class="progress-bar" style="width:55%; background:#faa916;">
          <div class="progress-value">55%</div>
        </div>
      </div>

Стили
Код
.progress-title {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0 0 20px;
}

.progress {
  height: 3px;
  background: #8e44ad;
  border-radius: 0;
  margin-bottom: 30px;
  overflow: visible;
  box-shadow: none;
  position: relative;
}

.progress .progress-bar {
  height: 8px;
  position: relative;
  top: -3px;
  box-shadow: none;
  animation: animate-positive 2s;
}

.progress .progress-value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  position: absolute;
  top: -30px;
  right: 5px;
}

.progress.pink {
  background: #d01d4c;
}

.progress.green {
  background: #248075;
}

.progress.yellow {
  background: #faa916;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0%;
  }
}

@keyframes animate-positive {
  0% {
    width: 0%;
  }
}


смотреть демо
Прикрепления: 9343740.png (11.2 Kb)


Сообщение отредактировал
workman - Воскресенье, 15 Октября 2017, 20:44
Страна: (RU)
Kosten
Воскресенье, 15 Октября 2017 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Можно поставить на топ сайты, где бы функций выводило, только как настроить. 07a
Страна: (RU)
workman
Понедельник, 16 Октября 2017 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Kosten, А по конкретней более развернуто можно объяснить что именно хотим добиться?
Страна: (RU)
DESTEQ
Понедельник, 16 Октября 2017 | Сообщение 4
Оффлайн
Vip
Сообщений:60
Награды: 0
workman, предполагаю что Kosten имел ввиду следующее:
допустим у нас сайт каталог сайтов, или же топ сайтов, когда пользователь добавляет сайт в наш топ, сайт добавляется и этот скрипт выдаёт информацию об добавленном сайте, например "функционал сайта - 60%", "дизайн сайта - 90%" и так далее.
Яркий пример реализации подобного скрипта под спойлером (думаю Kosten это и имел ввиду).


Telegram: @desteq
Страна: (RU)
milan_shubin
Понедельник, 16 Октября 2017 | Сообщение 5
Оффлайн
Заблокированные
Сообщений:82
Награды: 2
DESTEQ, было бы классно )))

Нужен помощь?
Нужен помочь с шаблоном?
Нужен переделать сайт?
-------------------------
Поможем вам быстро и качественно / TurBo-S.aT.uA
Страна: (RU)
waak
Понедельник, 16 Октября 2017 | Сообщение 6
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
Цитата DESTEQ ()
workman, предполагаю что Kosten имел ввиду следующее:
допустим у нас сайт каталог сайтов, или же топ сайтов, когда пользователь добавляет сайт в наш топ, сайт добавляется и этот скрипт выдаёт информацию об добавленном сайте, например "функционал сайта - 60%", "дизайн сайта - 90%" и так далее.
Яркий пример реализации подобного скрипта под спойлером (думаю Kosten это и имел ввиду).


так используйте доп поля для этого в чём проблема?
Страна: (RU)
milan_shubin
Понедельник, 16 Октября 2017 | Сообщение 7
Оффлайн
Заблокированные
Сообщений:82
Награды: 2
waak, Если не трудно можешь по подробнее сказать как это сделать, заранее спасибо 09a

Нужен помощь?
Нужен помочь с шаблоном?
Нужен переделать сайт?
-------------------------
Поможем вам быстро и качественно / TurBo-S.aT.uA
Страна: (RU)
waak
Понедельник, 16 Октября 2017 | Сообщение 8
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
как как просто в место цифр 90% 60% 55% вставьте оператор доп поля 1 - 2 - 3 а при добавлении материала в доп поля укажите те цифры которые вам нужны
Страна: (RU)
milan_shubin
Понедельник, 16 Октября 2017 | Сообщение 9
Оффлайн
Заблокированные
Сообщений:82
Награды: 2
waak, я когда буду дома, попробую изменить скрипт как ты сказал.

Нужен помощь?
Нужен помочь с шаблоном?
Нужен переделать сайт?
-------------------------
Поможем вам быстро и качественно / TurBo-S.aT.uA
Страна: (RU)
Kosten
Понедельник, 16 Октября 2017 | Сообщение 10
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Цитата DESTEQ ()
Яркий пример реализации подобного скрипта под спойлером (думаю Kosten это и имел ввиду).

Все правильно, как пример, а лишнее мысли отбросите. 09a
Страна: (RU)
milan_shubin
Понедельник, 16 Октября 2017 | Сообщение 11
Оффлайн
Заблокированные
Сообщений:82
Награды: 2
Waak, Спасибо за подсказку, Для тех кому нужен вот пример:
Код
<div class="progress-bar" style="width:90%; background:#d01d4c;">
          <div class="progress-value">90%</div>

на этот
Код
<h4 class="progress-title">НА ZORNET HTML</h4>
      <div class="progress pink">
        <div class="progress-bar" style="width:$OTHER1$%; background:#d01d4c;">
          <div class="progress-value">$OTHER1$%</div>
        </div>
      </div>


Нужен помощь?
Нужен помочь с шаблоном?
Нужен переделать сайт?
-------------------------
Поможем вам быстро и качественно / TurBo-S.aT.uA
Страна: (RU)
workman
Понедельник, 16 Октября 2017 | Сообщение 12
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
milan_shubin, Только что примерно это и хотел написать ))
Страна: (RU)
milan_shubin
Понедельник, 16 Октября 2017 | Сообщение 13
Оффлайн
Заблокированные
Сообщений:82
Награды: 2
workman, Ну ни чего, Я первым успел 09a 09a 09a

Нужен помощь?
Нужен помочь с шаблоном?
Нужен переделать сайт?
-------------------------
Поможем вам быстро и качественно / TurBo-S.aT.uA
Страна: (RU)
DESTEQ
Вторник, 17 Октября 2017 | Сообщение 14
Оффлайн
Vip
Сообщений:60
Награды: 0
А я имел ввиду не совсем это, а чтобы скрипт автоматически оценивал тот сайт который добавили, а то так получается сам выставляешься все критерии.

Telegram: @desteq
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Индикатор прогресс бара чего либо на CSS
  • Страница 1 из 1
  • 1
Поиск: