jQuery Svg Progress / Дизайн / Плагины Bootstrap

Версия: v1.0.1

Каталог: Плагины Bootstrap

Категория: Дизайн

Bootstrap: 3, 4

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

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

Вес файла: 209.5 Kb

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

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

Скачать бесплатно

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

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

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

Рейтинг: 4.3 / 5 - 3 голосов

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

Авторство: https://github.com/rodan888/jQuery-svg-progress

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

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

Теги: Plugin, Progress, SVG, Bootstrap

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

Добавлено: 2017-09-30 в 14:59

Метка: 1583169310

⇄ ⇅

.btn{
 background-color: #2cbc99;
 border: none;
 outline: none;
 display: inline-block;
 vertical-align: top;
 border-radius: 5px;
 padding: 5px 10px;
 color: #fff;
 min-width: 80px;
 text-align: center;
}

.plagin-content{
 max-width: 700px;
 margin: 0 auto; 
}
.mt2{
 margin-top: 20px;
}
.mb4{
 margin-bottom: 40px;
}
.demo-wrap{
 border-bottom: 1px solid #ccc;
 padding-bottom: 20px;
}
.demo-item{
 margin-right: 25px!important;
 display: inline-block!important;
 vertical-align: middle!important;
 position: relative!important;
}
.demo-item:before{
 display: none;
}
.demo-item.big{
 width: 270px;
 height: 300px;
 font-size: 28px;
}
.demo-item.normal{
 width: 180px;
 height: 200px;
 font-size: 24px;
}
.demo-item.small{
 width: 90px;
 height: 100px;
 font-size: 18px;
}
.demo-item .svg-progress-output{
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 text-align: center; 
 font-family: 'OpenSansLight';
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -o-transform: translateY(-50%)
}
.demo-item .svg-progress-output.triangle{
 top: 70%;
}
</style>

<div class="container">
<h1 class="text-center">jQuery Svg Progress & BootstrapTema</h1>
<div class="row ">

<div class="col-md-12 mb4 demo-wrap">
 <div class="container-fluid">
 <div class="row">
 <div class="col-md-8">
 <div class="svg-progress-demo1 demo-item big" data-progress-value="100">
 <span class="svg-progress-output"></span>
 </div>
 <div class="svg-progress-demo1 demo-item normal" data-progress-value="73">
 <span class="svg-progress-output"></span>
 </div>
 <div class="svg-progress-demo1 demo-item small" data-progress-value="53">
 <span class="svg-progress-output"></span>
 </div>
 </div>
 <div class="col-md-4">
 <h2 class="title-plagin">Hexagon Demo</h2>
 <div class="buttons-wrap mt2">
 <button type="button" class="btn start">start</button>
 <button type="button" class="btn reverse">reverse</button>
 <button type="button" class="btn destroy">destroy</button>
 </div>
 </div>
 </div>
 </div>
 </div>

</div>
</div>
<script>
 $(function(){
 $('.svg-progress-demo1').svgprogress({
 figure: "hexagon",
 onProgressState: function(state){
 if(state === 50){
 console.log('Progress state is equal '+ state);
 }
 },
 onAnimationComplate: function(){
 console.log('Progress complate!');
 }
 });
 $('.start').on('click', function(){
 $(this).parents('.col-md-12').find('.demo-item').trigger('redraw'); 
 });
 $('.reverse').on('click', function(){
 $(this).parents('.col-md-12').find('.demo-item').trigger('reverse');
 });
 $('.destroy').on('click', function(){
 $(this).parents('.col-md-12').find('.demo-item').trigger('destroy');
 });

}());
 </script>

BootstrapTema

jQuery Svg Progress

Скриншот

Подробнее

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

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

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