How to — javascript progress bar

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

How to Create a Brilliant Progress Bar with a Prototyping Tool?

Aside from having creative ideas, in order to design a brilliant progress bar, you also need to be able to translate your ideas into interactive prototypes quickly. Additionally, you need to have the ability to test and iterate these prototypes.

In order to do this, you need an easier, faster and smarter prototyping tool. We’ll walk you through a sample project using Mockplus, a tried and tested prototyping tool.

Below are simple steps for you to design a creative progress bar:

First, preview the interactive progress bar prototype:


Step1. Drag and drop the “Image”, “Shape” and “Label” components to the canvas. Also, set the Thickness of the Border and Radius of the “Shape” component:

Step2. Add the “Resize” command for the Shape component

Change the related interaction settings shown below:

Step3. Drag the Shape component back to the starting point

Prototype preview link in Mockplus: http://run.mockplus.com/PsQq8DkilSO5zqsa/index.htm…

Moreover, recently Mockplus team has launched another online design collaboration & handoff tool, Mockplus iDoc, which designers, developers and product managers can use to upload, discuss, test, share, iterate, demonstrate and handoff web/app designs with ease.

It is also a great tool for you to work together with other designers, developers and PMs to create a stunning web/app design.

Специальный элемент Microsoft ProgressBar Control

Выше было сказано о том, что саму полосу загрузки можно заменить дополнительным элементом управления формы, который специально предназначен для этого и называется Microsoft ProgressBar Control, version 6.0. Чтобы применить его, достаточно нажать правой кнопкой мыши на панели Tollbox и выбрать пункт «Additional Control…».

Но с применением этого элемента могут быть связаны проблемы работоспособности программы на разных версиях MS Office (в основном 2010 и 2013) и Windows, когда Вы попытаетесь добавить его в UserForm. Приложение выдаст ошибку «Библиотека не зарегистрирована».

Для ее устранения сначала проверьте наличие на Вашем компьютере файла MSCOMTCL.ocx. Это библиотека содержащая общие элементы управления Windows 6.0. Он должен располагаться в папке \Windows\SysWOW64 для 64-разрядных ОС либо \Windows\Sistem32 для 32-разрядных. В случае необходимости скачайте его и разместите в требуемую папку.

После того, как Вы убедились в наличии библиотеки, следует ее зарегистрировать. Запустите командную строку от имени администратора (Пуск -> Все программы -> Стандартные -> Командная строка) и выполните команду regsvr32 MSCOMTCL.ocx.

Анимируем заполнение индикатора

К сожалению, мы не сможем анимировать естественным образом процесс изменения ширину от 0 до установленного во встроенном стиле значения.

@-webkit-animation expandWidth {
   0% { width: 0; }
   100% { width: auto; }
}

Такой формат еще не поддерживается нигде. Поэтому придется использовать jQuery. Измеряем оригинальную ширину, изменяем ее на 0, а затем анимируем процесс восстановления до оригинального значения:

$(".meter > span").each(function() {
        $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                        width: $(this).data("origWidth")
                }, 1200);
});

А как же HTML5?

HTML5 имеет специальную опцию для таких задач: и ! Да, но есть некоторые шероховатости. Данные элементы имеют весьма специфический вид. По умолчанию они выглядят как индикатор прогресса на  Mac:

Вы может отключить стиль по умолчанию:

progress {
   -webkit-appearance: none;
}

Так можно удалить глянец, который присутствует по умолчанию. Но вы все еще будете весьма ограниченны в возможностях по изменению элемента. Можно слегка поменять внешний вид следующими командами:

progress::-webkit-progress-bar-value {
  -webkit-appearance: none;
  background: orangered;
}

…на этом возможности по изменению внешнего вида элемента заканчиваются. Кроме того, внешний вид будет очень сильно различаться в разных браузерах, даже в семействе WebKit. псевдо элементы также несовместимы с таким решением.

Так что на текущий момент решение с парой div/span является очень хорошим вариантом.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Free PSD Progress Bar Templates

14. Cute Game Loading Progress Bar – Free PNG and PSD Template

Rating: ★★★★★

Highlights: Unique design style

This free PSD progress bar design features a cute mascot to indicate progress. Combined with pastel colors, it works well to entice users.

What can you learn:

Create a unique design style for your progress bar in combination with the features of your products, brands, websites or apps.

Here are more unique and free PSD progress bar templates for your inspiration:


15. Music Player Progress Bar – Free PNG and PSD Template

Rating: ★★★★★

This PSD progress bar template is designed with other app features- how long till the song ends, in particular. The juxtaposition of form and function adds appeal to the design.

