Want Help With the Loading Progress Bar from Empower 2025 Advanced Javascript Class

asked on March 20

Hey @████████- I'm wondering if you would be willing to help make something work similar to the components of the Empower 2025 Advanced Javascript Class.

I've been working with the functionality from the class. I've used the modals several times and love them!

I've been trying (and failing) to work with the progress bars too. I just keep hitting walls no matter what I try to do to make it work. Your sample works, and if I take it wholesale I can make it work on other forms, but I'm not having any success modifying it to operate a little differently. I just don't understand what it is doing sufficiently to make it work how I'd like.

What I'm hoping to do is to combine some of the appearance of the progress bar and the modals, and trigger the progress bar to show and hide on demand based on what it happening with my Javascript code.

One problem I'm having is the appearance.

The progress bar appears on an entirely blank page, and after it loads, I have a form that is completely blended into the background. Your example form is just a solid white page with the form fields on it. When I tried to do my own form with my own theme, the form ended up being transparent to the background.

Progress bar loading:

After load, you form is just the fields on a white page.

My form with my theme has a transparent background, so with the texture background the form is useless.

It's messy, and I haven't had any luck making it work with any of my themes.

I really like how the modals work, where the modal is in front of the form, but the form is faded out.

I'm wondering if there is any way to make the progress bar appear like this modal, in front of the form, but with the form faded out.

Here's a mock-up of what I'd like to try to do:

And ideally, I'd like to be able to trigger this to show and hide on demand through Javascript.

Do you have suggestions on how that could work, or do you have any code samples that are closer to something like that than what you shared at Empower last year?

I know it's asking a lot, but you are so good at this stuff, and I've been struggling for lot of time trying to make any progress without success.

Anything you can share: code samples, tips, or pointing me towards online resources, would be greatly appreciated.

Thank you so much!

0 0

SELECTED ANSWER

replied on March 23

I'm revisiting the progress bar at this year's empower. A couple people mentioned other issues that I've resolved.

If you're using the example form I built, there's loading html in the form description so that it shows up immediately and doesn't wait for any JS. That might be the source of your problems.

Otherwise the loading bar is just two pieces of code:

const generateFullFieldHtml = (content, { styles = "", id = "", zIndex = 10, classes } = {}) => {
  return content ? (
    /* html */
    `
<div
  ${id ? `id="${id}"` : ""}
  style="position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        z-index: ${zIndex};
        height: 100%;${styles}"
  class="${classes || ""}"
>
  ${content} 
</div>
`
  ) : "";
};

function makeLoadingBar(curPrecent, loadingBarOptions) {
  const { height, type, text, styles = "", containerClass = "" } = loadingBarOptions || {};
  return `
<div class="${containerClass}" style="display: flex;${height ? `height: ${height};` : "flex: 1;"}flex-direction: column;justify-content: center; width:100%;${styles}">
  ${text ? `<h6 style="text-align: center;">${text}</h6>` : ""}
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated ${type ? `bg-${type}` : ""}" role="progressbar" aria-valuenow="${curPrecent}" aria-valuemin="0" aria-valuemax="100" style="width: ${curPrecent}%"></div>
  </div>
</div>`;
}

I generally wrap makeLoadingBar with generateFullFieldHtml before I put it anywhere on a form. If you're using to cover the entire form, just toss it in the form description.

I'm not sure if the empower 2025 code uses a class or inline styles to make the background white (probably the latter), but you can just replace that with your own class on either the generateFullFieldHTML or makeLoadingBar container class property.

The who/what/where/when/why is however you want it to work.

0 0

View 1 previous reply

replied on March 23

That helped so much! I had been struggling to figure out what parts were related to the loading bar and what parts were related to the other functions on that form from last year's Empower, so this helped confirm that most of the stuff wasn't needed to make the loading bar work.

I had been way overcomplicating how it was working and getting myself seriously confused. With this help, it's a lot easier to understand what it is doing.

