---
title: "How to Add Progress Bar in Elementor Horizontal Page Scroll?"
url: https://theplusaddons.com/docs/add-progress-bar-in-elementor-horizontal-page-scroll/
date: 2023-03-17
modified: 2026-04-11
author: "Aditya Sharma"
description: "Have you ever wondered how to add a progress bar in an Elementor horizontal page scroll? As businesses' online presence becomes increasingly important, web designers and developers are constantly exploring..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-Add-Progress-Bar-in-Elementor-Horizontal-Page-Scroll_-1024x536.jpg
word_count: 336
---

# How to Add Progress Bar in Elementor Horizontal Page Scroll?

## Key Takeaways

- The Plus Addons for Elementor includes the Horizontal Scroll widget and Carousel Remote widget for adding a progress bar.
- Users can customize the progress bar orientation and position using the Layout dropdown and Offset settings.
- The Carousel Remote widget offers three different styles for the progress bar.

Have you ever wondered how to add a progress bar in an Elementor horizontal page scroll? As businesses' online presence becomes increasingly important, web designers and developers are constantly exploring new ways to create an interactive and engaging experience for their users. One such element is the progress bar. Adding a progress bar in an Elementor horizontal page scroll enhances the user experience and provides a visual representation of how far the user has come and how much further they have to go.

With the Horizontal Scroll widget and Carousel Remote widget from The Plus Addons for Elementor, you can easily add a progress bar in your horizontal scrolling section.

*To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, [click here](/docs/horizontal-scroll-elementor-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-horizontal-scroll?utm_source=tpae&utm_medium=docs&utm_campaign=text)

For this process, first, drag and drop the Carousel Remote widget and the Horizontal Scroll widget, and then follow the below steps:

1. In the Horizontal Scroll widget, once you’ve added your Elementor template, go to **Extra Options** tab > **Unique Connection ID**. Add a unique id.

![horizontal scroll unique connection id](https://theplusaddons.com/wp-content/uploads/2023/03/horizontal-scroll-unique-connection-id-1.png)

2. Now select the Carousel Remote widget, then go to the **Content** tab, add the same ID in the **Unique Connection ID** field, and make sure **Remote Type** is selected as **Horizontal Scroll**.

![carousel remote unique connection id horizontal scroll](https://theplusaddons.com/wp-content/uploads/2023/03/carousel-remore-unique-connection-id-horizontal-scroll.png)

3. Then go to the **Progress Bar** tab and turn on the **Progress Bar** toggle. This will add a progress bar for the horizontal scrolling section. You can select the progress bar orientation from the **Layout** dropdown and from **Offset** you can change the position.

![carousel remote unique horizontal scroll progress bar](https://theplusaddons.com/wp-content/uploads/2023/03/carousel-remote-unique-horizontal-scroll-progress-bar.png)

From the Carousel Remote widget’s Style tab, you can choose from three different style of the progress bar.

**Style 1**

**Style 2**

**Style 3**

So this is how simply you can add some cool progress bar in your Elementor horizontal scrolling section.

Also, check [How to Link to a Specific Section in Elementor Horizontal Page Scroll](https://theplusaddons.com/docs/link-to-a-specific-section-in-elementor-horizontal-page-scroll/).

## Frequently Asked Questions

**Q: What should I do if the progress bar doesn't appear in my Elementor horizontal scroll?**
A: If the progress bar isn't showing, ensure that you've activated the Progress Bar toggle in the Carousel Remote widget's Progress Bar tab. This step is crucial for enabling the progress bar functionality. Additionally, check that both the Horizontal Scroll and Carousel Remote widgets are properly connected by verifying that the Unique Connection ID matches in both widgets.

**Q: How does the Unique Connection ID affect the progress bar functionality?**
A: The Unique Connection ID is essential for linking the Horizontal Scroll widget and the Carousel Remote widget. By assigning the same ID in both widgets, you ensure that the progress bar accurately reflects the user's position within the horizontal scroll. Without a matching ID, the progress bar may not function as intended, leading to a disjointed user experience.

**Q: What is the best layout orientation for the progress bar in a horizontal scroll?**
A: The best layout orientation for the progress bar depends on your design goals. You can select the orientation from the Layout dropdown in the Progress Bar tab. Consider the overall layout of your page and how the progress bar complements other elements. A well-placed progress bar can enhance user engagement by providing a clear visual cue of progress.

**Q: Does the progress bar work on mobile devices with Elementor horizontal scroll?**
A: The progress bar functionality is designed to work with the Elementor horizontal scroll, but testing on mobile devices is essential. Ensure that the layout and functionality are responsive and visually appealing on smaller screens. This consideration is vital for maintaining a good user experience across all devices.