16. Pink Symphony Progress Bar — Free PNG and PSD Template

Rating: ★★★

Highlights: Beautiful bubble effects

This free PSD progress bar uses bubble effects to make the overall design pop.

What can you learn:

Spice up your progress bar designs with special effects, such as bubble effects, liquid effects, glowing effects or other dynamic effects.

17. Round Blue Button Progress Bar -Free PNG and PSD Template

Rating: ★★★

Highlights: 3D technology

This free PSD progress bar design takes advantage of 3D technology and uses a circular progress bar which looks like a real-life button.

What can you learn:

Improve your progress bar design with advanced technology, such as 3D technology.

18. Progress Bar Steps -Free PNG and PSD Template

Rating: ★★★

Highlights: An intuitive progress bar to show users the app/process flow

Aside from indicating the file downloading/transferring/loading process, a progress bar is also used to show user users the flow of a web/app. This PSD progress bar template is designed for that purpose.

Once users have completed a stage, it will automatically start the next stage and guide them to successful completion of a task. In this manner, the progress bar is an essential part of the navigation system of a web/app.

So, it can be an essential part of the navigation system of a web/app.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Простой прогресс бар CSS

Класс будет иметь точную ширину 30%, чтобы сделать наш прогресс бар адаптивным. Мы также поместим в класс вверху и внизу слева, чтобы придать ему простой дизайн в стиле flat (плоский).

.container {
    width:30%;
    margin:0 auto
}

.title {
    background:#545965;
    color:#fff;
    padding:15px;
    float:left;
    position:relative;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px
}

Теперь давайте сначала нарисуем незаполненный участок и выделим его белым фоном.

.bar-unfill {
    height:15px;
    display:block;
    background:#fff;
    width:100%;
    border-radius:8px
}

Далее мы стилизуем наш класс и зададим ему ширину 100%. Затем в классе мы присвоим ему ширину 0% в качестве начальной ширины. Мы также добавим CSS3 , чтобы сделать нашу анимацию плавной. Наконец, мы добавим CSS3 , содержащую имя нашей анимации, продолжительность и свойство .

.bar-fill {
    height:15px;
    display:block;
    background:#45c9a5;
    width:0;
    border-radius:8px;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

Чтобы сделать это анимированным, мы будем использовать правило CSS3 @keyframe, чтобы установить ширину от 0 до 100%. Вы также можете настроить настройки ниже по своему усмотрению.

/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar { 
    from {
        width:0
    }
    to {
        width:100%
    }
}
/* Стандартный синтаксис */
@keyframes progressbar {
    from {
        width:0
    }
    to {
        width:100%
    }
}

Basic Progress Bar

A progress bar can be used to show a user how far along he/she is in a process.

Bootstrap provides several types of progress bars.

A default progress bar in Bootstrap looks like this:

70% Complete

To create a default progress bar, add a class to a element:

Example


<div class=»progress»>  <div class=»progress-bar» role=»progressbar» aria-valuenow=»70″  aria-valuemin=»0″ aria-valuemax=»100″ style=»width:70%»>    <span class=»sr-only»>70% Complete</span>  </div></div>

Note: Progress bars are not supported in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve some of their effects).Note: To help improve accessibility for people using screen readers, you should include the aria-* attributes.

Прогресс отправки

Событие срабатывает только на стадии загрузки ответа с сервера.

А именно: если мы отправляем что-то через -запрос, сперва отправит наши данные (тело запроса) на сервер, а потом загрузит ответ сервера. И событие будет срабатывать только во вовремя загрузки ответа.

Если мы отправляем что-то большое, то нас гораздо больше интересует прогресс отправки данных на сервер. Но тут не поможет.

Существует другой объект, без методов, только для отслеживания событий отправки: .

Он генерирует события, похожие на события , но только во время отправки данных на сервер:

  • – начало загрузки данных.
  • – генерируется периодически во время отправки на сервер.
  • – загрузка прервана.
  • – ошибка, не связанная с HTTP.
  • – загрузка успешно завершена.
  • – вышло время, отведённое на загрузку (при установленном свойстве ).
  • – загрузка завершена, вне зависимости от того, как – успешно или нет.

Примеры обработчиков для этих событий:

Пример из реальной жизни: загрузка файла на сервер с индикацией прогресса:

Add Labels

If you want to add labels to indicate how far the user is in the process, add a new element inside (or outside) the progress bar:

Step 1) Add HTML:

<div id=»myProgress»>  <div id=»myBar»>10%</div></div>

Step 2) Add CSS:

#myBar {  width: 10%;  height: 30px;  background-color: #4CAF50;  text-align: center; /* To center it horizontally (if you want) */  line-height: 30px; /* To center it vertically */  color: white; }

