Apex Designer Documentation
What's New
Getting Started
Business Objects
User Interfaces
App Behaviors
Project Settings
Patterns and Best Practices
App Showcase
Frequently Asked Questions
Version 2.2.214 Released
Version 2.2.221 Released
Version 2.2.244 Released
Version 2.2.273 Released
Flex Layout Helper Classes
Manage PDFs
Version 2.2.281 Released
Version 2.2.287 Released

Progress Bar On A Form Field

Give feedback to the user with a progress bar on a form field

Blank Profile Image
Written by David Knapp
Updated a year ago
Less than a minute read

Progress bars are a great way to give the user feedback that something is happening. They are often displayed at the top of the page while content is being loaded. If the progress bar is related to a specific form field, you can use this pattern. You can see the pattern in action on the "Ask a Question" field in this site.

Wrap the Form Field in a Container

Put the Form Field inside a Div with class "container":

Form Field inside a Div with class "container"

Make the Container Position Relative

Click the Add Styles icon button style on the Div and set position to be "relative" so that the Progress Bar can be positioned over the Form Field.

div.container {
	position: relative;

Add a Progress Bar Below the Form Field

Add a Progress Bar below the Form Field and set mode to "indeterminate":

Adding a progress bar inside a division

Make the Progress Bar Position Absolute

Click the Add Styles icon button style on the Div and set position to be "absolute" with the bottom at "16px" so that the progress bar is positioned over the underline of the Form Field:

mat-progress-bar {
	position: absolute;
	bottom: 16px;


Make the Progress Bar Conditional

Add an if expression on the progress bar to only show it when you want to:

Conditional progress bar definition

In this example, "creating" is a boolean property that is set to true when a conversation is being created and then set to false afterwards:

this.creating = true;

const conversation = await Conversation.create({});
debug('conversation', conversation);

const conversationMessage = await ConversationMessage.create({
	message: this.message,
	conversationId: conversation.id

this.message = null;
this.creating = false;

Disable the Input While Adding

To complete the user experience, add a "disabled" attribute to the input or textarea and set it to be evaluated from "creating". That will disable the input during the operation and prevent them from further interactions with it.

Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2023 Apex Process Consultants