Circular Progress

Estimated reading: 4 minutes 116 views

The “Circular Progress” is an amazing widget for showcasing statistics on your web page. What’s great about it is that it offers a wide range of options to make it look just the way you want.

You have the flexibility to choose between displaying a complete circle or just a half circle, and you can also decide if the progress bar should have a circular or square outline.

You can use this widget to present various types of information, including a title, description, and numerical value. Plus, you can customize the value with different units or symbols. You also have the choice to add icons, images, or Lottie animations to make it visually appealing. And if you don’t want to display certain pieces of information, that’s entirely up to you.

You can decide if you want this information to appear inside the circle or below it, and you can move it around easily by just clicking and then dragging it.

The Circular Progress widget features the following controls.

Content

Layout

  • Type: Select the type of circle, either Circle or Half Circle.
  • Track layout: Select the track layout as Circle or Square.
Circular Progress: Layout Settings
Circular Progress: Layout Settings

Value

  • Type: Select the type of value either in percentage or add custom value.
  • Value: Enter the percentage value.
  • Max Value: Enter the max value(applicable for custom value type)
  • Suffix: Enter the suffix.
  • Hide: Enable the option to hide the value.
Circular Progress: Value Settings
Circular Progress: Value Settings

Title

  • Title: Enter the title.
  • Enable Link: Enable the option to link URL with title.
    • URL: Enter the URL.
Circular Progress: Title Settings
Circular Progress: Title Settings

Description

  • Description: Enter the description.
Circular Progress: Description Settings
Circular Progress: Description Settings

Icon

  • Icon Type: Select from icon, image, or Lottie.
  • View: Choose from Stacked or frame.
  • Shape: Choose a shape from a Circle or a Square.
Circular Progress: Icon Settings
Circular Progress: Icon Settings

Order

Note: To change the order of the items, you can just click on them and then move them by dragging.

  • Position: Select either Below or Outside.
Circular Progress: Order Settings
Circular Progress: Order Settings

Settings

  • Inside Content Gap: Specify the gap between items that are inside the circle.
  • Outside Content Gap: Specify the gap between items that are outside the circle.
  • Circular Size: Specify the size of cirlce.
  • Track Width: Specify the width of track.
  • Progress Width: Specify the width of progress.
  • Reverse: Enable the option to display progress in reverse format.
  • Duration: Specify the duration.
Circular Progress: Settings
Circular Progress: Settings

Style

Circle

  • Track Color: Select the color of track.
  • Progress Color Type: Choose from classic or gradient.
Circular Progress: Circle Style Settings
Circular Progress: Circle Style Settings

Content

Title

  • Typography: Set the typography.
  • Color: Select the color of title.
  • Text Shadow: Set the text shadow.
Circular Progress: Content Style Settings
Circular Progress: Content Style Settings

Description

  • Typography: Set the typography.
  • Color: Select the color of description.
  • Text Shadow: Set the text shadow.
Circular Progress: Description Style Settings
Circular Progress: Description Style Settings

Value

  • Typography: Set the typography.
  • Color: Select the color of value.
Circular Progress: Value Style Settings
Circular Progress: Value Style Settings

Suffix

  • Typography: Set the typography.
  • Color: Select the color of suffix.
  • Position: Select suffix position from Left or Right.
  • Alignment: Select suffix alignment from Top, Center, or Bottom.
  • Top Offset: Specify the top offset of suffix.
Circular Progress: Suffix Style Settings
Circular Progress: Suffix Style Settings

Icon

Normal

  • Primary Color: Select the primary color of icon.
  • Secondary Color: Select the secondary color of icon.

Hover

Styling controls for the hover state are under this section. It will be applied when someone hovers the icon.

  • Size: Specify the size of icon.
  • Padding: Set the padding.
  • Rotate: Set the rotation.
  • Border Width: Set the width of border.
  • Border Radius: Set border radius.
Circular Progress: Icon Style Settings
Circular Progress: Icon Style Settings

Inside Box

  • Box Size: Specify the size of inside box.
  • Background Type: Select from classic or gradient.
  • Border Type: Set the border type.
  • Padding: Set the padding.
Circular Progress: Inside Box Style Settings
Circular Progress: Inside Box Style Settings

Below Box

  • Background Type: Select from classic or gradient.
  • Box Shadow: Set the box shadow.
  • Border Type: Set the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
  • Margin: Set the margin.
Circular Progress: Below Box Style Settings
Circular Progress: Below Box Style Settings
Share this Doc

Circular Progress

Or copy link

CONTENTS