🎦 Progress Bar

---

Examples

• Cart amount progression
• Form completion
• Funnel progression
• Session duration
• Word / Character counter
• Scroll progression
• Election results

       

---

• Introduction
• Layout tab
• Content tab
• Style tab
• Conditions tab

---

Introduction

The Progress Bar widget enables you to let your visitors know how close they are to completing a task or to reach a goal. It can be used in many different ways:

• Cart amount progression before reaching a gift, coupon, free shipping... on cart pages
• Word or character counter for a min or max expected number of characters (testimonials, feedbacks...)
• Scroll progression on long scroll pages
• Progression in the completion of a form
• Funnel progression
• Display stats more visually
• Session duration (in "reverse mode", for example: 30 mins to finalize a booking or a ticket purchase)

All you need is:

• A quantity to reach : the goal (it can be an integer (123) or a decimal (123.45) but can't be 0 nor a negative value) that will have to type/set manually
• A variable : the current status of your goal (which is going to make the progress bar... progress)

The variable can be fetched in two ways:

• select en element on the page which contains the value (preferably in its own <span>, <p>, <div>... and the widget will parse and retrieve its value)
• write your own JavaScript code (sky is the limit... catch a dataLayer variable, use browser listeners, set a timer...)

The rest is up to your tastes and needs.

---

Layout tab

The progress bar is only available in "free placement" layout. It is not available in modal, banner or panel layouts.

Select a progress bar layout

We offer 3 different sub-layouts:

• Progress bar & text-integrated variable
• Progress bar, label & variable
• Progress bar

---

Content tab

Depending on the sub-layout you choose, the content tab differs.

• If you select: "Progress bar & text-integrated variable"

• If you select: "Progress bar, label & variable"

• If you select: "Progress bar only"

Now, let's go in details through each component...

Closable alert

One value per element

In order to properly parse the variable, the widget needs to use a single variable. So let's imagine you select a paragraph with contains two values, it will not work properly.

⇒ So be careful when you select the element containing your variable. Make sure it only contains one.

Any value format is welcome

However, you don't have to worry about the format of the value... Does it have to have a colon or a comma as a decimal marker? If I use a very large number (i.e. 142,536,712.34), will the widget understand which a separator and which is a the decimal marker? If my element includes a currency or a special symbol or character, is it gonna make it fail?

⇒ Don't worry. We've covered almost of international ways of writing prices, percentages, and numbers in general.

Variable

Quite often user forget to set the variable. It is the main important part of setting your Progress Bar widget.

By default, we decided to set the variable value to 66. At the beginning, it was 50 but users forgot even more to change it and adapt it to their own needs.

In order to fetch the variable, you have two options:

• Select element that contains the variable

Select the element on the page on which you want the variable to be applied.

The element containing the variable must not contain several values (see above).

• Return variable through custom JavaScript

To use the custom JS option properly, you must call a function called “update” and pass the new value as a parameter to update the widget.

By default, we decided to give you an example of JavaScript code:

var counter = 0;
setInterval(function () {
if (counter > 90) {
counter = 0;
} else {
counter += 10;
}
update(counter);
}, 1000);

This JavaScript code fakes a progressing bar which progress by 10 every 1000ms. As our default quantity to reach is 100, it gives you an quick idea of how the progress bar will react to progress variations.

But, obviously, you can replace it by your own.

Here is another JavaScript code example to retrieve the scroll progression of the visitor on the page:

window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
update(scrolled);
}

Run the update() function whenever you need to update the progress bar.

Quantity to reach

By default, the quantity to reach is set to 100.

The minimum value is 1 and the maximum is 999,999,999,999.

You can use an integer, a decimal value with a dot as a separator but you can't use 0 or a negative value.

Display variable as

Here you can select if you want to display the variable as a value or as a percentage.

If you pick value, it will be the exact value of the variable as your web app or the visitor defined it.

If you pick percentage, it will be calculated based on the quantity to reach. For example, if the quantity to reach is 1765 and the variable is 419, it will display "23.74%". The widget rounds to the closest 100th.

Display variable in relation to quantity to reach as

Here you can select if you want to display the variable as the accumulated value (the variable value) or as the remaining value (subtraction of the the quantity to reach value minus the variable value).

For example, we advise you to use "remaining" if you use the Progress Bar widget on a cart page but as "accumulated" if you use it for a character counter or a session duration.

For example:

• with "remaining", if the quantity to reach is 1765 and the variable is 419, it will display "76.26%".
• with "accumulated", if the quantity to reach is 1765 and the variable is 419, it will display "23.74%".

The widget rounds to the closest 100th.

Create your own content with the dynamic tags

(only for "Progress bar & text-integrated variable" sub-layout)

Rephrase the default sentence as desired.

You can add extra HTML markup and add some CSS in order to add some bold or color to a specific part of the text.

As an example, this is the CSS code needed to style the two pieces inside the customized sentence.

.varSubTot {
color: #66BB66 !important;
fill: #66BB66 !important;
-webkit-text-fill-color: #66BB66 !important;
font-weight: bold;
}
.freeShipping {
font-weight: bold;
}

The variable must be enclosed in exclamation marks. As follows:

!variable!

If you want to display the variable as a percentage, the variable must be followed by a “%”. If you use it as a value, you should not forget to precise the unit, currency (before or after the variable, depending on your locale).

Progress Bar label

(Only for "Progress bar, label & variable" sub-layout)

Enter the legend of your progress bar. By default, the label is in bold.

The variable cannot be edited inside the widget form. You can add a symbol next to it in the editor.

For example, you can add inside the:

<dd class="abtasty_progress_value"></dd> 

element of the variable a little <span> element containing the unit:

 <span>US$</span>

---

Style tab

In the style tab, you will be able to define the size, color, border, background... of each element of the widget. Uncollapse each group and adapt the widget to your website color palette and style.

By default, the widget inherits from the font-face of your website. But you can override it with the 1,000 Google Fonts available.

Refer to the Widget Style options article for more information on all available Style options.

 

Progress Bar widget Styling Specificities

Progress bar color

Try to pick one of your existing palette color. Most of the time, we recommend to use a variation of your main call-to-action color.

Progress bar background color

Pick a color for the background of your progress bar (the track of the progression ). We advise you to take a different color (contrasted enough) than the background color of the element it is contained in. For example, if you pick white, on a white background, you won't see it.

Colorblind accessibility mode (Stripes)

Toggled by default. This enables you to make the progress bar slightly more accessible. Especially if your progress bar color and progress bar background color are close (not enough contrasted).

Stripes color

You can give the color you want to the stripes. In order to offer something accessible and elegant, we advise you to use white and lower the opacity to make the progress bar color appear. But do not lower under 60%.

Progress bar height

Gives more or less height to your progress bar. Default height is 8px. Max is 50 px.

Progress bar radius

Gives more or less rounded corners to your progress bar. Default radius is 4px. Max is 30 px.

---

Conditions tab

Select the Triggering and Recurrence options you want to apply to this widget.

Refer to the "Condition" tab article for details. 

---

If you want to: edit, duplicate, rename, delete such a widget, please check the Widget Frequently Asked Questions article.