Search code examples
c#winformschromium

While loading a page in the chromiumwebbrowser how can I use a progressBar to displat the page loading state until finish loading?


There is a loadingstatechanged event but I'm not sure what to do in it? There is a property: IsLoading

e.IsLoading

but what I want is to update a progressBar from 0 to 100 percentages or something else with a progressBar that will indicates the page loading.

I have a progressBar in the designer already.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace Weather
{
    public partial class GoogleMapsForm : Form
    {
        public GoogleMapsForm()
        {
            InitializeComponent();

            this.WindowState = FormWindowState.Maximized;
            chromiumWebBrowser1.LoadingStateChanged += ChromiumWebBrowser1_LoadingStateChanged;
            chromiumWebBrowser1.Load("D:\\Csharp Projects\\Weather\\map.html");
        }

        private void ChromiumWebBrowser1_LoadingStateChanged(object sender, CefSharp.LoadingStateChangedEventArgs e)
        {
           
        }

        private void GoogleMapsForm_Load(object sender, EventArgs e)
        {

        }
    }
}

Solution

  • Because of the way the browser and the web server communicate with each other, it is not possible to give the loading progress as a percentage. Looking at mainstream browsers, you will see that none uses a progress bar to track loading state of a page. They all use some form of animation to show the loading state.

    If you want to use a ProgressBar control, set it's Style property to "Marquee", hide it initially and show it only while a page is loading.

    private void ChromiumWebBrowser1_LoadingStateChanged(object sender, CefSharp.LoadingStateChangedEventArgs e)
    {
        myProgressBar.Visible = e.IsLoading;
    }
    

    Set the MarqueeAnimationSpeed property of the ProgressBar to control the animation speed.