jQuery-svg-progress

<div class="svg-progress-demo1" data-progress-value="93">
	<span class="svg-progress-output"></span>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-progress.js"></script>
<script>
    $('.svg-progress-demo1').svgprogress({
        figure: "hexagon",
        progressFillGradient: ['#fcbf02','#2cbc99'],
        progressWidth: 4
    }); 
</script>

                            

Hexagon
proggres example

<div class="svg-progress-demo2" data-progress-value="100">
	<span class="svg-progress-output"></span>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-progress.js"></script>
<script>
    $('.svg-progress-demo2').svgprogress({
        figure: "rhomb",
        progressWidth: 4,
        endFill: 90
    }); 
</script>

                            

Rhomb
proggres example

<div class="svg-progress-demo3" data-progress-value="100">
	<span class="svg-progress-output"></span>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-progress.js"></script>
<script>
    $('.svg-progress-demo3').svgprogress({
        figure: "rect",
        progressFillGradient: ['#2cbc99','#fcbf02'],
        progressWidth: 4
    }); 
</script>

                            

Rectangle
proggres example

<div class="svg-progress-demo4">
	<span class="svg-progress-output"></span>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-progress.js"></script>
<script>
    $('.svg-progress-demo4').svgprogress({
        figure: "triangle",
        progressFill: "#2cbc99",
        progressWidth: 4
    }); 
</script>

                            

Triangle
proggres example

<div class="svg-progress-demo5">
	<span class="svg-progress-output"></span>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-progress.js"></script>
<script>
    $('.svg-progress-demo5').svgprogress({
        figure: "pentagon",
        progressWidth: 4
    }); 
</script>

                            

Pentagon
proggres example

<div class="svg-progress-demo6">
	<span class="svg-progress-output"></span>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-progress.js"></script>
<script>
    $('.svg-progress-demo6').svgprogress({
        figure: "circle",
        progressFillGradient: ['#FF3700','#fcbf02'],
        progressWidth: 4,
        unitsOutput: 'km.'
    }); 
</script>

                            

Circle
proggres example

<div class="svg-progress-demo7"></div>
<div class="svg-progress-demo8"></div>
<div class="svg-progress-demo9"></div>
<div class="svg-progress-demo10"></div>
<script src="jquery.min.js"></script>
<script src="waypoints.min.js"></script>
<script src="jQuery-svg-progress.js"></script>
<script>
	$('.svg-progress-demo7').svgprogress({
		figure: {path: 'm 106.06602,115.34769 c -0.83569,6.66014 -9.390034,2.15939 -11.069591,-1.38897 -4.551497,-9.61582 4.928511,-19.096375 13.847511,-20.75021 15.95401,-2.958324 29.16209,11.28802 30.43084,26.30607 1.86194,22.03958 -17.6939,39.41571 -38.76461,40.11146 -28.083956,0.92733 -49.742769,-24.111 -49.792095,-51.22317 -0.06207,-34.117887 30.532187,-60.106458 63.681715,-59.472714 40.14853,0.767549 70.49113,36.955409 69.15335,76.140274 -1.57653,46.178 -43.37986,80.88891 -88.598825,78.83396 C 42.747235,201.53188 3.6588539,154.09926 6.4397209,102.84702 9.5995187,44.610973 62.670722,1.1388772 119.95565,4.651802 184.22067,8.5927728 232.08094,67.309108 227.83149,130.62628 223.1138,200.92034 158.74754,253.17207 89.398464,248.18275'}
	});
	$('.svg-progress-demo8').svgprogress({
		figure: {path: 'M125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90Z'}
	});
	$('.svg-progress-demo9').svgprogress({
		figure: {path: 'M 189.91414,21.164027 C 163.745,6.8359681 129.52347,20.317035 117.42646,51.209103 105.30413,20.317035 71.094113,6.8223509 44.924979,21.164027 17.050063,36.45891 3.7237851,75.524045 25.735508,121.6075 41.370691,154.39782 69.072957,179.10221 117.42646,223.40726 165.75235,179.10221 193.46842,154.3842 209.08979,121.6075 231.10152,75.524045 217.77524,36.45891 189.91414,21.164027 Z'}
	});
	$('.svg-progress-demo10').svgprogress({
		figure: {path: 'm 169.65477,1.9925512 c 6.8946,23.3834078 13.09112,47.2721588 11.49099,74.8820298 -1.64157,28.298969 -10.13668,43.596969 -26.67551,58.343679 -22.77678,20.35136 -52.24336,28.39083 -85.36162,37.2113 -9.151752,2.43482 -23.679646,4.86963 -29.548258,11.02558 -8.413044,8.8664 -5.786532,31.14725 -2.051961,41.8053 -2.872747,1.74571 -8.700319,1.1485 -10.259811,-1.3782 -0.492471,-7.99354 0.902863,-14.7467 2.462355,-21.59175 1.436373,-6.47753 4.965748,-13.18476 5.335101,-19.29475 0.369353,-6.06407 -1.600531,-10.88775 -1.641569,-16.07897 -0.246236,-46.72087 29.589295,-69.7827 60.738078,-81.313607 16.989845,-6.293767 34.678155,-9.877079 48.426305,-20.213557 12.47552,-9.3258 24.95186,-25.634458 26.67551,-47.77749 0.36894,-4.823687 -0.28727,-10.6580515 0,-16.0789616 0.36936,-0.091882 0.41039,0.183762 0.41039,0.4593968 z'}
	});

	jQuery('.svg-progress-demo7').waypoint({	
		handler: function(event, direction){
			if (direction === "down") {
				$('.svg-progress-demo7').trigger("redraw");					
				$('.svg-progress-demo8').trigger("redraw");					
				$('.svg-progress-demo9').trigger("redraw");					
				$('.svg-progress-demo10').trigger("redraw");					
			};
		},
		offset: '100%'
	});
