Nanfeng

Notes on software development, code, and curious ideas

Creating a Radial Progress Bar in Cocos Creator

In
Configure a Sprite and ProgressBar to create a circular skill-cooldown indicator.

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

+