en

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
progress 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
progress 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
progress 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
progress 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
progress 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
progress 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
progress example

+

Waypoint.js
scroll event

Infographics on the Website!

This is a unique jQuery plugin that allows you to display infographics on your web pages. It's main feature is a large variety of shapes to be precise about six.

Dimensions of each figure are formed based on the size of the block to which jQuery-svg-progress was applied, which gives great flexibility in use. Accordingly, the size of the contour of figures perfectly adapts when loaded on mobile devices.

There are also possible to add a customize outline from a graphic editor such as Inkscape or an Illustrator. It is worth noting that in this case the contour of the exported figure will not be recalculated and adapted to the size of the block to which the plugin is applied, but displayed in the form in which it was created.

Another undeniable advantage is that the negligible weight of this plugin is only 5 KB. Well, of course, all the figures are built on the basis of SVG, which makes it easy to manipulate them, when building web pages.

Download / Install

Events

  • redraw - launch drawing progress. Example $('.svg-progress-demo').trigger("redraw");
  • reverse - progress in opposite side. Example $('.svg-progress-demo').trigger("reverse");
  • destroy - reset the progress. Example $('.svg-progress-demo').trigger("destroy");

Documentation

  • Properties
  • Value
  • Type
  • Description
  • figure
  • hexagon
  • String
  • 'hexagon','rhomb','rect','triangle','pentagon','circle'
  • endFill
  • 100
  • Number
  • Percentage of figure progress from 0 to 100
  • unitsOutput
  • %
  • String
  • Units of progress
  • progressFill
  • #fcbf02
  • String
  • Progress color
  • progressFillGradient
  • []
  • Array
  • Setting two different colors from - to (gradient)
  • progressWidth
  • 2
  • Number
  • Width of progress line
  • background
  • transparent
  • String
  • Background of figure
  • emptyFill
  • #999
  • String
  • Color of contour of figures without progress
  • emptyFillOpacity
  • 0,3
  • Number
  • Transparency of the path without progress
  • animationDuration
  • 2
  • Number
  • Animation duration in seconds
  • onProgressState
  • undefined
  • Function
  • Function return a state of progress during animation
  • onAnimationComplate
  • undefined
  • Function
  • Callback function in the end of animation progress

More jQuery plugins for the Website

jQuery-svg-popup

Tired of typical modal windows ?! There is a solution - jQuery-svg-popup. Fast, easy (only 5kb), easy to use. This solution will diversify the design of your website, as well as give uniqueness and style!

jQuery-svg-popup