jQuery Scroll Triggered Skill Gauge Plugin | SkillGauge By Mark Hawkins

A jQuery plugin that shows your skill level or experience with a RPM styled gauge that animates when scrolled into view.

Plugin Settings


   $('#rpm_1').skillGauge({
	perecentValue: 70, // Gauge Percent Value
	gaugeSpeed: 3, // Animation Speed
	gaugeTitle: "Javascript", // Gauge Title
	triggerNumber: 200, // adjust intersection observer rootMargin top and bottom
	gaugeColor:"#e29e34" // Customize Gauge Color
});
	
$('#rpm_2').skillGauge({
	perecentValue: 90,
	gaugeSpeed: 3,
	gaugeTitle:"HTML",
	triggerNumber:200,
	gaugeColor:"#48cc00"
});
	
$('#rpm_3').skillGauge({
	perecentValue: 85,
	gaugeSpeed:3,
	gaugeTitle:"CSS",
	triggerNumber:200,
	gaugeColor:"#d31f28"
});
		
$('#rpm_4').skillGauge({
	perecentValue: 65,
	gaugeSpeed: 3,
	gaugeTitle:"PHP",
	triggerNumber:200,
	gaugeColor:"#b100f3"
});
	
	

Features

  • Embeded SVG Graphics
  • Uses JavaScript Intersection Observer
  • Customizable Gauge Color
** Requires GSAP JS library

Installation

Link the jQuery library and GSAP library to your document and add settings to the bottom of your document. See settings above example.

Version

  • Ver 0.3
  • Last Updated: 4/20/23
  • File Size: 3kb

Files

download