Simple progress bar

Working on a page with a 3d matrix that churns for a ridiculous amount of time (up to 96 seconds). Wix may not be the solution for my specialized application.
Anyhow, here’s a simple progress bar that may help some beginner with a similar task save some time.

Place an HTML element on your page with this simple code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script type="text/javascript">
      // when a message is received from the page code:
      window.onmessage = (event) => {
        if (event.data) {
            $( "#progressbar" ).progressbar({
		// value:10
      		value: Number(event.data)
    		});
        }
      };
    </script>
</head>
<body>
 
<div id="progressbar"></div>
 
</body>
</html>

You pass your your percentage variable (eg. “progress”) to the HTML element with:

    progress = parseInt( ( myChangingValue / total *100, 10 );
    $w("#html1").postMessage( progress ); 

You can also overlay a text element over the HTML element to show a percentage:
$w(“#progressLabel”).text = " " + progress + " %";

Looks the same on Desktop & Mobile:


More info:
As you can see, the simple script links to and uses a jQuery js and css.
Slow down is negligible. Benefit of knowing the progress of the churn is critical.
Alternatively, if you’re concerned about speed, you can just use the text element.
Simple jQuery Progressbar:

Wix Code: Working with the HTML Element:

More progress bars:


UPDATE: Corvid by Wix now sports a progress bar with various designs.
In the Wix/Corvid editor it’s under “User Input.”

3 Likes

can you share the entire code?

please?

Why do you need it, now that Wix provides a progress bar that works with Corvid?

the mobile interfase is slow i need the preloader

For mobile, just use Wix welcome screen.
https://support.wix.com/en/article/adding-a-welcome-screen-to-your-mobile-site

Or have a read of this previous forum post.
https://www.wix.com/corvid/forum/community-discussion/real-preloader-on-a-wix-website

@jonatandor35 Can you share the entire code explanation of How to work with progress bar using corvid?

where can i find progress bar in wix ??

Hello rahul sharma,

i think you are new here, please open always your own post/question (do not bump up old posts).

I think you are searching for this here… (in your language)