Loading… animating dots in C

Question

I've recently wanted to make a "Loading..." display in C where the dots print one at a time in order and then reset:

Suprisingly, there isn't much on the internet for doing this well, so I figured I would make a simple program for it.

#include <stdio.h>
#include <time.h>

int main(void)
{
    int msec = 0;
    const int trigger = 500; // ms
    const int printWidth = 4;
    int counter = 0;
    clock_t before = clock();

    while (1)
    {
        fputs("Loading", stdout);
        clock_t difference = clock() - before;
        msec = difference * 1000 / CLOCKS_PER_SEC;
        if (msec >= trigger)
        {
            counter++;
            msec = 0;
            before = clock();
        }
        for (int i = 0; i < counter; ++i)
        {            
            fputc('.', stdout);
        }
        for (int i = 0; i < printWidth - counter; ++i)
        {
            fputc(' ', stdout);
        }
        fputc('\r', stdout);
        fflush(stdout);

        if (counter == printWidth)
        {
            counter = 0;
        }
    }
}

The output given is seen in the .gif above.

I know this can be done better. Any suggestions for improvement?

Answer 1

Too frenetic

I ran your program but it was very frenetic. It was constantly clearing the "Loading" prompt and reprinting it which resulted in a flickering effect. In addition, the cursor also moved around in a flickery manner (similar to the green box in the animated image).

To improve this, I would do two things:

1. Don't constantly draw when nothing has changed. Instead, sleep until the next trigger time and then redraw. This also has the added benefit of not using 100% of your cpu. Presumably, you will have another thread running which is doing some loading work, and you don't want this thread to hog cpu time.

2. You don't need to clear and redraw the whole prompt until you get to the last dot. Up until that point, you can just draw one dot at a time.

Rewrite

I rewrote your program with the above two fixes in mind:

#include <stdio.h>
#include <unistd.h>

int main(void)
{
    const int trigger = 500; // ms
    const int numDots = 4;
    const char prompt[] = "Loading";

    while (1) {
        // Return and clear with spaces, then return and print prompt.
        printf("\r%*s\r%s", sizeof(prompt) - 1 + numDots, "", prompt);
        fflush(stdout);

        // Print numDots number of dots, one every trigger milliseconds.
        for (int i = 0; i < numDots; i++) {
            usleep(trigger * 1000);
            fputc('.', stdout);
            fflush(stdout);
        }
    }
}

Rewrite 2

In response to the comment where @syb0rg indicated that the main thread should not sleep, here is what I would do in that case:

#include <stdio.h>
#include <time.h>

static void redrawPrompt(void);
static void doWork(void);

int main(void)
{
    const int trigger   = (CLOCKS_PER_SEC * 500) / 1000;  // 500 ms in clocks.
    clock_t   prevClock = clock() - trigger;

    while (1) {
        clock_t curClock = clock();

        if (curClock - prevClock >= trigger) {
            prevClock = curClock;
            redrawPrompt();
        }
        doWork();
    }
}

static void redrawPrompt(void)
{
    static int  numDots;
    const  int  maxDots = 4;
    const  char prompt[] = "Loading";

    // Return and clear with spaces, then return and print prompt.
    printf("\r%*s\r%s", sizeof(prompt) - 1 + maxDots, "", prompt);
    for (int i = 0; i < numDots; i++)
        fputc('.', stdout);
    fflush(stdout);
    if (++numDots > maxDots)
        numDots = 0;
}

static void doWork(void)
{
    // This function does loading work but returns at least every 500 ms.
}

Answer 2

You can get rid of that flickering green box by disabling the cursor.

fputs("\e[?25l", stdout); /* hide the cursor */

If you want it back, you can re-enable it.

fputs("\e[?25h", stdout); /* show the cursor */

Answer 3

I would probably tie this into whatever code is actually loading something, and print a new dot (or use a /-\| spinner) every 100 kb or whatever number makes, instead of trying to use time. This would also add some extra feedback if it's stalled or running slowly.

For the ... animation, cycle between printing . three times and then \b\b\b \b\b\b (three backspaces, three spaces, three backspaces) once, and only print anything when you're changing phases.

#include <stdio.h>
#include <time.h>

const char *dot_str[] = {".", ".", ".", "\b\b\b   \b\b\b"};
#define countof(x) (sizeof(x)/sizeof((x)[0]))

static int next_state = 0;
void update_progress(void) {
    fputs(dot_str[next_state], stdout);
    next_state = (next_state + 1) % countof(dot_str);
    fflush(stdout);
}

static time_t last_time = 0;
void update_progress_if_time(void) {
    time_t now = time(NULL);
    if(now > last_time) {
        update_progress();
        last_time = now;
    }
}

void start_progress(const char *loading) {
    fputs(loading, stdout);
    next_state = 0;
    last_time = 0;
    fflush(stdout);
}

For this example, I would use update_progress as a callback if you can arrange it to be called after a sufficiently large fixed unit of work, otherwise update_progress_if_time to update approximately every second. Maybe it might make sense to move the variables into a structure and pass it to the callback, but you've only got one standard output anyway.

int main(void) {
    start_progress("Loading");
    for(;;) {
        update_progress_if_time();
    }
}

Answer 4

Instead of the double for loop: one for dots and one for spaces, you could write combined one:

for (int dotPosition = 0; dotPosition < printWidth; ++dotPosition)
{            
    fputc(dotPosition < counter ? '.' : ' ', stdout);
}

To wrap the counter around to 0 when hitting printWidth, you can use the modulo operator.

counter = (counter+1) % printWidth;

As said by others, there's no point in flushing all the time (it's a waste of water) Here's my version of your program.

#include <stdio.h>
#include <time.h>

int main(void)
{
    int msec = 0;
    const int trigger = 500; // ms
    const int printWidth = 4;
    int counter = 0;
    clock_t before = clock();

    while (1)
    {
        clock_t difference = clock() - before;
        msec = difference * 1000 / CLOCKS_PER_SEC;

        if (msec >= trigger)
        {
            // timer bookkeeping
            counter = (counter+1) % printWidth;
            msec = 0;
            before = clock();

            // string assembly
            fputs("Loading", stdout);
            for (int dotPosition = 0; dotPosition < printWidth; ++dotPosition)
            {            
                fputc(dotPosition < counter ? '.' : ' ', stdout);
            }

            // flush and rewind for next write
            fflush(stdout);
            fputc('\r', stdout);
        }
    }
}

I'm not exactly sure why, but it doesn't show the frenetic cursor teleportation either. It stays put at the end of the line.