Страница 1 из 11
Форум про uCoz » Раздел для uCoz » HTML коды для сайта uCoz » Индикатор прогресс бара чего либо на CSS
Индикатор прогресс бара чего либо на CSS
workman
Дата: Воскресенье, 15.10.2017, 20:44 | Сообщение # 1
Гл. Модератор
Сообщений:1696
Награды: 8


Теперь вы на своем сайте можете установить свой прогресс, который полностью работает на 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(11Kb)


Сообщение отредактировал
workman - Воскресенье, 15.10.2017, 20:44
Страна: (RU)
Kosten
Дата: Воскресенье, 15.10.2017, 21:32 | Сообщение # 2
Администраторы
Сообщений:15806
Награды: 51


Можно поставить на топ сайты, где бы функций выводило, только как настроить. 07a
Страна: (RU)
workman
Дата: Понедельник, 16.10.2017, 06:52 | Сообщение # 3
Гл. Модератор
Сообщений:1696
Награды: 8


Kosten, А по конкретней более развернуто можно объяснить что именно хотим добиться?
Страна: (RU)
DESTEQ
Дата: Понедельник, 16.10.2017, 19:32 | Сообщение # 4
Vip
Сообщений:33
Награды: 0


workman, предполагаю что Kosten имел ввиду следующее:
допустим у нас сайт каталог сайтов, или же топ сайтов, когда пользователь добавляет сайт в наш топ, сайт добавляется и этот скрипт выдаёт информацию об добавленном сайте, например "функционал сайта - 60%", "дизайн сайта - 90%" и так далее.
Яркий пример реализации подобного скрипта под спойлером (думаю Kosten это и имел ввиду).


Безграничные возможности, повышенный уровень лени.
Страна: (RU)
milan_shubin
Дата: Понедельник, 16.10.2017, 20:54 | Сообщение # 5
Заблокированные
Сообщений:10
Награды: 0


DESTEQ, было бы классно )))
Страна: (RU)
waak
Дата: Понедельник, 16.10.2017, 21:22 | Сообщение # 6
Vip
Сообщений:332
Награды: 11


Цитата DESTEQ ()
workman, предполагаю что Kosten имел ввиду следующее:
допустим у нас сайт каталог сайтов, или же топ сайтов, когда пользователь добавляет сайт в наш топ, сайт добавляется и этот скрипт выдаёт информацию об добавленном сайте, например "функционал сайта - 60%", "дизайн сайта - 90%" и так далее.
Яркий пример реализации подобного скрипта под спойлером (думаю Kosten это и имел ввиду).


так используйте доп поля для этого в чём проблема?


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Страна: (RU)
milan_shubin
Дата: Понедельник, 16.10.2017, 21:27 | Сообщение # 7
Заблокированные
Сообщений:10
Награды: 0


waak, Если не трудно можешь по подробнее сказать как это сделать, заранее спасибо 09a
Страна: (RU)
waak
Дата: Понедельник, 16.10.2017, 21:44 | Сообщение # 8
Vip
Сообщений:332
Награды: 11


как как просто в место цифр 90% 60% 55% вставьте оператор доп поля 1 - 2 - 3 а при добавлении материала в доп поля укажите те цифры которые вам нужны

Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Страна: (RU)
milan_shubin
Дата: Понедельник, 16.10.2017, 21:48 | Сообщение # 9
Заблокированные
Сообщений:10
Награды: 0


waak, я когда буду дома, попробую изменить скрипт как ты сказал.
Страна: (RU)
Kosten
Дата: Понедельник, 16.10.2017, 22:14 | Сообщение # 10
Администраторы
Сообщений:15806
Награды: 51


Цитата DESTEQ ()
Яркий пример реализации подобного скрипта под спойлером (думаю Kosten это и имел ввиду).

Все правильно, как пример, а лишнее мысли отбросите. 09a
Страна: (RU)
milan_shubin
Дата: Понедельник, 16.10.2017, 22:59 | Сообщение # 11
Заблокированные
Сообщений:10
Награды: 0


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>
Страна: (RU)
workman
Дата: Понедельник, 16.10.2017, 23:34 | Сообщение # 12
Гл. Модератор
Сообщений:1696
Награды: 8


milan_shubin, Только что примерно это и хотел написать ))
Страна: (RU)
milan_shubin
Дата: Понедельник, 16.10.2017, 23:40 | Сообщение # 13
Заблокированные
Сообщений:10
Награды: 0


workman, Ну ни чего, Я первым успел 09a 09a 09a
Страна: (RU)
DESTEQ
Дата: Вторник, 17.10.2017, 08:57 | Сообщение # 14
Vip
Сообщений:33
Награды: 0


А я имел ввиду не совсем это, а чтобы скрипт автоматически оценивал тот сайт который добавили, а то так получается сам выставляешься все критерии.

Безграничные возможности, повышенный уровень лени.
Страна: (RU)
Форум про uCoz » Раздел для uCoz » HTML коды для сайта uCoz » Индикатор прогресс бара чего либо на CSS
Страница 1 из 11
Поиск: