How to make a curved progress bar?

How-to
#1

Important: unclear posts may not receive useful answers.

I want to make a curved progress bar. Which one can I apply?

Before posting

  • Get familiar with Markdown to format and structure your post
  • Be sure to update lvgl from the latest version from the master branch.
  • Be sure you have checked the relevant part of the documentation.
  • If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.

Description

What MCU/Processor/Board and compiler are you using?

What LVGL version are you using? Ver 8.0

What do you want to achieve? I want to do it like the video below. But the code in this video is not efficient.

What have you tried so far?

Bar: Unbent
line: cannot be parent

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

Please advise.

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.
video

#2

Do you need to generate the curved path runtime? If not, you can use ARGB image on which the line to fill is a hole (transparent) and put a red object below it and increase the size of that object as the process progresses.

You can also draw the path to an LV_IMG_CF_ALPHA_8BIT canvas and use it as mask on similarly to the ARGB image before.

Or the path can be created from many short lines and you can change the colors of the line segments as the time passes (I can show an example for it.)