• Страница 1 из 1
  • 1
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Индикатор прогресс бара чего либо на CSS
Индикатор прогресс бара чего либо на CSS
workman
Дата: Воскресенье, 15.10.2017, 20:44 | Сообщение 1
Гл. Модератор
Сообщений:1717
Награды: 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.10.2017, 20:44
Страна: (RU)
Kosten
Дата: Воскресенье, 15.10.2017, 21:32 | Сообщение 2
Администраторы
Сообщений:17616
Награды: 55


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


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


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


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


DESTEQ, было бы классно )))

Web matser Milan
Страна: (RU)
waak
Дата: Понедельник, 16.10.2017, 21:22 | Сообщение 6
Друзья сайта
Сообщений:452
Награды: 12


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


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


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545

http://talantlev.ucoz.ru Скрипты от автора помощь по uCoz
Страна: (RU)
milan_shubin
Дата: Понедельник, 16.10.2017, 21:27 | Сообщение 7
Проверенные
Сообщений:63
Награды: 2


waak, Если не трудно можешь по подробнее сказать как это сделать, заранее спасибо 09a

Web matser Milan
Страна: (RU)
waak
Дата: Понедельник, 16.10.2017, 21:44 | Сообщение 8
Друзья сайта
Сообщений:452
Награды: 12


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

Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545

http://talantlev.ucoz.ru Скрипты от автора помощь по uCoz
Страна: (RU)
milan_shubin
Дата: Понедельник, 16.10.2017, 21:48 | Сообщение 9
Проверенные
Сообщений:63
Награды: 2


waak, я когда буду дома, попробую изменить скрипт как ты сказал.

Web matser Milan
Страна: (RU)
Kosten
Дата: Понедельник, 16.10.2017, 22:14 | Сообщение 10
Администраторы
Сообщений:17616
Награды: 55


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

Все правильно, как пример, а лишнее мысли отбросите. 09a
Страна: (RU)
milan_shubin
Дата: Понедельник, 16.10.2017, 22:59 | Сообщение 11
Проверенные
Сообщений:63
Награды: 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>


Web matser Milan
Страна: (RU)
workman
Дата: Понедельник, 16.10.2017, 23:34 | Сообщение 12
Гл. Модератор
Сообщений:1717
Награды: 9


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


workman, Ну ни чего, Я первым успел 09a 09a 09a

Web matser Milan
Страна: (RU)
DESTEQ
Дата: Вторник, 17.10.2017, 08:57 | Сообщение 14
Vip
Сообщений:42
Награды: 0


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

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