Progress Bar Animation / Элементы / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Элементы

Для Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 73.6 Kb

Уникальный ID: 1108

Количество символов:

Посмотрели: 2276 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-1108-20

Скачали бесплатно: 39 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Progress, сниппет, Bootstrap, element, Responsive, элемент, html, адаптивные

Поделился: BootstrapТема

Добавлено: 2016-06-09 в 10:32

Метка: 1581146778

⇄ ⇅

<br><br><br>
<style>
body{background:url(https://bootstraptema.ru/images/bg/bg-4.png)}

.skill {
 overflow:hidden;
 margin-bottom: 0;
 padding-top: 0;
}
.skill .progress .lead {
 color: #fff;
 font-size: 14px;
 font-weight: 400;
 left: 10px;
 position: absolute;
 top: 4px;
 z-index: 99;
 font-family: "Open Sans","Sans Serif";
}
.skill .progress {
 background-color: #ddd;
 border-radius: 0;
 box-shadow: none;
 height: 30px;
 margin-bottom: 44px;
 overflow: visible;
 position: relative;
 border: 1px solid #d1d1d1;
}
.skill .progress-bar span {
 background: #333 none repeat scroll 0 0;
 float: right;
 font-size: 11px;
 margin-right: 10px;
 margin-top: -26px;
 position: relative;
 padding: 0 5px;
}
.skill .progress-bar > span:before,.skill .progress-bar > span:after{
 border: medium solid transparent;
 content: " ";
 height: 0;
 pointer-events: none;
 position: absolute;
 top: 100%;
 width: 0;
}
.skill .progress-bar > span:before{
 border-top-color: #333;
 border-width: 5px;
 left: 50%;
 margin-left: -5px;
}
.progress-bar {
 background: #ec4848;
 position: absolute;
 left: 0;
 top: 0;
 height: 28px;
}

</style>

<div class="single_about about_progress">
 <div class="skill" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">
 
 <div class="progress">
 <div class="lead">Web Development 95%</div>
 <div class="progress-bar wow fadeInLeft" data-progress="95%" style="width: 95%;" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
 </div>
 
 
 <div class="progress">
 <div class="lead">App Development 90%</div>
 <div class="progress-bar wow fadeInLeft" data-progress="90%" style="width: 90%;" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
 </div>
 
 
 <div class="progress">
 <div class="lead">Software Development 85%</div>
 <div class="progress-bar wow fadeInLeft" data-progress="85%" style="width: 85%;" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
 </div>
 
 
 <div class="progress">
 <div class="lead">Graphics Design 80%</div>
 <div class="progress-bar wow fadeInLeft" data-progress="80%" style="width: 80%;" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
 </div>
 
 
 <div class="progress">
 <div class="lead">Marketing 70%</div>
 <div class="progress-bar wow fadeInLeft" data-progress="70%" style="width: 70%;" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
 </div>
 
 </div>
 </div>

</div>

</div>
</div>

BootstrapTema

Progress Bar Animation

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0