# Vertical Progress Bar The Vertical Progress Bar displays a numeric value as a filled column -- perfect for dashboards, fitness trackers, fuel gauges, level meters, and any app where a top-to-bottom or bottom-to-top fill makes more visual sense than a horizontal bar. Connect it to a database number field and it updates automatically as the value changes. ## Getting Started Add the component to your screen and resize it to the height and width you want. By default it shows 40% progress on a primary-color fill. Connect **Progress Value** and **Maximum Value** to your data to make it dynamic. ## Settings ### Progress Value The current value to display (default: 40). Connect this to a number field in your database -- for example, a "Steps Today" or "Points Earned" field. The bar fills proportionally based on this value relative to the Maximum Value. ### Maximum Value The upper bound of the progress scale (default: 100). Set this to a fixed number (e.g., 10,000 for a step goal) or bind it to a database field if your maximum changes per user. ### Fill Color The color of the filled portion of the bar (default: your app's Primary color). Use a bold accent color to draw attention to progress. ### Background Color The color of the unfilled portion of the bar (default: your app's Primary Light color). A subtle, low-contrast color works best here so the fill stands out. ### Corner Radius Rounds the corners of the entire bar (default: 4, range: 0--50). Set to 0 for a sharp rectangular bar, or drag up for a pill shape. For a fully rounded pill, set this to half the component's width. ### Fill From Top When off (default), the bar fills upward from the bottom -- the natural direction for progress, like a thermometer or fuel gauge. Turn on to fill downward from the top instead, which works well for countdown or depletion indicators. ## Tips & Best Practices * **Bind to No Formatting Magic Text** -- when connecting Progress Value or Maximum Value to a date or number field, choose "No Formatting" in the Magic Text picker to pass a raw number rather than a formatted string. * **Set a fixed Maximum Value** when your goal doesn't change (e.g., always 100 for a percentage). Bind it to a field only when each record has its own maximum. * **Use a narrow width for column layouts** -- the default 40px width fits neatly in a grid alongside text labels. Widen it if it's the focal point of the screen. * **Pair with a Text component** showing the percentage or raw value so users know the exact number -- the bar communicates direction at a glance, the label communicates precision. * **For a pill shape**, set Corner Radius to half the component width (e.g., a 40px-wide bar needs a radius of 20). * **Use Fill From Top for depletion** -- battery level, remaining budget, or days left until a deadline feel more intuitive filling from the top downward. * **Avoid very low maximum values** (below 1) -- the bar handles a maximum of 0 gracefully by treating it as 1, but your data binding should always provide a positive maximum. ## Example Use Cases **Fitness app -- daily step goal**\ Bind Progress Value to the user's "Steps Today" field and Maximum Value to 10000. Use a green Fill Color. Place next to a Text label showing "8,432 / 10,000 steps". **E-learning app -- course completion**\ Bind Progress Value to "Lessons Completed" and Maximum Value to the total number of lessons in the course. Use a blue accent color and place it in the course card header. **Finance app -- savings goal tracker**\ Bind Progress Value to the user's current savings balance and Maximum Value to their savings target. A taller bar (200--300px) makes the progress feel more impactful. **Gaming app -- experience bar**\ Use Fill Color as a bright yellow or orange, set Corner Radius to 0 for a sharp bar, and bind to XP values. Place multiple bars side by side for different skill categories. **Dashboard -- resource utilization**\ Turn on Fill From Top and use a red Fill Color for a "usage" indicator (storage used, budget spent). This makes it clear the bar is filling down as capacity is consumed. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/vertical-progress-bar.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.