Step 3) Add JavaScript:

If you want to dynamically update the text inside the label to the same value of the width of the progress bar, add the following:

var i = 0;function move() {  if (i == 0) {    i = 1;    var elem = document.getElementById(«myBar»);    var width = 10;    var id = setInterval(frame, 10);    function frame() {      if (width >= 100) {        clearInterval(id);        i = 0;      } else {        width++;        elem.style.width = width + «%»;        elem.innerHTML = width + «%»;      }    }  }}

Usage

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlnsandroid="http://schemas.android.com/apk/res/android"
    xmlnsapp="http://schemas.android.com/apk/res-auto"
    androidorientation="vertical"
    androidlayout_width="match_parent"
    androidgravity="center_horizontal"
    androidpaddingLeft="@dimen/activity_horizontal_margin"
    androidpaddingRight="@dimen/activity_horizontal_margin"
    androidlayout_height="match_parent">

    <com.liihuu.progressbar.ProgressBar
        androidid="@+id/progressBar"
        androidlayout_marginTop="100dp"
        androidlayout_width="match_parent"
        androidlayout_height="10dp"
        appbackgroundColor="#d8d8d8"
        appstartFillColor="#505050"
        appmiddleFillColor="#B03060"
        appendFillColor="#e03060"
        appmaxProgress="200"
        apparrowPointRadius="6dp"/>

    <com.liihuu.progressbar.FloatTextProgressBar
        androidid="@+id/floatTextProgressBar"
        androidlayout_width="match_parent"
        androidlayout_marginTop="50dp"
        androidlayout_height="30dp"
        appbackgroundColor="#d8d8d8"
        appfillColor="#ff0000"
        apptriangleColor="#ff0000"
        apprectColor="#ff0000"
        appmaxProgress="200"
        apptextColor="#fff"/>

    <com.liihuu.progressbar.CircleProgressBar
        androidid="@+id/circleProgressBar"
        androidlayout_width="100dp"
        androidlayout_height="100dp"
        androidlayout_marginTop="50dp"
        appbackgroundColor="#d8d8d8"
        appfillColor="#ff0000"
        appprogressWidth="5dp"
        appmaxProgress="200"
        apptextColor="#505050"/>

    <SeekBar
        androidid="@+id/seekBar"
        androidlayout_width="match_parent"
        androidlayout_marginTop="100dp"
        androidlayout_height="30dp" />
</LinearLayout>

activity

ProgressBar progressBar = findViewById(R.id.progressBar);
progressBar.setProgress(50);
    
FloatTextProgressBar floatTextProgressBar = findViewById(R.id.floatTextProgressBar);
floatTextProgressBar.setProgress(50);
    
CircleProgressBar circleProgressBar = findViewById(R.id.circleProgressBar);
circleProgressBar.setProgress(50);

Striped Progress Bars

Progress bars can also be striped:

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

Add class to add stripes to the progress bars:

Example


<div class=»progress»>  <div class=»progress-bar progress-bar-success progress-bar-striped» role=»progressbar»  aria-valuenow=»40″ aria-valuemin=»0″ aria-valuemax=»100″ style=»width:40%»>    40% Complete (success)  </div></div><div class=»progress»>  <div class=»progress-bar progress-bar-info progress-bar-striped» role=»progressbar»  aria-valuenow=»50″ aria-valuemin=»0″ aria-valuemax=»100″ style=»width:50%»>    50% Complete (info)  </div></div><div class=»progress»>  <div class=»progress-bar progress-bar-warning progress-bar-striped» role=»progressbar»  aria-valuenow=»60″ aria-valuemin=»0″ aria-valuemax=»100″ style=»width:60%»>    60% Complete (warning)  </div></div><div class=»progress»>  <div class=»progress-bar progress-bar-danger progress-bar-striped» role=»progressbar»  aria-valuenow=»70″ aria-valuemin=»0″ aria-valuemax=»100″ style=»width:70%»>    70% Complete (danger)  </div></div>

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Стили для индикатора прогресса

В таблице стилей мы можем использовать селектор элемента для выбора элемента и добавления правил для элемента . В ниже приведенном примере мы изменяем фоновый цвет, удаляем обводку и скругляем углы на радиус равный половине высоты элемента.

progress {
	background-color: #f3f3f3;
	border: 0;
	height: 18px;
	border-radius: 9px;
}

Однако, каждый браузер обрабатывает правила немного по своему.

В Firefox стили влияют на полоску индикатора, а на текущее значение не оказывают воздействия.

В Chrome и Safari стили не используются и применяются установки Webkit (в текущий момент времени).

