Progress bar

The WProgressBar can be used to indicate the progress of a certain operation. The text displayed in the progress bar can be customized by specializing text().

To use the progress bar widget, you need to give it a range (either by setRange() or by using setMinimum() and setMaximum()), and update the progress using setValue().

Example
0 %
source
#include <Wt/WContainerWidget.h>
#include <Wt/WProgressBar.h>
#include <Wt/WPushButton.h>
#include <Wt/WTimer.h>

auto container = std::make_unique<Wt::WContainerWidget>();
container->setStyleClass("inline-buttons");

Wt::WProgressBar *bar = container->addNew<Wt::WProgressBar>();
bar->setRange(0, 10);

Wt::WPushButton *startButton = container->addNew<Wt::WPushButton>("Start");
Wt::WPushButton *stopButton = container->addNew<Wt::WPushButton>("Stop");
Wt::WPushButton *resetButton = container->addNew<Wt::WPushButton>("Reset");

// Initially, only the start button is enabled.
stopButton->disable();
resetButton->disable();

// setup an interval timer which generates a timeout() signal every second.
auto intervalTimer = container->addChild(std::make_unique<Wt::WTimer>());
intervalTimer->setInterval(std::chrono::milliseconds(1000));

startButton->clicked().connect([=] {
    if (bar->value() < 10) {
        intervalTimer->start();
        startButton->setText("Resume");
    }

    startButton->disable();
    stopButton->enable();
    resetButton->disable();
});

stopButton->clicked().connect([=] {
    intervalTimer->stop();

    startButton->enable();
    stopButton->disable();
    resetButton->enable();
});

resetButton->clicked().connect([=] {
    bar->setValue(0.0);
    startButton->setText("Start");

    startButton->enable();
    stopButton->disable();
    resetButton->disable();
});

intervalTimer->timeout().connect([=] {
    bar->setValue(bar->value() + 1);
    if (bar->value() == 10) {
        stopButton->clicked().emit(Wt::WMouseEvent());
        startButton->disable();
    }
});

Remark

With the advent of HTML5, this widget will be implemented using the native HTML5 control when available.

Top