--- 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-09-14 lang: en author: "Aditya Sharma" description: "A horizontal scroll section takes over the page while it runs, so a thin bar filling up as the slides go past is a useful reassurance that there is an..." image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-Add-Progress-Bar-in-Elementor-Horizontal-Page-Scroll_-1024x536.jpg word_count: 674 --- # How to Add Progress Bar in Elementor Horizontal Page Scroll? ## - Integrates the Horizontal Scroll widget and Carousel Remote widget from The Plus Addons for Elementor to add a progress bar. - Utilizes the Unique Connection ID feature in both widgets to synchronize the progress bar with horizontal scrolling. - Offers three distinct styles for the progress bar through the Style tab in the Carousel Remote widget. A horizontal scroll section takes over the page while it runs, so a thin bar filling up as the slides go past is a useful reassurance that there is an end to it. The **Progress Bar** option in the **Carousel Remote** widget from The Plus Addons for Elementor tracks the **Horizontal Scroll** widget once the two are connected. *To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, [click here](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/horizontal-scroll/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — Horizontal Scroll is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.- **Widget to enable:** Horizontal Scroll, switched on under **The Plus Addons > Widgets**.- **Second widget to enable:** Carousel Remote, also under **The Plus Addons > Widgets**. It is a Pro widget too.- **You need a template:** an Elementor Library template whose top-level sections are the slides. The widget turns each top-level section of that template into one horizontal slide. ## Step 1: Add a Connection ID to the Scroll Widget Select the **Horizontal Scroll** widget, open **Extra Options** and type a name of your own in **Unique Connection ID**. It has to be unique on the page. ![Unique Connection ID field in the Extra Options section of the Horizontal Scroll widget](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-unique-id.webp) ## Step 2: Point Carousel Remote at It Add the **Carousel Remote** widget to the same page and open its **Content** section. - Type the same value in **Unique Connection ID**.- Set **Remote Type** to **Horizontal Scroll**. ![Carousel Remote Content section with Unique Connection ID filled in and Remote Type set to Horizontal Scroll](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-remote-connect.webp) ## Step 3: Switch the Progress Bar On - Open the **Progress Bar** section and switch **Progress Bar** on.- Choose **Horizontal** or **Vertical** in **Layout**.- Use **Offset** to move the bar into place. ![Progress Bar section of the Carousel Remote widget with the toggle on and Layout set to Horizontal](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-remote-progress.webp) ## Step 4: Pick a Style Open the **Style** tab and its **Progress Bar** section. The **Styles** dropdown has three options, and the same section holds the bar's width, height, colours and corner radius. ![Styles dropdown in the Progress Bar section of the Carousel Remote Style tab](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-remote-progress-style.webp) | Style | What you get | | ----- | ------------ | | **Style 1** | A plain bar that fills up. No numbers. | | **Style 2** | A bar plus a small tooltip showing the percentage. | | **Style 3** | A bar with the percentage printed on it. | ## The Result Half way through the slides, the bar is half filled and reads 52%: ![Progress bar across the top of a horizontal scroll section, half filled and showing 52 percent](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-result-progress.webp) ### The Three Styles on the Front End **Style 1** — the bar on its own: **Style 2** — the bar with a tooltip carrying the percentage: **Style 3** — the percentage printed on the bar: ## How It Behaves - The bar goes from 0 to 100% across the whole horizontal run, not in steps per slide.- **Layout** set to **Horizontal** fills the bar's width; **Vertical** fills its height.- The percentage is rounded down, so it reads 99% until the very end of the run.- At runtime the Carousel Remote markup is moved inside the horizontal scroll section, so the bar stays on screen for the whole sideways run.- It tracks scroll position, so scrolling back up empties the bar again. ## Limitations - The bar is an indicator only. It cannot be dragged or clicked to move between slides.- It shows progress through the run, not a slide number. Use **Paginate** if you want *2 / 4*.- Only **Style 2** and **Style 3** show a number; **Style 1** is the bar alone.- Both widgets are Pro only. With the Pro plugin off, neither the slides nor the bar render. ## Troubleshooting ### The bar never moves The two **Unique Connection ID** values have to match exactly, and **Remote Type** on the remote must be **Horizontal Scroll**. ### No percentage is shown **Style 1** has no number. Switch **Styles** to **Style 2** or **Style 3** on the **Style** tab. ### The vertical bar looks empty With **Layout** on **Vertical** the bar fills by height, so give the container a height in the **Style** tab. ### The bar scrolls away with the page It is only moved into the scroll section once the connection works. Fix the connection first. ## Related Docs - [Horizontal Scroll widget settings overview](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/)- [Add paginations in horizontal page scroll](https://theplusaddons.com/docs/add-paginations-in-elementor-horizontal-page-scroll/)- [Add a next and previous button](https://theplusaddons.com/docs/add-next-previous-button-in-elementor-horizontal-page-scroll/)- [Link to a specific slide](https://theplusaddons.com/docs/link-to-a-specific-section-in-elementor-horizontal-page-scroll/)