jQuery Lottery Progress Bar: Horizontal and Circular Progress

Introduction:

A project required a progress bar feature. The total progress value (the target value required to meet the conditions) can be freely customized, and the progress bar percentage is automatically adjusted based on this target value. I'm sharing this implementation with everyone. Please forgive any shortcomings, and feedback and suggestions are always welcome. Thank you in advance!

Usage Scenario:

Project requirements: Implement a lottery interaction feature. The organizer can choose between a lottery animation, a horizontal progress bar, or a circular progress bar, and freely set the target value required to qualify for the lottery. Users interact through WeChat on their mobile phones. Each time a user likes or leaves a comment, the progress value increases by one until it reaches the required threshold, at which point the lottery can begin.

This plugin mainly implements the progress tracking process (showing how many users are currently participating, the current progress, and how much progress remains before the lottery requirements are met). It does not include lottery functionality. (Of course, implementing the lottery itself is not difficult: collect all participating users (names or IDs), randomly select or manually specify one or more winners, and then display the selected winners. That is the general idea.)

This plugin consists of two parts:

1. Horizontal Progress Bar

2. Circular Progress Bar (depends on circleChart.js, an H5 percentage progress bar)

Both progress bar types allow you to set a target value for qualifying for the lottery. The current progress value can be added manually or updated automatically. By default, the current progress value is updated automatically when the page finishes loading.

The code contains detailed comments, so you can modify it to suit your own needs.