Show progress %

Ask the community
,
1

Hi Dears,
How can I create a graphic presantage progress presentation like in the attached image?
Thanks a lot, Dafna

2

Hi Dafna,

WixCode doesn’t have ProgressBar component. Feel free to post your request .

You could embed one in a $w.HtmlComponent and update it by sending messages to the HTML code. I found a few interesting examples in the thread Progress Bar with HTML and CSS on StackOverflow.

I hope this helps.

Yisrael

3

Thanks! magniv:)

4

Now Yisrael - How can I show it the closest to page upload???
Thanks a lot!!!

5

Hi Dafna,

Sorry, but I don’t understand your question.

6

The presentation works ok only if I create an event like button click for sending the msg from the code to the html component.
But, I need the presentation of this msg when the page uploads.
I undersatnd that the html component uploads after page onReady, so I assume that the msg sent from the code is unreached.
Since I have a client request for this presentation upon page upload, I wonder where should I put the msg to the html component?
https://www.wonderwix.net/testpage2 (top right column in light blue)

Thanks a lot, Dafna

7

the page has a new name: https://www.wonderwix.net/demo1

8

Can you help me with my video progress bar, I’m trying to get this code to work and then the video progress bar runs automatically after someone clicks the upload button, just like when you’re ready to upload your video through YT, this is what I would want, but when I input the code instead of allowing it to upload with the progress bar, it doesn‘t move at all, here‘s the code down below for the Progress Bar.

// Set the target value as 50
$w(’ #myProgressBar ').targetValue 50;
// Set the progress as 20
$w(’ #myProgressBar ').value 20;

9

@james-rondon-jr Missing the equal sign?

$w(“#myProgressBar”).targetValue = 50;

$w(“#myProgressBar”).value = 20;

10

@yisrael-wix Update: Couldn’t get it to work and I tried tampering with the code to try to make it functional, but that didn’t work either, here’s the code I used, the Progress Bar won’t even move when I hit the upload button or just in general won’t move, I don’t know if I need a certain code or what exactly.

$w.onReady ( function () {
$w(‘#progressBar1’).value = 0;
// Set the target as 100
$w(‘#progressBar1’).targetValue = 100;
})

11

@james-rondon-jr

Have a look at this youtube video, should help you achieve what you are trying to do.
https://www.youtube.com/watch?v=UrWN6oj4QGM

12

https://www.wix.com/corvid/forum/community-discussion/simple-progress-bar
https://support.wix.com/en/article/corvid-working-with-the-progress-bar-element

13

@yisrael-wix
There is no equal signs in the tutorial :wink:

// Set the target value as 50
$w('#myProgressBar').targetValue 50;
// Set the progress as 20
$w('#myProgressBar').value 20;

Velo: Working with the Progress Bar Element | Help Center | Wix.com

14

@james-rondon-jr
This isn’t a animated progress bar that moves up to 100% when something has loaded. It is just a simple progress chart that shows how much money has been raised for example.

Have a look at the youtube video from my other post to you, if you want a preloader that runs when something is actually loading up like after a submit on your form etc.

15

@givemeawhisky thanks this actually worked for me, the video did.

16

Please, I need help! Is there anyone who can explain STEP by STEP how to install a progress bar with % symbol on my WIX website, please? I don’t have experience with informatics language, so even if I read the codes suggested in this forum, I need to know where and how exactly to collocate them (in which point exactly, before or after what, or between what, and what else to do after doing this). Unfortunately, I cannot pay an expert for realizing the website, sorry. Many thanks for your help! Massimo

1049×577 63 KB

17

Please realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want.

To learn about programming with Corvid, read the following articles that will help you start working with Corvid:

I would suggest visiting the following sites for information on programming in Javascript:

18

Dear Yisrael, many thanks for your answer, I will follow your suggestions. Best regards! Massimo

19

They should add something like that though for video uploads, photo uploads, etc… it would improve wix for sure.