Skip to main content

QCustomRoundProgressBar

A custom circular progress bar with smooth animation, percentage text display, and partial Qt Designer support.


Features

  • Smooth animated transitions using QVariantAnimation
  • Supports clockwise and counterclockwise directions
  • Customizable colors (progress, base, text)
  • Adjustable stroke thickness
  • Auto-resizing and scalable drawing
  • Partially configurable via Qt Designer

Qt Designer Support

Note: Only basic properties are available in Qt Designer. Color properties require programmatic setting.

PropertyTypeDescriptionDesigner Support
valueintThe current progress value✅ Yes
minimumintMinimum value (default 0)✅ Yes
maximumintMaximum value (default 100)✅ Yes
textVisibleboolWhether to show percentage text✅ Yes
clockwiseboolDirection of the arc✅ Yes
animationDurationintDuration of the animation in milliseconds✅ Yes
progressColorQColorForeground arc color❌ Programmatic
progressBaseColorQColorBackground arc color❌ Programmatic
textColorQColorText color❌ Programmatic
progressBarWidthintStroke thickness❌ Programmatic

Important Implementation Notes

  • Animation works on percentages: The animation system converts values to percentages (0-100) for smoothing
  • Color properties require code: Set colors programmatically as they lack Qt Designer integration
  • Progress bar width: Set via constructor parameter or programmatically

Corrected Usage Example

from Custom_Widgets.QCustomProgressBars import QCustomRoundProgressBar

# Set progress bar width in constructor
progress = QCustomRoundProgressBar(progressBarWidth=8)

# These work in Qt Designer:
progress.setValue(65)
progress.textVisible = True
progress.clockwise = True

# These require programmatic setting:
progress.progressColor = QColor("#03C3C3")
progress.progressBaseColor = QColor(255, 255, 255, 100)
progress.textColor = QColor("#000000")
progress.progressBarWidth = 10 # Must set programmatically