Поэтому потребуется больше действий.

В Chrome и Safari элемент прогресса преобразуется следующим образом.

<progress>
    ? <div> ::-webkit-progress-bar
         ? <div>::-webkit-progress-value

Таким образом для изменения полоски индикатора и текущего значения в браузере нужно добавить псевдо-классы:

progress::-webkit-progress-bar {
	/* стили */
}
progress::-webkit-progress-value {
	/* стили */
}

Firefox также имеет специальный псевдо-класс ::-moz-progress-bar. В отличие от Chrome и Safari данный псевдо-класс ссылается на текущее значение:

progress::-moz-progress-bar {
	/* стили */
}

В завершение представим все селекторы для определения стилей HTML5 индикатора прогресса.

progress {
	/* стили */
}
progress::-webkit-progress-bar {
	/* стили  */
}
progress::-webkit-progress-value {
	/* стили */
}
progress::-moz-progress-bar {
	/* стили */
}

Пример подключения прогресс бара к макросу

Далее приводиться простой пример перебора символов строки. Процедура сама по себе смысла не имеет, но хорошо демонстрирует возможности окна загрузки.

Sub test()

' Объявляем переменную для загрузки строки
Dim strC As String
strC = Cells(1, 1).Value

' увеличиваем ее содержание
strC = strC & strC & strC & strC & strC
strC = strC & strC & strC & strC & strC
strC = strC & strC & strC & strC & strC
strC = strC & strC & strC & strC & strC
strC = strC & strC & strC & strC & strC

' создаем экземпляр класса прогресс бара
Dim bar As ProgressBar
Set bar = New ProgressBar

' создаем элементы формы прогресс бара
' последовательность создания элементов не имеет никакого значения, т.к.
' перед его создание проверяется наличие остальных. Если элементы найдены, то они сдвигаются
bar.createtimeFinish    ' вывод строки для оставшегося времени
bar.createLoadingBar    ' вывод полосы загрузки
bar.createString    ' вывод строки пройденных этапов из общего количества с указанием процента
bar.createtimeDuration  ' текущая время обработки процесса
bar.createTextBox   ' вывод пустого текстового поля
bar.setParameters Len(strC), 0, 5   ' Задание параметров для последующей обработки:
                                    ' 1 - указание числа этапов процесса;
                                    ' 2 - интервал обновления формы, в данном случае ноль, но можно вовсе опустить
                                    ' 3 - интервал обновления в секундах, применяется, только если предыдущий аргумент равен нулю или опущен

bar.Start   ' запускаем прогресс бар перед началом процесса
For i = 1 To Len(strC)
    ch = Mid(strC, i, 1)
    bar.Update i    ' обновляем прогресс бар и передаем ему номер текущего этапа процесса
                    ' вторым аргументом можно передать строку для текстового поля, но она попадет туда только в случае,
                    ' если интервал это позволяет, поэтому к элементу формы можно обратиться по его имени "Text"
Next i
bar.exitBar ' Закрываем прогресс бар

Set bar = Nothing ' удаляем экземпляр класса прогресс бара

End Sub

Начало CSS

Контейнер является «корпусом» индикатора. Мы не будем устанавливать ширину, поэтому он будет растягиваться на всю ширину родительского элемента, что соответствует поведению блочного элемента по умолчанию. Вы можете сделать так, как нужно вам. Высота также устанавливается произвольно. В нашем примере установлено значение 20 px для высоты, но она может быть любой. Также используются закругленные углы и тени для улучшения внешнего вида индикатора.

.meter {
        height: 20px;  /* Может быть любой */
        position: relative;
        background: #555;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
        -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
        box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}

А внутренний элемент будет являться полоской заполнения индикатора прогресса. Мы будем выводить его как блочный элемент со значением высоты 100%, так что он будет растягиваться на все доступное пространство. Также используется набор правил CSS3 для задания градиента и скругления углов.

.meter > span {
        display: block;
        height: 100%;
           -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
               -moz-border-radius-topright: 8px;
            -moz-border-radius-bottomright: 8px;
                   border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            -webkit-border-top-left-radius: 20px;
         -webkit-border-bottom-left-radius: 20px;
                -moz-border-radius-topleft: 20px;
             -moz-border-radius-bottomleft: 20px;
                    border-top-left-radius: 20px;
                 border-bottom-left-radius: 20px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(43,194,83)),
          color-stop(1, rgb(84,240,84))
         );
        background-image: -moz-linear-gradient(
          center bottom,
          rgb(43,194,83) 37%,
          rgb(84,240,84) 69%
         );
        -webkit-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
}

С этим читают