# 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: 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://bricksmotion.gitbook.io/bricksmotion-components/components/progress-bars/progress-bar-1.md?ask=<question>
```

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.