Progress

A WebBrowser Progressbar for Excel

Version 1.1
15Nov 2016

Progress Documentation

By: Mark Kubiszyn


Progress for Excel Screenshot



I haven't written a Progressbar for ages but after stumbling across a HTML5 CodePen by Stas Melnikov I simply had to write one for Excel in a similar style. Of course it would not as good as the HTML5 one as I am bound by the IE7 WebBrowser Control (lacking many Javascript & CSS commands) and I do not want to configure registry settings or use an IE Object. Anyhow, I think with the limitations I have, I have sort of done it justice - it certainly took a while to get the HTML right!

I have tried to emulate a kind of skipping technique, whereby for small periods of time the Bar appears to be stationary and then jumps up in small Percentages - this looks similar to the technique Stas employs. You can use this technique in the real world, bearing in mind this and the Easing will slow down the Progressbar slightly, but for small tasks the trade-off is a beautiful, stylistic Progressbar

This Progressbar can be used with DoEvents or an alternative MyDoEvents to display the Percentage and Message of a Task until it is complete, after which it can Fade away or display a Complete Page with Message. I have added the Easing function to slow the rate of the Bar down as it reaches conclusion and the Workbook comes with many examples so you can get a feel as to what can be done including some 'real world' examples. I hope you like it ;)

WATCH VIDEOS

FEATURES

- create a Progressbar to display the Percentage/Bar remaining of the task with a Message
- use an Easing technique to accelerate or decelerate the Percentage/Bar
- adapt a stylistic, skipping technique to your tasks to display a beautiful Progressbar (check out the Video on YouTube)
- change the Progressbar Background and Font Colours/Sizes
- change the way that the Progressbar is destroyed ie. Fade out, Fade out with HTML Complete Page or Fade out with user Close Button
- use HTML formatting for the Progressbar Message
- run multiple tasks where each task is given 100% before the next task begins
- hide the Close Button on the Complete Page
- change the Width and Height of the Progressbar
- lots & lots & lots of examples included; over 36 at the last count for release 1.1...
- the HTML, CSS & Javascript shows you how to:
  prevent F5 and CTRL+F5 from being pressed
  prevent the Right-click context menu from being displayed
  prevent Text Selections for specific HTML elements
  remove all scrollbars from a WebBrowser Control


REQUIRED

Excel 2010 or Excel 2013 (32bit or 64bit), working with Windows 7 & 10
Some knowledge of VBA to Copy & Paste Code into respective Code Modules in your own Projects

Configuring Progress - A Handful of Simple Settings

Configuring Progress is straightforward. Here is the Code to create a simple Progressbar around a fake task that then displays a Complete Page, before Fading out gracefully:

 
    ' // used to prevent the Code from firing if it is already running
    If Progress.Visible Then Exit Sub

    ' // initialise & display the Progressbar
    Progress.Initialise BarEasing:=True, Message:="Processing, please wait..."
    Progress.Show

    ' // do something...
    Dim i As Long
    For i = 1 To 10000
        DoEvents
        Progress.Update i, 10000
    Next i

    ' // exit the Progressbar
    Progress.Destroy ExitBy:=vbAutoHTMLMessageFadeOut
 

Progressbar:

Progress Default
Complete Page:

Progress Complete Page


Progress Screenshots

This is a Screenshot of a Yellow, smaller Progressbar in action:

Progress Yellow Smaller
This is a Screenshot of a bespoke, HTML configured Progressbar in action:

Progress HTML
This is a Screenshot of a nice Green Progressbar in action:

Nice Green

Function Parameters

Here is the full list of Function Parameters available when rendering a Progressbar:

 
 Initialise()
  ByVal BarEasing As Boolean
  Optional Width As Integer = 0
  Optional Height As Integer = 0
  Optional Message As String
  Optional BackgroundColour As Long = 0
  Optional FontColour As Long = 0
  Optional BarColour As Long = 0
  Optional PercentageFontSize As String = ""
  Optional MessageFontSize As String = ""
  Optional FontWeight As Integer = 0
  Optional CompleteCrossXPos As String = ""
  Optional CompleteMargins As String = ""

 Update()
  ByVal Interval As Long
  ByVal Total As Long

 Destroy()
  ByVal ExitBy As DestroyType
   - vbAutoFadeout
   - vbAutoHTMLMessageFadeOut
   - vbHTMLMessageCloseCross
  Optional Message As String = ""
 

Easing

Progress has a few Easing Functions that you can use or you can add your own. They are in the Update() Subroutine in the Progress UserForm Code Module:

 
        ' // acceleration, then deceleration
        y = IIf(x > 0.5, 4 * Application.WorksheetFunction.Power((x - 1), 3) + 1, 4 * Application.WorksheetFunction.Power(x, 3))
        ' // acceleration until halfway, then deceleration
        y = IIf(x < 0.5, 4 * x * x * x, (x - 1) * (2 * x - 2) * (2 * x - 2) + 1)
        ' // acceleration until halfway, then deceleration
        y = IIf(x < 0.5, 2 * x * x, -1 + (4 - 2 * x) * x)
        ' // decelerating to zero velocity
        y = x * (2 - x)
 
And here are some of my own Easing Functions for 'y' - I will include these in the next version. The first algorithm is fast until approx 60% and then slows down getting slower and slower as you approach the 100%. The second algorithm is my favourite - it sort of jerks your way to the 100%. Have a play and see what you can come up with!
 
        ' // marks algorithm 1: acceleration, then slow deceleration until finish
        y = 1 - (1 - x) ^ 3

        ' // marks algorithm 2: jerk your way to the finish line
        If Round(x * 100, 0) Mod 3 = 1 Then y = 1 - (1 - x) ^ 3
 

Copying the Code into Your Own Projects

To use Progress in your own Projects, you can simply start a Project from scratch using the Progress Workbook (you can remove the 'License' Worksheet as long as the Code Attributions remain in situ) or you can Export the Progress.BAS UserForm Files from the Progress Workbook and then Import it back into your own Project. Then you can use the examples that accompany the Software or the example above

Watch Videos

Progressbar Simulation Demo:



Progressbar Highlight Prime Numbers by Colour Demo:



Yellow Progressbar Demo:



CHANGELOG

15.11.2016 - (Version 1.1) released