The issue with the background color was related to the functionality including the "use-background-color" CSS class. But I think that was more about the appearance you were going for with the example form than what was needed for the loading bar, so I'm not even going to include that.

After digging deeper into this code you posted here, along with the CSS from the whole form you had shared before, and some browser inspection with the modal and how it was working, I have settled on some code that is working the way I want.

If I use the code you posted, I can add some additional code to call your function to add the progress bar, and another bit of code to remove it as needed. The extra styling I want for the blurred background is included here too.

Here's the additional code.

//Add the loading bar on demand:
const loading = generateFullFieldHtml(
                  makeLoadingBar(100,{
                      text: "Loading your form", 
                      styles: "padding-left: 35%; padding-right: 35%; min-width: 30px;"
                    }),
                  {
                    styles:" position: fixed!important; background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px);"
                  });
LFForm.changeFormSettings({description: loading});

//Just for testing - runs after 5 seconds:
setTimeout(function() {
  //Remove the loading bar on demand:
  LFForm.changeFormSettings({description: ""});
}, 5000);

0 0

replied on March 23

For anyone following along...

Here's the full combined Javascript from Zac's post and my reply:

const generateFullFieldHtml = (content, { styles = "", id = "", zIndex = 10, classes } = {}) => {
  return content ? (
    /* html */
    `
<div
  ${id ? `id="${id}"` : ""}
  style="position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        z-index: ${zIndex};
        height: 100%;${styles}"
  class="${classes || ""}"
>
  ${content} 
</div>
`
  ) : "";
};

function makeLoadingBar(curPrecent, loadingBarOptions) {
  const { height, type, text, styles = "", containerClass = "" } = loadingBarOptions || {};
  return `
<div class="${containerClass}" style="display: flex;${height ? `height: ${height};` : "flex: 1;"}flex-direction: column;justify-content: center; width:100%;${styles}">
  ${text ? `<h6 style="text-align: center;">${text}</h6>` : ""}
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated ${type ? `bg-${type}` : ""}" role="progressbar" aria-valuenow="${curPrecent}" aria-valuemin="0" aria-valuemax="100" style="width: ${curPrecent}%"></div>
  </div>
</div>`;
}

//Add the loading bar on demand:
const loading = generateFullFieldHtml(
                  makeLoadingBar(100,{
                      text: "Loading your form", 
                      styles: "padding-left: 35%; padding-right: 35%; min-width: 30px;"
                    }),
                  {
                    styles:" position: fixed!important; background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px);"
                  });
LFForm.changeFormSettings({description: loading});

//Just for testing - runs after 5 seconds:
setTimeout(function() {
  //Remove the loading bar on demand:
  LFForm.changeFormSettings({description: ""});
}, 5000);

Also, here is some CSS to customize the formatting of the loading bar. This has widened the stripes, slowed the animation a bit, and changed the stripe color.

/*Tweaks to the appearance of the progress bar.
Includes color and animation speed.
Note that if you change the background-size, 
then need to change the keyframes to match.*/
.progress-bar {
  background-color: #43c4e3 !important;
}
.progress-bar-striped {
  background-size: 50px 50px;
}
.progress-bar-animated {
    animation: 2.50s linear infinite progress-bar-stripes;
}
@keyframes progress-bar-stripes {
  from { background-position: 50px 0; }
  to   { background-position: 0 0; }
}

0 0

replied on March 23

At empower this year I'm refining how it shows up when lookups happen on form load as well as falling back if there isn't a lookup to automatically hide it.

1 0

replied on March 23

Awesome! I'm excited! That class last year was a real boon for adding nice details to forms. Not just the modals and the progress bars, but also the CSS upgrades to how fields look and feel.

1 0

Question

Question

Want Help With the Loading Progress Bar from Empower 2025 Advanced Javascript Class

Answer

Replies

Sign in to reply to this post.