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.