A lightweight jQuery plugin to create animated, responsive skill bars for your web projects.

The jQuery Simple SkillBar plugin provides an easy way to display skill levels or progress indicators on a webpage. It is customizable, responsive, and includes a smooth animation effect as the bar fills up to the specified percentage.

• Responsive: Adapts to the width of its container.
• Animated: Smoothly fills from 0% to the target value.
• Customizable: Control dimensions, colors, and values via data attributes or JavaScript options.
• Lightweight: Minimal code with no external dependencies other than jQuery.

1. Include jQuery: Ensure you have jQuery included in your project.

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Include the Plugin: Add simple-skillbar.js (or skills.js) to your project.

   <script src="js/skills.js"></script>

   Note: You can use either js/skills.js or js/Animated-Responsive-Skill-Bar-Plugin-jQuery-Simple-SkillBar/simple-skillbar.js.

3. Include CSS (Optional): While the plugin handles basic styling inline, you may want to include css/style.css or your own styles for container layout.

Create a container element for each skill bar. You can specify configuration options using data-* attributes.

<div id="skill-1"
     data-width="90"
     data-background="#2ecc71"
     data-text-color="#ffffff">
    HTML5
</div>

<div id="skill-2"
     data-width="80"
     data-background="#3498db">
    CSS3
</div>

Initialize the plugin on your selected elements using jQuery.

$(document).ready(function(){
    $('#skill-1').simpleSkillbar();

    // You can also pass options directly in JavaScript
    $('#skill-2').simpleSkillbar({
        width: 85,
        height: 40,
        background: '#e74c3c',
        textColor: '#fff'
    });
});

The plugin accepts the following options, which can be passed via the initialization function or set as data-* attributes on the HTML element.

This project is licensed under the MIT and GPL licenses.