![Stacks Image 113326](files/stacks-image-4dc0583-1200x212.png)
Info Box with Progress Bar, Mini Nav & Footer text
Version 1.0.2 RW8/Classic & Stacks
Browser: Microsoft Edge / Chrome / Firefox / Safari / Opera / Brave.
Browser: Microsoft Edge / Chrome / Firefox / Safari / Opera / Brave.
Pocket Bar is a smart sliding box section with contents and a scroll indicator. This stack provides a progress bar which keeps on changing as you scroll through the whole page.
It is even responsive! Resize the browser window to see the effect.
![Stacks Image 113181](files/stacks-image-210a27c.jpg)
![Stacks Image 113191](files/stacks-image-df579f9.jpg)
![Stacks Image 113183](files/stacks-image-e38e871.jpg)
![Stacks Image 113185](files/stacks-image-8a8a64c.jpg)
![Stacks Image 113187](files/stacks-image-f8a09c6.jpg)
![Stacks Image 113189](files/stacks-image-5058077.jpg)
![Stacks Image 113193](files/stacks-image-147d1f1.jpg)
![Stacks Image 113197](files/stacks-image-e069bd8.jpg)
![Stacks Image 113207](files/stacks-image-aa73246.jpg)
![Stacks Image 113199](files/stacks-image-62425a9.jpg)
![Stacks Image 113312](files/stacks-image-1276ba1.jpg)
![Stacks Image 113201](files/stacks-image-41704b2.jpg)
![Stacks Image 113203](files/stacks-image-8648563.jpg)
![Stacks Image 113205](files/stacks-image-865ed2a.jpg)
![Stacks Image 113211](files/stacks-image-bce5335.jpg)
![Stacks Image 113209](files/stacks-image-0037cef.jpg)
Enter the name for this tabbed section:
STACK INFO
![Stacks Image 113341](files/stacks-image-25a56d5.jpg)
Highlight your important content! Timetables, phone number, Promo and more, immediately and in a small space.
Multiple Contents
You can show 4 contents selectively on desktop and mobile devices1: Progress bar
ON/OFF. Full height or small size, Top or bottom position. Fill the bar with a single colour or a animated gradient, also with image or Gif.3: Drag your content
SHOW/HIDE you can drag any other element such as text, images buttons and more.2: Mini Nav
ON/OFF. Compact Navigation of your project with first level only.Customize font Style, size and colours.
4: Footer Text
ON/OFF. Shows the standard Footer text of your project, customize text size and paddingResponsive
This stack is completely reactive. Controls the Pocket-Bar position Top/Bottom, the Slice in Desktop/Mobile and the Text Size on mobileAnimations
This stack allows you to set more than one effect for the Progress Bar. Animated Gradients or Gif.Dashboard
A dashboard is available in Edit Mode with basic settings, the settings changes are reflected in the UI. You Can show/hide the preview for BG images.Layout Options
![Stacks Image 113331](files/stacks-image-6d1e6b9-1200x776.jpg)
Enter the name for this tabbed section:
GENERAL SETTING
Features
You can only use one Pocket Bar per page. Tip: With stacks you can create a partial and use the same element on all pagesPreview & Edit Mode setting
![Stacks Image 113379](files/stacks-image-b4721b7.jpg)
Responsive setting
![Stacks Image 113387](files/stacks-image-a50e783.jpg)
Footer Content
Project Footer content![Stacks Image 113395](files/stacks-image-ba70a72.jpg)
Slice setting
- Show/Hide Elements
- Customize styles
- Customize Font style
- Customize styles
- Customize Font style
![Stacks Image 113406](files/stacks-image-efca674.jpg)
Progress Bar Style
+ +
![Stacks Image 113558](files/stacks-image-25cceed.png)
Progress Bar.
- Single or double colours
- Animated background
- Drag image from resources / URL
- Single or double colours
- Animated background
- Drag image from resources / URL
![Stacks Image 113417](files/stacks-image-0bfbcd6.jpg)
Mini nav
First leve only, no submenu
 
![Stacks Image 113425](files/stacks-image-08e228d.jpg)
Enter the name for this tabbed section:
EDIT MODE
Edit Mode
![Stacks Image 112501](files/stacks-image-8fd32eb.gif)
Enter the name for this tabbed section:
FAQ
Smooth Animation
How to increase performances?
Choose the best combination between filters, filling method and animation.
You should try the animation in more than one browser, the stack deliver "cross platform web fonts" and the result is quite identical in all browsers.
The features requiring more resources are:
- CSS filters over the BG like Blur (or you can use 2 images)
- Background with animated GIF over morphing shapes in animation.
- Background with video or similar.
- Further css filters applied to the stack with nested stack.
External GIF
How to apply a custom gif?
Go to GIPHY, you can find cool gif for the stack.
- Go to Giphy and select your favorite GIF
- Click to "Copy Link" and select "GIF Link"
- Copy and paste this URL in the field
- Go to Giphy and select your favorite GIF
- Click to "Copy Link" and select "GIF Link"
- Copy and paste this URL in the field
![Stacks Image 113078](files/stacks-image-50e7335.jpg)
![Stacks Image 113080](files/stacks-image-7c3b929.jpg)
Giphy site
![Stacks Image 113073](files/stacks-image-9aa51a0.jpg)
Stack Panel / IMG
Load images
How to load a Stacks4 "site image" in this stack?
- Publish the project ( to upload all "site images").
- In RW copy the URL from the Thumbnail in Resources panel.
- In the Stack Paste the image path into the URL field.
![Stacks Image 111907](files/stacks-image-daeb83e.jpg)
RW: Resources panel / site image
![Stacks Image 111914](files/stacks-image-ab9ef35.jpg)
Stack: external "URL image"
Compatibility
Can I use this Stack within other stacks?
Yes, you need to check that the animations are loaded on the main page; Stacks with lightbox or modal windows are not compatible.