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.”
