Winner's Dev Notes

Code, games, and the craft of building better software

Cocos Creator Radial Progress Bar with ProgressBar and Sprite Fill

In Cocos Creator
Create a circular skill cooldown in Cocos Creator by configuring ProgressBar, a Sprite with RADIAL Fill Type, fill center and range, reverse direction, and the Bar reference.

Circular progress bars are commonly used for skill cooldowns.

Result

Add a ProgressBar component, set the bar Sprite’s Fill Type to RADIAL, and configure its radial fill properties:

Sprite settings

The Reverse option controls the fill direction. Assign the configured Sprite to the ProgressBar’s Bar field:

Bar settings