Progress bar in webview

In this tutorial we will learn step by step how to add a progress bar in web view

Step 1 

Open the project in which progress is need to be added

Step 2 

Add a webview to the screen as shown in image below

Step 3

Enter the home url of webview as " https://www.google.co.in " Or add the url of your choice

Step 4

Drag and drop label to the main screen as shown in image below

Step 5

Change some properties of label as follows
1. Keep the text of label as blank"    "as shown with red circle
2. Keep the visibility of label uncheck as shown with blue circle
3.keep the background color other than white color in this case it is red.

Step 6 

Lets move to block section

Block 1 

When screen 1 will initial the webview will go to home url, in this case it is GOOGLE

Block 2 

Its the block containing the component of progress bar

"When webview1 progress change" can be finded in webview section.

Firstly the label will become visible to true.

Next block will change the width of the label as the value of progress
The value of progress varies from 0 to 100

Lastly when the width % of label will reach 100% then the label will become invisible component

Block 3 

This block is to move back the webview and if webview reaches to home url than webview will close

That's it hope you like the tutorial

If you want to test the abov aia file then below is the link provided
https://drive.google.com/open?id=1McghklprSCV4hcyawmb7ZD26RnRXVvBN

Please stay tunned for next tutorials