Progress Bar in Webview

MIT App Inventor Help
1

Good day,
I want a loading bar in my webview app. Sometimes the website takes longer to load so it's nicer with a loading bar. I just don't get it...
Can someone help me please.
greeting

2

Use those two extensions together.

3

You could look here to add a progress indicator to your web page/s

https://codebyzach.github.io/pace/

4

Thank you so much for Response.
But i doesnt work.
Can anybody please build me an example App with progress spinner.
Best regards from germany

5

Sorry, can anybody help me. I can´t do it. It doesn´t work :frowning:
I need only a app with webviewer and progress bar or circle.
Thanks

Regards

6

Upload these two files to your assets

progressDemo.html.txt (357 Bytes)
loading-bar.css.txt (9.1 KB)

(remove the .txt extension first)

Then set webviewer url to:

http://localhost/progressDemo.html

You should see a progress bar (briefly - there is not much of anything on the html page)

progressDemoWebviewer.aia (3.3 KB)

7

Thank you very much.
Sorry, but where put i my Website Adress.
I am a newbie :frowning:

8

Either set as home url in designer (or with a block) or use the gotourl block

9

I just do not understand. I don't know how the app has to be structured and what the blocks have to look like. The progress bar has to be connected to the web viewer, right?
I'm really sorry and thank you very much for the help.

10

Did you try the example aia project I provided ?

11

yes, and it works, btw. it show the bar. But I don´t know how the blocks must show....

12

There are no blocks for the progress bar, this all happens in the html file and the call to the javascript on the PACE server CDN.

13

ok, but in the blocks i must say the webvie to use progress bar? or when know the progress bar the site loads finished.
Can you please make me an aia with webviewer so i must put my adress and it works. Please

14

You need to include the script link and the css link in the <head> section in your own webpage.....

15

ah ok, now i check it.
Is there another soluton? A solution only with app inventor.
Like here

But this doesn´t work when i did it.

16

Well you should review your work and try again...

Show your blocks

17

DXF_DWG_Infos_copy1.aia (75.7 KB)
Here is my aia. Did you find the mistake?

18

Yes

Do not use bitwise or, use multiply

image

Set your canvas to 25 pixels high and 75% wide

19

i don´t have this btw. i don´t find it...multiply.
can you send a screenshot where i can find it.

20

It is the same multiply block....

Get the multiply block from the Maths drawer in the palette.

Right click on the block and select External Inputs

image