Вывод уровня пользователя как прогресс-бар

Наверх!
Вывод уровня пользователя как прогресс-бар
Демо Скачать
Доп. услуги

Описание

Как я уже говорил Система уровней пользователей без визуальной части.
По этому я решил создать парочку визуальных частей для своего скрипт.

Первым будет вот этот, довольной простой вид - в виде прогресс-бара.
Довольно просто и со вкусом.. Перейдём же к установке.

Установка:
Сначала нужно поставить вот этот скрипт на свой сайт:
Система уровней пользователей для uCoz

Данный код добавить в нужное место, на странице пользователя.
ПУ > Управление дизайном > Страница пользователя
Код
<div class="brogress-bar">  
  <div class="line"></div>  
  <div class="text">0%</div>  
  </div>


Данный код добавить после системы уровня, там же - на странице пользователя
Код
<script>  
  var progBar = (($scoreSL / $NextLS)*100);  
  $('.brogress-bar .line').css('width', progBar+'%');  
  var progBar = Math.round(progBar);  
  $('.brogress-bar .text').text(progBar+'%');  
  </script>


И это в CSS
ПУ > Управление дизайном > Таблица стилей (CSS):

Код
.brogress-bar {display: block; width: calc(100% - 4px); height: calc(30px - 4px); border-radius: 30px; border: 2px solid #fff; position: relative;} /* -4px - потому что border 2px, с одной стороны, а их две */  
  .brogress-bar .line, .brogress-bar .text {display: block; position: absolute; top: 2px; right: 2px; bottom: 2px;}  
  .brogress-bar .line {background: #fff; max-width: calc(100% - 4px); left: 2px; border-radius: 30px;}  
  .brogress-bar .text {height: calc(30px - 4px - 4px); line-height: calc(30px - 4px - 4px); color: #07f; padding-right: 5px; cursor: default;} /* -4px - потому что border 2px, с одной стороны, а их две + ещё -4px, потому что top и bottom так же по 2px с обеих сторон */

Важно

При копирование материала указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка: http://pandora.clan.su/publ/1-1-0-50
Автором материала является: Denis Minov (CbIPoK2513)

Лицензия GNU GPL от 2018 года.
Дополнительно
Комментарии
Комментов нет.. Печально. Может оставишь свой коммент?
Комментарии могут оставлять только зарегистрированные пользователи.