Advice and answers from the Buildify Team help center

The Circle Progress widget is used to show an animated progress (loading) circle-bar representing a percent value towards the completion of some operation.

Content Settings

for Circle

  • Value - set the value of progress.
  • Suffix - set the suffix (for example, percents).
  • Value position - choose where to place the value (inside or below the circle).
  • Suffix position - choose where to place the suffix (after or before the value).
  • Suffix vertical alignment - choose the vertical position of the suffix.
  • Reverse animation - if you want to change the direction of animation.
  • Easing - choose the type of animation.
  • Duration - set the duration of animation (from highest to lowest).
  • Start angle - choose the position for the animation to start.
  • Appear offset - specifies the offset, relative to when the widget enteres the viewport, after which the animation starts.

for Text

Edit text with a simple text editor.

Style Settings

for Circle

  •  Set up the size of the circle.
  • Set up the thickness of the circle.
  • Choose line capacity (it can be butt, round and square).
  • Choose the color of the circle.
  • Set up the gradient angle.
  • Choose the color for empty part of the bar.

for Value

  • Color - choose the color of value and suffix.
  • Typography - set size, font, style, letter spacing, etc.

for Text

  • Color - set text color.
  • Typography - set size, font, style, letter spacing, etc.

Advanced Settings

  1. Element Style (margin, padding, entrance appearance).
  2. Background & Border (type, radius, box shadow).
  3. Responsive (hide or show it on a desktop, tablet, mobile).

Did this answer your question?