> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/progress-bars/progress-bar-1.md).

# Progress Bar #1

### **Component Structure**

* **PB1 - TARGET (Section):** Serves as the reference for the scroll progress calculation. It envelops the content whose scroll progress is to be tracked.
  * **Container:** Houses the textual content and headings that make up the bulk of the scrollable content.
* **PB1 - COMPONENT (Div):** Contains the visual indicator of the scroll progress.
  * **PB1 - INDICATOR (Div):** This is the actual progress bar that visually fills up as the user scrolls through the target content. Its width dynamically changes based on the scroll position within the target.

**Global Classes and Styling**

* **pb1\_\_target:** Applied to the target section. It doesn't have specific styles mentioned but is crucial for defining the scrollable content's extent.
* **pb1\_\_component:** Styles the container of the progress indicator, ensuring it's fixed at the bottom of the viewport and spans the width of the page. For mobile portrait view, it transforms into a vertical bar positioned at the left of the viewport.
* **pb1\_\_indicator:** Determines the visual appearance of the progress indicator, including its height, background color, and initial width. A shadow effect is added for visual depth.

### **Animation Structure**

* **PB1 - SCROLL INDICATOR:** This timeline manages the animation of the progress bar as the user scrolls. It listens to the scroll events on the target and adjusts the width of the progress indicator accordingly to represent the scroll progress. The animation is smooth and continuous, utilizing a scrub effect for a seamless transition.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/progress-bars/progress-bar-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.