In this blog post we are going to learn how to make progress bar in gtk. progress bar is an important graphical user interface which indicates something is happening. In gtk library progress bar is an widget.

Before jumping into gui implementation our very first step should be designing a layout on pen and paper. So let us design a layout first.

how to make progress bar in gtk

how to make progress bar in gtk like above layout

Now let us program our gui in gtk. As from the layout we need four gtk widget and they are window, a vertical box, a horizontal box and a progress bar widget. window would be our main container which will contain a vertical box. The vertical box will hold horizontal box. At last we will place our progress bar inside horizontal box.

#include<gtk/gtk.h>

GtkWidget* window;
GtkWidget* vbox;
GtkWidget* hbox;
GtkWidget* prog_bar;

void run_progress_bar(gpointer data)
{
 gtk_progress_bar_pulse(GTK_PROGRESS_BAR(prog_bar));  
}

int main(int argc, char *argv[])
{
   gtk_init(&argc,&argv);

   window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
   gtk_window_set_default_size(GTK_WINDOW(window),400,600);
   g_signal_connect(window,"destroy",gtk_main_quit,NULL);

   vbox = gtk_box_new (GTK_ORIENTATION_VERTICAL,5);
   gtk_container_add (GTK_CONTAINER (window), vbox);

   hbox = gtk_box_new (GTK_ORIENTATION_HORIZONTAL,5);
   gtk_container_add (GTK_CONTAINER (vbox), hbox);
   
    
   /* Create the GtkProgressBar */
   prog_bar = gtk_progress_bar_new ();
   gtk_box_pack_start(GTK_BOX (hbox), prog_bar,1,1,5);

   gtk_widget_show_all (window);

   g_timeout_add(100,(GSourceFunc)run_progress_bar,1);

   gtk_main();
}

How to compile

gcc progressbar.c -o progbar `pkg-config --cflags --libs gtk+-3.0`

How to run

When we compile above program we will get an executable named progbar. We can run the executable on linux terminal as ./progbar

How it works

  • we have created our progress bar using gtk_progress_bar_new.
  • To animate progress bar we have used function gtk_progress_bar_pulse.
  • Each call to gtk_progress_bar_pulse() causes the block to move a little bit.
  • To call each time we have used g_time_out function , the g_timeout_add calls function run_progress_bar with the time interval of 1/10 seconds as we have passed 100 in it.
  • The function call run_progress_bar calls function gtk_progress_bar_pulse() , and function gtk_progress_bar() moves the block a little bit each time.

There is a different way of animating block of progress bar by set fraction method, to learn more visit at https://developer.gnome.org/gtk3/stable/GtkProgressBar.html#gtk-progress-bar-pulse



Related Contents to follow