Contents

Cancel

Recommended Articles

  1. unify-apps

    Indexing

    Unify AI

    Transform raw content into searchable knowledge through AI-powered indexing and vector embeddings

  2. unify-apps

    IMAP

    Unify Integrations

    Integrate your app with IMAP to enable seamless email synchronization, real-time access, and enhanced communication workflows.

  3. unify-apps

    Preview Your Work

    Unify Automations

    Effortlessly review & monitor your automation’s performance

  4. unify-apps

    QuickBooks

    Unify Integrations

    Integrate your app with QuickBooks to streamline accounting, automate invoicing, and manage finances effortlessly

  5. unify-apps

    FTP/FTPS

    Unify Integrations

    Connect your app with FTP/FTPS to automate secure file transfers and streamline data exchange across systems.

  6. unify-apps

    Snowflake

    Unify Automations

    Connect to Snowflake for fast, scalable cloud data warehousing and analytics

  7. unify-apps

    Button

    Unify Applications

    Create interactive elements with ease using buttons

  8. unify-apps

    BambooHR

    Unify Automations

    Integrate your app with BambooHR to streamline HR management, automate employee data processing, and enhance onboarding workflows

  9. unify-apps

    Build your first automation

    Unify Automations

    Learn how to build your automation step by step

  10. unify-apps

    User Management

    Unify Applications

    Efficiently manage user roles and permissions

  11. unify-apps

    Microsoft Teams

    Unify Automations

    Connect your app with Microsoft Teams to enhance communication, automate workflows, and foster collaboration across your organization

  12. unify-apps

    Jira

    Unify Automations

    Use Jira to plan, track, and manage your agile and software development projects

  13. unify-apps

    Pre Processing

    Unify AI

    Optimize query processing through intelligent rephrasing, retrieval, and ranking to deliver accurate AI responses

  14. unify-apps

    Google Calendar

    Unify Integrations

    Integrate your app with Google Calendar to streamline scheduling, automate event management, and improve team coordination

  15. unify-apps

    SAP HANA

    Unify Integrations

    Connect your app with SAP HANA to leverage in-memory computing for real-time data processing and advanced analytics at scale.

#
Unify Applications
Logo
Add Components to your Interface
Logo
Progress Bar

Progress Bar

Logo

2 mins READ

Overview

Progress Bar component is a visual element that displays the completion status of a task or process.

This article will guide you on how to configure the Progress Bar component.

Image
Image

Key Properties

To set up a Progress Bar in your application:

  1. Drag and drop the Progress Bar component onto your canvas.

  2. Set the "Value" property to determine the progress level (e.g., 60 for 60% completion).

  3. Add a "Label" to describe what the progress bar represents. 

Thumbnail

Tip

Use dynamic values for the "Value" property to reflect real-time data from your application.

Like a layout component, you can add Slots in Progress Bar. This allows you to add any additional component inside a progress bar.

  1. Use the "Header" slot to add a title above the progress bar.

  2. Utilize the "Footer" slot to include additional information or explanatory text below the bar.

Thumbnail

Note

Headers and footers are optional but can greatly enhance user understanding of the displayed progress.

Appearance Customization

You can customize the appearance of the Progress Bar by navigating to the Appearance section in the Properties panel. 

Image
Image


Here are the available options for customizing the Progress Bar:

Property

Description

Color

Set the color of the progress bar. You can choose from given options & set conditional coloring as well.

Size

Determines the height of the progress bar.

Hide Label

Toggles visibility of the progress bar label.

Styles

Custom CSS styles for additional formatting.

Margin

Sets the external spacing around the progress bar. 

Layout

Defines how the progress bar fits within its container.

Best Practices

  • Ensure the progress bar accurately reflects the current state of the process it represents.

  • Use clear and concise labels to describe what the progress bar is measuring.

  • Choose colors that provide sufficient contrast for accessibility.

FAQs

Can I change the progress bar's shape? 

The current component offers a standard horizontal bar. 

How do I make the progress bar update in real-time? 

Connect the "Value" property to a dynamic data source in your application that updates as the underlying process progresses.