</script>

                            

Svg path
proggres example

+

Waypoint.js
scroll event

Инфографика на сайте!

Это уникальный и единственный в своем роде jQuery plugin, позволяющий отображать инфографику на вашем веб-ресурсе. Основной его особенностью является большое разнообразие фигур, если быть точным, то шесть.

Габариты каждой фигуры формируются исходя из размеров блока, к которому был применен jQuery-svg-progress, что придает огромную гибкость в использовании. Соответственно, размер контура фигуры отлично адаптируется при загрузке на мобильных девайсах.

Также есть возможность добавить кастомный контур из графического редактора типа inkscape или illustrator. Стоит отметить, что в этом случае контур экспортированной фигуры не будет перерассчитан и адаптирован по размерам блока, к которому применен плагин, а отобразится в том виде, в котором был создан.

Еще одним неоспоримым преимуществом является ничтожно малый вес данного плагина (всего 5kb). Ну и конечно же все фигуры строятся на базе SVG, что позволяет легко манипулировать ими при построении веб-страниц.

Скачать / установить

События

  • redraw - запускает отрисовку прогресса. Пример $('.svg-progress-demo').trigger("redraw");
  • reverse - прогресс в обратную сторону. Пример $('.svg-progress-demo').trigger("reverse");
  • destroy - обнуляет прогрес. Пример $('.svg-progress-demo').trigger("destroy");

Докумментация

  • Свойство
  • Значение
  • Тип
  • Описание
  • figure
  • hexagon
  • String
  • 'hexagon','rhomb','rect','triangle','pentagon','circle'
  • endFill
  • 100
  • Number
  • Процент прогресса фигуры от 0 до 100
  • unitsOutput
  • %
  • String
  • Единицы прогресса
  • progressFill
  • #fcbf02
  • String
  • Цвет прогресса
  • progressFillGradient
  • []
  • Array
  • Принимает 2 елемента цвет от и до
  • progressWidth
  • 2
  • Number
  • Толщина линии прогресса
  • background
  • transparent
  • String
  • Цвет заливки фигуры
  • emptyFill
  • #999
  • String
  • Цвет контура фигуры без прогресса
  • emptyFillOpacity
  • 0,3
  • Number
  • Прозрачность контура без прогресса
  • animationDuration
  • 2
  • Number
  • Длительность анимации в секундах
  • onProgressState
  • undefined
  • Function
  • Функция возвращает состояние прогресса во время анимации
  • onAnimationComplate
  • undefined
  • Function
  • Колбек функция завершения анимации прогресса

Еще jQuery плагины для сайта

jQuery-svg-popup

Надоели типичные модальные окна?! Есть решение - jQuery-svg-popup. Быстрый, легкий (всего 5kb), прост в использовании. Ето решение разнообразит дизайн вашего сайта, а также придаст уникальности и стиля!

jQuery-svg-popup