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

рейтинг 1.0 из 5

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

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

Установка:


Сначала нужно поставить вот этот скрипт на свой сайт: 

Система уровней пользователей для 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 с обеих сторон */

  • Дата: 01.07.2018, 13:48
  • Просмотры: 26
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий