nk-o / HexagonProgress

A jQuery plugin to draw animated hexagon progress bars

Hexagon Progress jQuery Plugin

==========

• About
• Use
• Demo
• License

ABOUT

jQuery Plugin to draw animated hexagon progress bars.

HOW TO USE

jquery.hexagonprogress.js was built with quick and simple customization in mind. You can easily customize the entire experience by initializing with arguments.

Example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.hexagonprogress.js"></script>

<div id="hexagon"></div>

<script>
    $('#hexagon').hexagonProgress({
        value: 0.55,
        size: 80
    });
</script>

Example:

<script type="text/javascript">
    $("#hexagon").hexagonProgress({
        value:0.44,
        startAngle: Math.PI,
        animation:true,
        lineWidth: 5,
        lineCap: "round",
        background: { color : "#0000ff" },
        clip: true,
        lineBackFill: { color : "#fff000" },
        lineFrontFill: { color : "#00ff00" }
    });
</script>

DEMO

Download repository and view the demo folder with an example.

LICENSE

Released under the MIT License

---

Copyright ©️ 2015 Max Lawrence