Progress Indicators (spinner + loading bar)

zfedoran commented

2018-06-25 05:41:13 +00:00

(Migrated from github.com)

Thought someone else might find these useful. Please feel free to use / change or upgrade code as needed. These are rough but work well enough for my use. (Note: Loosely inspired by Material Design.)

Screenshots/Video

If you do change them, please post your versions, I'd love to see what you come up with.

Full Code (usage example can be found below):

namespace ImGui {
    
    bool BufferingBar(const char* label, float value,  const ImVec2& size_arg, const ImU32& bg_col, const ImU32& fg_col) {
        ImGuiWindow* window = GetCurrentWindow();
        if (window->SkipItems)
            return false;
        
        ImGuiContext& g = *GImGui;
        const ImGuiStyle& style = g.Style;
        const ImGuiID id = window->GetID(label);

        ImVec2 pos = window->DC.CursorPos;
        ImVec2 size = size_arg;
        size.x -= style.FramePadding.x * 2;
        
        const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y));
        ItemSize(bb, style.FramePadding.y);
        if (!ItemAdd(bb, id))
            return false;
        
        // Render
        const float circleStart = size.x * 0.7f;
        const float circleEnd = size.x;
        const float circleWidth = circleEnd - circleStart;
        
        window->DrawList->AddRectFilled(bb.Min, ImVec2(pos.x + circleStart, bb.Max.y), bg_col);
        window->DrawList->AddRectFilled(bb.Min, ImVec2(pos.x + circleStart*value, bb.Max.y), fg_col);
        
        const float t = g.Time;
        const float r = size.y / 2;
        const float speed = 1.5f;
        
        const float a = speed*0;
        const float b = speed*0.333f;
        const float c = speed*0.666f;
        
        const float o1 = (circleWidth+r) * (t+a - speed * (int)((t+a) / speed)) / speed;
        const float o2 = (circleWidth+r) * (t+b - speed * (int)((t+b) / speed)) / speed;
        const float o3 = (circleWidth+r) * (t+c - speed * (int)((t+c) / speed)) / speed;
        
        window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o1, bb.Min.y + r), r, bg_col);
        window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o2, bb.Min.y + r), r, bg_col);
        window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o3, bb.Min.y + r), r, bg_col);
    }

    bool Spinner(const char* label, float radius, int thickness, const ImU32& color) {
        ImGuiWindow* window = GetCurrentWindow();
        if (window->SkipItems)
            return false;
        
        ImGuiContext& g = *GImGui;
        const ImGuiStyle& style = g.Style;
        const ImGuiID id = window->GetID(label);
        
        ImVec2 pos = window->DC.CursorPos;
        ImVec2 size((radius )*2, (radius + style.FramePadding.y)*2);
        
        const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y));
        ItemSize(bb, style.FramePadding.y);
        if (!ItemAdd(bb, id))
            return false;
        
        // Render
        window->DrawList->PathClear();
        
        int num_segments = 30;
        int start = abs(ImSin(g.Time*1.8f)*(num_segments-5));
        
        const float a_min = IM_PI*2.0f * ((float)start) / (float)num_segments;
        const float a_max = IM_PI*2.0f * ((float)num_segments-3) / (float)num_segments;

        const ImVec2 centre = ImVec2(pos.x+radius, pos.y+radius+style.FramePadding.y);
        
        for (int i = 0; i < num_segments; i++) {
            const float a = a_min + ((float)i / (float)num_segments) * (a_max - a_min);
            window->DrawList->PathLineTo(ImVec2(centre.x + ImCos(a+g.Time*8) * radius,
                                                centre.y + ImSin(a+g.Time*8) * radius));
        }

        window->DrawList->PathStroke(color, false, thickness);
    }
    
}

Version/Branch of Dear ImGui: dear imgui, v1.62 WIP

Standalone, minimal, complete and verifiable example:

ImGui::Begin("Progress Indicators");

        const ImU32 col = ImGui::GetColorU32(ImGuiCol_ButtonHovered);
        const ImU32 bg = ImGui::GetColorU32(ImGuiCol_Button);

        ImGui::Spinner("##spinner", 15, 6, col);
        ImGui::BufferingBar("##buffer_bar", 0.7f, ImVec2(400, 6), bg, col);
        
ImGui::End();

edit (June 25th): Updated code based on feedback provided (https://github.com/ocornut/imgui/issues/1901#issuecomment-399868577)

Thought someone else might find these useful. Please feel free to use / change or upgrade code as needed. These are rough but work well enough for my use. (Note: Loosely inspired by Material Design.) **Screenshots/Video** ![progress_indicators](https://user-images.githubusercontent.com/623790/41831953-e5a624ee-7817-11e8-964a-4212766cb4e7.gif) If you do change them, please post your versions, I'd love to see what you come up with. Full Code (usage example can be found below): ```c++ namespace ImGui { bool BufferingBar(const char* label, float value, const ImVec2& size_arg, const ImU32& bg_col, const ImU32& fg_col) { ImGuiWindow* window = GetCurrentWindow(); if (window->SkipItems) return false; ImGuiContext& g = *GImGui; const ImGuiStyle& style = g.Style; const ImGuiID id = window->GetID(label); ImVec2 pos = window->DC.CursorPos; ImVec2 size = size_arg; size.x -= style.FramePadding.x * 2; const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y)); ItemSize(bb, style.FramePadding.y); if (!ItemAdd(bb, id)) return false; // Render const float circleStart = size.x * 0.7f; const float circleEnd = size.x; const float circleWidth = circleEnd - circleStart; window->DrawList->AddRectFilled(bb.Min, ImVec2(pos.x + circleStart, bb.Max.y), bg_col); window->DrawList->AddRectFilled(bb.Min, ImVec2(pos.x + circleStart*value, bb.Max.y), fg_col); const float t = g.Time; const float r = size.y / 2; const float speed = 1.5f; const float a = speed*0; const float b = speed*0.333f; const float c = speed*0.666f; const float o1 = (circleWidth+r) * (t+a - speed * (int)((t+a) / speed)) / speed; const float o2 = (circleWidth+r) * (t+b - speed * (int)((t+b) / speed)) / speed; const float o3 = (circleWidth+r) * (t+c - speed * (int)((t+c) / speed)) / speed; window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o1, bb.Min.y + r), r, bg_col); window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o2, bb.Min.y + r), r, bg_col); window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o3, bb.Min.y + r), r, bg_col); } bool Spinner(const char* label, float radius, int thickness, const ImU32& color) { ImGuiWindow* window = GetCurrentWindow(); if (window->SkipItems) return false; ImGuiContext& g = *GImGui; const ImGuiStyle& style = g.Style; const ImGuiID id = window->GetID(label); ImVec2 pos = window->DC.CursorPos; ImVec2 size((radius )*2, (radius + style.FramePadding.y)*2); const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y)); ItemSize(bb, style.FramePadding.y); if (!ItemAdd(bb, id)) return false; // Render window->DrawList->PathClear(); int num_segments = 30; int start = abs(ImSin(g.Time*1.8f)*(num_segments-5)); const float a_min = IM_PI*2.0f * ((float)start) / (float)num_segments; const float a_max = IM_PI*2.0f * ((float)num_segments-3) / (float)num_segments; const ImVec2 centre = ImVec2(pos.x+radius, pos.y+radius+style.FramePadding.y); for (int i = 0; i < num_segments; i++) { const float a = a_min + ((float)i / (float)num_segments) * (a_max - a_min); window->DrawList->PathLineTo(ImVec2(centre.x + ImCos(a+g.Time*8) * radius, centre.y + ImSin(a+g.Time*8) * radius)); } window->DrawList->PathStroke(color, false, thickness); } } ``` ---- **Version/Branch of Dear ImGui: dear imgui, v1.62 WIP** **Standalone, minimal, complete and verifiable example:** ```c++ ImGui::Begin("Progress Indicators"); const ImU32 col = ImGui::GetColorU32(ImGuiCol_ButtonHovered); const ImU32 bg = ImGui::GetColorU32(ImGuiCol_Button); ImGui::Spinner("##spinner", 15, 6, col); ImGui::BufferingBar("##buffer_bar", 0.7f, ImVec2(400, 6), bg, col); ImGui::End(); ``` **edit (June 25th):** Updated code based on feedback provided (https://github.com/ocornut/imgui/issues/1901#issuecomment-399868577)

👍 28 👀 7 ❤️ 37 😆 1

ocornut commented

2018-06-25 08:10:34 +00:00

(Migrated from github.com)

Thanks for posting those! Added this thread to the wiki index.

Two suggestions:

You could remove the std::vector and use window->DrawList->PathLineTo(). There's already a vector in there for that purpose and it would have amortized so it'll work with no allocation (whereas your new vector would need to allocate)
You are using an explicit Tick, you could rely on the g.Time value as well (in seconds) to avoid that parameter.

Thanks for posting those! Added this thread to the wiki index. Two suggestions: - You could remove the `std::vector` and use `window->DrawList->PathLineTo()`. There's already a vector in there for that purpose and it would have amortized so it'll work with no allocation (whereas your new vector would need to allocate) - You are using an explicit Tick, you could rely on the `g.Time` value as well (in seconds) to avoid that parameter.

👍 1

ocornut commented

2018-06-25 08:10:34 +00:00

(Migrated from github.com)

Thanks for posting those! Added this thread to the wiki index.

Two suggestions:

You could remove the std::vector and use window->DrawList->PathLineTo(). There's already a vector in there for that purpose and it would have amortized so it'll work with no allocation (whereas your new vector would need to allocate)
You are using an explicit Tick, you could rely on the g.Time value as well (in seconds) to avoid that parameter.

Thanks for posting those! Added this thread to the wiki index. Two suggestions: - You could remove the `std::vector` and use `window->DrawList->PathLineTo()`. There's already a vector in there for that purpose and it would have amortized so it'll work with no allocation (whereas your new vector would need to allocate) - You are using an explicit Tick, you could rely on the `g.Time` value as well (in seconds) to avoid that parameter.

👍 1

zfedoran commented

2018-06-25 22:17:32 +00:00

(Migrated from github.com)

@ocornut Thanks for the great feedback! I've updated the code in the original post above.

👍 2

zfedoran commented

2018-06-25 22:17:32 +00:00

(Migrated from github.com)

@ocornut Thanks for the great feedback! I've updated the code in the original post above.

👍 2

DoctorGester commented

2018-06-26 23:40:43 +00:00

(Migrated from github.com)

That's useful, thanks!

I've been using something extremely simple in my app like

void ImGui::LoadingIndicator(u32 started_showing_at) {
    float scale = platform_get_pixel_ratio();
    ImVec2 cursor = ImGui::GetCursorScreenPos() + (ImVec2(12, 12) * scale);
    const float speed_scale = 10.0f;
    float cos = cosf(tick / speed_scale);
    float sin = sinf(tick / speed_scale);
    float size = scale * 10.0f;

    u32 alpha = (u32) roundf(lerp(started_showing_at, tick, 255, 14));

    ImGui::GetWindowDrawList()->AddQuadFilled(
            cursor + ImRotate(ImVec2(-size, -size), cos, sin),
            cursor + ImRotate(ImVec2(+size, -size), cos, sin),
            cursor + ImRotate(ImVec2(+size, +size), cos, sin),
            cursor + ImRotate(ImVec2(-size, +size), cos, sin),
            IM_COL32(0, 255, 200, alpha)
    );
}

That's useful, thanks! I've been using something extremely simple in my app like ```cpp void ImGui::LoadingIndicator(u32 started_showing_at) { float scale = platform_get_pixel_ratio(); ImVec2 cursor = ImGui::GetCursorScreenPos() + (ImVec2(12, 12) * scale); const float speed_scale = 10.0f; float cos = cosf(tick / speed_scale); float sin = sinf(tick / speed_scale); float size = scale * 10.0f; u32 alpha = (u32) roundf(lerp(started_showing_at, tick, 255, 14)); ImGui::GetWindowDrawList()->AddQuadFilled( cursor + ImRotate(ImVec2(-size, -size), cos, sin), cursor + ImRotate(ImVec2(+size, -size), cos, sin), cursor + ImRotate(ImVec2(+size, +size), cos, sin), cursor + ImRotate(ImVec2(-size, +size), cos, sin), IM_COL32(0, 255, 200, alpha) ); } ```

DoctorGester commented

2018-06-26 23:40:43 +00:00

(Migrated from github.com)

That's useful, thanks!

I've been using something extremely simple in my app like

void ImGui::LoadingIndicator(u32 started_showing_at) {
    float scale = platform_get_pixel_ratio();
    ImVec2 cursor = ImGui::GetCursorScreenPos() + (ImVec2(12, 12) * scale);
    const float speed_scale = 10.0f;
    float cos = cosf(tick / speed_scale);
    float sin = sinf(tick / speed_scale);
    float size = scale * 10.0f;

    u32 alpha = (u32) roundf(lerp(started_showing_at, tick, 255, 14));

    ImGui::GetWindowDrawList()->AddQuadFilled(
            cursor + ImRotate(ImVec2(-size, -size), cos, sin),
            cursor + ImRotate(ImVec2(+size, -size), cos, sin),
            cursor + ImRotate(ImVec2(+size, +size), cos, sin),
            cursor + ImRotate(ImVec2(-size, +size), cos, sin),
            IM_COL32(0, 255, 200, alpha)
    );
}

That's useful, thanks! I've been using something extremely simple in my app like ```cpp void ImGui::LoadingIndicator(u32 started_showing_at) { float scale = platform_get_pixel_ratio(); ImVec2 cursor = ImGui::GetCursorScreenPos() + (ImVec2(12, 12) * scale); const float speed_scale = 10.0f; float cos = cosf(tick / speed_scale); float sin = sinf(tick / speed_scale); float size = scale * 10.0f; u32 alpha = (u32) roundf(lerp(started_showing_at, tick, 255, 14)); ImGui::GetWindowDrawList()->AddQuadFilled( cursor + ImRotate(ImVec2(-size, -size), cos, sin), cursor + ImRotate(ImVec2(+size, -size), cos, sin), cursor + ImRotate(ImVec2(+size, +size), cos, sin), cursor + ImRotate(ImVec2(-size, +size), cos, sin), IM_COL32(0, 255, 200, alpha) ); } ```

ocornut commented

2018-06-27 06:58:07 +00:00

(Migrated from github.com)

@DoctorGester I've been using an even more lo-fi version of that :)

ImGui::Text("Loading %c", "|/-\\"[(int)(ImGui::GetTime() / 0.05f) & 3]);

@DoctorGester I've been using an even more lo-fi version of that :) `ImGui::Text("Loading %c", "|/-\\"[(int)(ImGui::GetTime() / 0.05f) & 3]);` ![loading](https://user-images.githubusercontent.com/8225057/41957550-a0a0fbb8-79e7-11e8-9128-cf8fe3d40e03.gif)

👍 58 😕 1 ❤️ 18 🎉 3 😆 7 🚀 3

ocornut commented

2018-06-27 06:58:07 +00:00

(Migrated from github.com)

@DoctorGester I've been using an even more lo-fi version of that :)

ImGui::Text("Loading %c", "|/-\\"[(int)(ImGui::GetTime() / 0.05f) & 3]);

@DoctorGester I've been using an even more lo-fi version of that :) `ImGui::Text("Loading %c", "|/-\\"[(int)(ImGui::GetTime() / 0.05f) & 3]);` ![loading](https://user-images.githubusercontent.com/8225057/41957550-a0a0fbb8-79e7-11e8-9128-cf8fe3d40e03.gif)

👍 58 😕 1 ❤️ 18 🎉 3 😆 7 🚀 3

inflex commented

2018-07-29 06:24:50 +00:00

(Migrated from github.com)

@ocornut I want to do something in my software just so I can use that text spinner in my status bar 😆

@ocornut I want to do something in my software just so I can use that text spinner in my status bar :laughing:

😆 1

inflex commented

2018-07-29 06:24:50 +00:00

(Migrated from github.com)

@ocornut I want to do something in my software just so I can use that text spinner in my status bar 😆

@ocornut I want to do something in my software just so I can use that text spinner in my status bar :laughing:

😆 1

alexsr commented

2018-12-06 16:17:52 +00:00

(Migrated from github.com)

I thought I might also share my loading indicator. It's pretty simple, but might be interesting to some.

void ImGui::LoadingIndicatorCircle(const char* label, const float indicator_radius,
                                   const ImVec4& main_color, const ImVec4& backdrop_color,
                                   const int circle_count, const float speed) {
    ImGuiWindow* window = GetCurrentWindow();
    if (window->SkipItems) {
        return;
    }

    ImGuiContext& g = *GImGui;
    const ImGuiID id = window->GetID(label);

    const ImVec2 pos = window->DC.CursorPos;
    const float circle_radius = indicator_radius / 15.0f;
    const float updated_indicator_radius = indicator_radius - 4.0f * circle_radius;
    const ImRect bb(pos, ImVec2(pos.x + indicator_radius * 2.0f, pos.y + indicator_radius * 2.0f));
    ItemSize(bb);
    if (!ItemAdd(bb, id)) {
        return;
    }
    const float t = g.Time;
    const auto degree_offset = 2.0f * IM_PI / circle_count;
    for (int i = 0; i < circle_count; ++i) {
        const auto x = updated_indicator_radius * std::sin(degree_offset * i);
        const auto y = updated_indicator_radius * std::cos(degree_offset * i);
        const auto growth = std::max(0.0f, std::sin(t * speed - i * degree_offset));
        ImVec4 color;
        color.x = main_color.x * growth + backdrop_color.x * (1.0f - growth);
        color.y = main_color.y * growth + backdrop_color.y * (1.0f - growth);
        color.z = main_color.z * growth + backdrop_color.z * (1.0f - growth);
        color.w = 1.0f;
        window->DrawList->AddCircleFilled(ImVec2(pos.x + indicator_radius + x,
                                                 pos.y + indicator_radius - y),
                                          circle_radius + growth * circle_radius, GetColorU32(color));
    }
}

Edit 2023-11-16: Updated loading circles to fix content box.

I thought I might also share my loading indicator. It's pretty simple, but might be interesting to some. ![loading_indicator](https://user-images.githubusercontent.com/9075101/49596140-eac5f100-f979-11e8-83bc-25ccaabdb8da.gif) ```cpp void ImGui::LoadingIndicatorCircle(const char* label, const float indicator_radius, const ImVec4& main_color, const ImVec4& backdrop_color, const int circle_count, const float speed) { ImGuiWindow* window = GetCurrentWindow(); if (window->SkipItems) { return; } ImGuiContext& g = *GImGui; const ImGuiID id = window->GetID(label); const ImVec2 pos = window->DC.CursorPos; const float circle_radius = indicator_radius / 15.0f; const float updated_indicator_radius = indicator_radius - 4.0f * circle_radius; const ImRect bb(pos, ImVec2(pos.x + indicator_radius * 2.0f, pos.y + indicator_radius * 2.0f)); ItemSize(bb); if (!ItemAdd(bb, id)) { return; } const float t = g.Time; const auto degree_offset = 2.0f * IM_PI / circle_count; for (int i = 0; i < circle_count; ++i) { const auto x = updated_indicator_radius * std::sin(degree_offset * i); const auto y = updated_indicator_radius * std::cos(degree_offset * i); const auto growth = std::max(0.0f, std::sin(t * speed - i * degree_offset)); ImVec4 color; color.x = main_color.x * growth + backdrop_color.x * (1.0f - growth); color.y = main_color.y * growth + backdrop_color.y * (1.0f - growth); color.z = main_color.z * growth + backdrop_color.z * (1.0f - growth); color.w = 1.0f; window->DrawList->AddCircleFilled(ImVec2(pos.x + indicator_radius + x, pos.y + indicator_radius - y), circle_radius + growth * circle_radius, GetColorU32(color)); } } ``` _Edit 2023-11-16: Updated loading circles to fix content box._

👍 19 ❤️ 12

alexsr commented

2018-12-06 16:17:52 +00:00

(Migrated from github.com)

I thought I might also share my loading indicator. It's pretty simple, but might be interesting to some.

void ImGui::LoadingIndicatorCircle(const char* label, const float indicator_radius,
                                   const ImVec4& main_color, const ImVec4& backdrop_color,
                                   const int circle_count, const float speed) {
    ImGuiWindow* window = GetCurrentWindow();
    if (window->SkipItems) {
        return;
    }

    ImGuiContext& g = *GImGui;
    const ImGuiID id = window->GetID(label);

    const ImVec2 pos = window->DC.CursorPos;
    const float circle_radius = indicator_radius / 15.0f;
    const float updated_indicator_radius = indicator_radius - 4.0f * circle_radius;
    const ImRect bb(pos, ImVec2(pos.x + indicator_radius * 2.0f, pos.y + indicator_radius * 2.0f));
    ItemSize(bb);
    if (!ItemAdd(bb, id)) {
        return;
    }
    const float t = g.Time;
    const auto degree_offset = 2.0f * IM_PI / circle_count;
    for (int i = 0; i < circle_count; ++i) {
        const auto x = updated_indicator_radius * std::sin(degree_offset * i);
        const auto y = updated_indicator_radius * std::cos(degree_offset * i);
        const auto growth = std::max(0.0f, std::sin(t * speed - i * degree_offset));
        ImVec4 color;
        color.x = main_color.x * growth + backdrop_color.x * (1.0f - growth);
        color.y = main_color.y * growth + backdrop_color.y * (1.0f - growth);
        color.z = main_color.z * growth + backdrop_color.z * (1.0f - growth);
        color.w = 1.0f;
        window->DrawList->AddCircleFilled(ImVec2(pos.x + indicator_radius + x,
                                                 pos.y + indicator_radius - y),
                                          circle_radius + growth * circle_radius, GetColorU32(color));
    }
}

Edit 2023-11-16: Updated loading circles to fix content box.

I thought I might also share my loading indicator. It's pretty simple, but might be interesting to some. ![loading_indicator](https://user-images.githubusercontent.com/9075101/49596140-eac5f100-f979-11e8-83bc-25ccaabdb8da.gif) ```cpp void ImGui::LoadingIndicatorCircle(const char* label, const float indicator_radius, const ImVec4& main_color, const ImVec4& backdrop_color, const int circle_count, const float speed) { ImGuiWindow* window = GetCurrentWindow(); if (window->SkipItems) { return; } ImGuiContext& g = *GImGui; const ImGuiID id = window->GetID(label); const ImVec2 pos = window->DC.CursorPos; const float circle_radius = indicator_radius / 15.0f; const float updated_indicator_radius = indicator_radius - 4.0f * circle_radius; const ImRect bb(pos, ImVec2(pos.x + indicator_radius * 2.0f, pos.y + indicator_radius * 2.0f)); ItemSize(bb); if (!ItemAdd(bb, id)) { return; } const float t = g.Time; const auto degree_offset = 2.0f * IM_PI / circle_count; for (int i = 0; i < circle_count; ++i) { const auto x = updated_indicator_radius * std::sin(degree_offset * i); const auto y = updated_indicator_radius * std::cos(degree_offset * i); const auto growth = std::max(0.0f, std::sin(t * speed - i * degree_offset)); ImVec4 color; color.x = main_color.x * growth + backdrop_color.x * (1.0f - growth); color.y = main_color.y * growth + backdrop_color.y * (1.0f - growth); color.z = main_color.z * growth + backdrop_color.z * (1.0f - growth); color.w = 1.0f; window->DrawList->AddCircleFilled(ImVec2(pos.x + indicator_radius + x, pos.y + indicator_radius - y), circle_radius + growth * circle_radius, GetColorU32(color)); } } ``` _Edit 2023-11-16: Updated loading circles to fix content box._

👍 19 ❤️ 12

hofstee commented

2019-11-10 11:13:11 +00:00

(Migrated from github.com)

I tried my hand at making the original spinner by @zfedoran adhere more closely to the material design implementations. This is inspired by the implementation in Flutter (found here), and I just used the cubic_bezier implementation from chromium.

I've tried to make sense of all the random constants in the Flutter version as well and assign them to meaningful variables.

#include "cubic_bezier.h"
#include "imgui.h"
#include "imgui_internal.h"
#include <functional>

static gfx::CubicBezier fast_out_slow_in(0.4, 0.0, 0.2, 1.0);

static float bezier(float t) {
    return fast_out_slow_in.Solve(t);
}

namespace ImGui {
    constexpr
    static auto lerp(float x0, float x1) {
        return [=](float t){
            return (1-t) * x0 + t * x1;
        };
    }

    constexpr
    static float lerp(float x0, float x1, float t) {
        return lerp(x0, x1)(t);
    }

    static auto interval(float T0, float T1, std::function<float(float)> tween = lerp(0.0, 1.0)) {
        return [=](float t){
            return t < T0 ? 0.0f : t > T1 ? 1.0f : tween((t-T0) / (T1-T0));
        };
    }

    template <int T>
    float sawtooth(float t) {
        return ImFmod(((float)T)*t, 1.0f);
    }

    bool Spinner(const char* label, float radius, int thickness, const ImU32& color) {
        ImGuiWindow* window = GetCurrentWindow();
        if (window->SkipItems)
            return false;

        ImGuiContext& g = *GImGui;
        const ImGuiStyle& style = g.Style;
        const ImGuiID id = window->GetID(label);

        ImVec2 pos = window->DC.CursorPos;
        ImVec2 size((radius )*2, (radius + style.FramePadding.y)*2);

        const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y));
        ItemSize(bb, style.FramePadding.y);
        if (!ItemAdd(bb, id))
            return false;

        // Render
        const ImVec2 center = ImVec2(pos.x+radius, pos.y+radius+thickness+style.FramePadding.y);

        const float start_angle = -IM_PI / 2.0f;         // Start at the top
        const int num_detents = 5;                       // how many rotations we want before a repeat
        const int skip_detents = 3;                      // how many steps we skip each rotation
        const float period = 5.0f;                       // in seconds
        const float t = ImFmod(g.Time, period) / period; // map period into [0, 1]

        // Tweening functions for each part of the spinner
        auto stroke_head_tween = [](float t){
            t = sawtooth<num_detents>(t);
            return interval(0.0, 0.5, bezier)(t);
        };

        auto stroke_tail_tween = [](float t){
            t = sawtooth<num_detents>(t);
            return interval(0.5, 1.0, bezier)(t);
        };

        auto step_tween = [=](float t){
            return floor(lerp(0.0, (float)num_detents, t));
        };

        auto rotation_tween = sawtooth<num_detents>;

        const float head_value = stroke_head_tween(t);
        const float tail_value = stroke_tail_tween(t);
        const float step_value = step_tween(t);
        const float rotation_value = rotation_tween(t);

        const float min_arc =  30.0f / 360.0f * 2.0f * IM_PI;
        const float max_arc = 270.0f / 360.0f * 2.0f * IM_PI;
        const float step_offset = skip_detents * 2.0f * IM_PI / num_detents;
        const float rotation_compensation = ImFmod(4.0*IM_PI - step_offset - max_arc, 2*IM_PI);

        const float a_min = start_angle + tail_value * max_arc + rotation_value * rotation_compensation - step_value * step_offset;
        const float a_max = a_min + (head_value - tail_value) * max_arc + min_arc;

        window->DrawList->PathClear();

        int num_segments = 24;
        for (int i = 0; i < num_segments; i++) {
            const float a = a_min + ((float)i / (float)num_segments) * (a_max - a_min);
            window->DrawList->PathLineTo(ImVec2(center.x + ImCos(a) * radius,
                                                center.y + ImSin(a) * radius));
        }

        window->DrawList->PathStroke(color, false, thickness);

        return true;
    }

}

I tried my hand at making the original spinner by @zfedoran adhere more closely to the material design implementations. This is inspired by the implementation in Flutter ([found here](https://github.com/flutter/flutter/blob/1aedbb1835/packages/flutter/lib/src/material/progress_indicator.dart#L411)), and I just used the cubic_bezier implementation from [chromium](https://github.com/chromium/chromium/blob/master/ui/gfx/geometry/cubic_bezier.h). I've tried to make sense of all the random constants in the Flutter version as well and assign them to meaningful variables. ![preview](https://user-images.githubusercontent.com/5227572/68543225-2a0a7800-0369-11ea-896b-5435f2236074.gif) ```c++ #include "cubic_bezier.h" #include "imgui.h" #include "imgui_internal.h" #include <functional> static gfx::CubicBezier fast_out_slow_in(0.4, 0.0, 0.2, 1.0); static float bezier(float t) { return fast_out_slow_in.Solve(t); } namespace ImGui { constexpr static auto lerp(float x0, float x1) { return [=](float t){ return (1-t) * x0 + t * x1; }; } constexpr static float lerp(float x0, float x1, float t) { return lerp(x0, x1)(t); } static auto interval(float T0, float T1, std::function<float(float)> tween = lerp(0.0, 1.0)) { return [=](float t){ return t < T0 ? 0.0f : t > T1 ? 1.0f : tween((t-T0) / (T1-T0)); }; } template <int T> float sawtooth(float t) { return ImFmod(((float)T)*t, 1.0f); } bool Spinner(const char* label, float radius, int thickness, const ImU32& color) { ImGuiWindow* window = GetCurrentWindow(); if (window->SkipItems) return false; ImGuiContext& g = *GImGui; const ImGuiStyle& style = g.Style; const ImGuiID id = window->GetID(label); ImVec2 pos = window->DC.CursorPos; ImVec2 size((radius )*2, (radius + style.FramePadding.y)*2); const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y)); ItemSize(bb, style.FramePadding.y); if (!ItemAdd(bb, id)) return false; // Render const ImVec2 center = ImVec2(pos.x+radius, pos.y+radius+thickness+style.FramePadding.y); const float start_angle = -IM_PI / 2.0f; // Start at the top const int num_detents = 5; // how many rotations we want before a repeat const int skip_detents = 3; // how many steps we skip each rotation const float period = 5.0f; // in seconds const float t = ImFmod(g.Time, period) / period; // map period into [0, 1] // Tweening functions for each part of the spinner auto stroke_head_tween = [](float t){ t = sawtooth<num_detents>(t); return interval(0.0, 0.5, bezier)(t); }; auto stroke_tail_tween = [](float t){ t = sawtooth<num_detents>(t); return interval(0.5, 1.0, bezier)(t); }; auto step_tween = [=](float t){ return floor(lerp(0.0, (float)num_detents, t)); }; auto rotation_tween = sawtooth<num_detents>; const float head_value = stroke_head_tween(t); const float tail_value = stroke_tail_tween(t); const float step_value = step_tween(t); const float rotation_value = rotation_tween(t); const float min_arc = 30.0f / 360.0f * 2.0f * IM_PI; const float max_arc = 270.0f / 360.0f * 2.0f * IM_PI; const float step_offset = skip_detents * 2.0f * IM_PI / num_detents; const float rotation_compensation = ImFmod(4.0*IM_PI - step_offset - max_arc, 2*IM_PI); const float a_min = start_angle + tail_value * max_arc + rotation_value * rotation_compensation - step_value * step_offset; const float a_max = a_min + (head_value - tail_value) * max_arc + min_arc; window->DrawList->PathClear(); int num_segments = 24; for (int i = 0; i < num_segments; i++) { const float a = a_min + ((float)i / (float)num_segments) * (a_max - a_min); window->DrawList->PathLineTo(ImVec2(center.x + ImCos(a) * radius, center.y + ImSin(a) * radius)); } window->DrawList->PathStroke(color, false, thickness); return true; } } ```

❤️ 18

hofstee commented

2019-11-10 11:13:11 +00:00

(Migrated from github.com)

I tried my hand at making the original spinner by @zfedoran adhere more closely to the material design implementations. This is inspired by the implementation in Flutter (found here), and I just used the cubic_bezier implementation from chromium.

I've tried to make sense of all the random constants in the Flutter version as well and assign them to meaningful variables.

#include "cubic_bezier.h"
#include "imgui.h"
#include "imgui_internal.h"
#include <functional>

static gfx::CubicBezier fast_out_slow_in(0.4, 0.0, 0.2, 1.0);

static float bezier(float t) {
    return fast_out_slow_in.Solve(t);
}

namespace ImGui {
    constexpr
    static auto lerp(float x0, float x1) {
        return [=](float t){
            return (1-t) * x0 + t * x1;
        };
    }

    constexpr
    static float lerp(float x0, float x1, float t) {
        return lerp(x0, x1)(t);
    }

    static auto interval(float T0, float T1, std::function<float(float)> tween = lerp(0.0, 1.0)) {
        return [=](float t){
            return t < T0 ? 0.0f : t > T1 ? 1.0f : tween((t-T0) / (T1-T0));
        };
    }

    template <int T>
    float sawtooth(float t) {
        return ImFmod(((float)T)*t, 1.0f);
    }

    bool Spinner(const char* label, float radius, int thickness, const ImU32& color) {
        ImGuiWindow* window = GetCurrentWindow();
        if (window->SkipItems)
            return false;

        ImGuiContext& g = *GImGui;
        const ImGuiStyle& style = g.Style;
        const ImGuiID id = window->GetID(label);

        ImVec2 pos = window->DC.CursorPos;
        ImVec2 size((radius )*2, (radius + style.FramePadding.y)*2);

        const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y));
        ItemSize(bb, style.FramePadding.y);
        if (!ItemAdd(bb, id))
            return false;

        // Render
        const ImVec2 center = ImVec2(pos.x+radius, pos.y+radius+thickness+style.FramePadding.y);

        const float start_angle = -IM_PI / 2.0f;         // Start at the top
        const int num_detents = 5;                       // how many rotations we want before a repeat
        const int skip_detents = 3;                      // how many steps we skip each rotation
        const float period = 5.0f;                       // in seconds
        const float t = ImFmod(g.Time, period) / period; // map period into [0, 1]

        // Tweening functions for each part of the spinner
        auto stroke_head_tween = [](float t){
            t = sawtooth<num_detents>(t);
            return interval(0.0, 0.5, bezier)(t);
        };

        auto stroke_tail_tween = [](float t){
            t = sawtooth<num_detents>(t);
            return interval(0.5, 1.0, bezier)(t);
        };

        auto step_tween = [=](float t){
            return floor(lerp(0.0, (float)num_detents, t));
        };

        auto rotation_tween = sawtooth<num_detents>;

        const float head_value = stroke_head_tween(t);
        const float tail_value = stroke_tail_tween(t);
        const float step_value = step_tween(t);
        const float rotation_value = rotation_tween(t);

        const float min_arc =  30.0f / 360.0f * 2.0f * IM_PI;
        const float max_arc = 270.0f / 360.0f * 2.0f * IM_PI;
        const float step_offset = skip_detents * 2.0f * IM_PI / num_detents;
        const float rotation_compensation = ImFmod(4.0*IM_PI - step_offset - max_arc, 2*IM_PI);

        const float a_min = start_angle + tail_value * max_arc + rotation_value * rotation_compensation - step_value * step_offset;
        const float a_max = a_min + (head_value - tail_value) * max_arc + min_arc;

        window->DrawList->PathClear();

        int num_segments = 24;
        for (int i = 0; i < num_segments; i++) {
            const float a = a_min + ((float)i / (float)num_segments) * (a_max - a_min);
            window->DrawList->PathLineTo(ImVec2(center.x + ImCos(a) * radius,
                                                center.y + ImSin(a) * radius));
        }

        window->DrawList->PathStroke(color, false, thickness);

        return true;
    }

}

I tried my hand at making the original spinner by @zfedoran adhere more closely to the material design implementations. This is inspired by the implementation in Flutter ([found here](https://github.com/flutter/flutter/blob/1aedbb1835/packages/flutter/lib/src/material/progress_indicator.dart#L411)), and I just used the cubic_bezier implementation from [chromium](https://github.com/chromium/chromium/blob/master/ui/gfx/geometry/cubic_bezier.h). I've tried to make sense of all the random constants in the Flutter version as well and assign them to meaningful variables. ![preview](https://user-images.githubusercontent.com/5227572/68543225-2a0a7800-0369-11ea-896b-5435f2236074.gif) ```c++ #include "cubic_bezier.h" #include "imgui.h" #include "imgui_internal.h" #include <functional> static gfx::CubicBezier fast_out_slow_in(0.4, 0.0, 0.2, 1.0); static float bezier(float t) { return fast_out_slow_in.Solve(t); } namespace ImGui { constexpr static auto lerp(float x0, float x1) { return [=](float t){ return (1-t) * x0 + t * x1; }; } constexpr static float lerp(float x0, float x1, float t) { return lerp(x0, x1)(t); } static auto interval(float T0, float T1, std::function<float(float)> tween = lerp(0.0, 1.0)) { return [=](float t){ return t < T0 ? 0.0f : t > T1 ? 1.0f : tween((t-T0) / (T1-T0)); }; } template <int T> float sawtooth(float t) { return ImFmod(((float)T)*t, 1.0f); } bool Spinner(const char* label, float radius, int thickness, const ImU32& color) { ImGuiWindow* window = GetCurrentWindow(); if (window->SkipItems) return false; ImGuiContext& g = *GImGui; const ImGuiStyle& style = g.Style; const ImGuiID id = window->GetID(label); ImVec2 pos = window->DC.CursorPos; ImVec2 size((radius )*2, (radius + style.FramePadding.y)*2); const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y)); ItemSize(bb, style.FramePadding.y); if (!ItemAdd(bb, id)) return false; // Render const ImVec2 center = ImVec2(pos.x+radius, pos.y+radius+thickness+style.FramePadding.y); const float start_angle = -IM_PI / 2.0f; // Start at the top const int num_detents = 5; // how many rotations we want before a repeat const int skip_detents = 3; // how many steps we skip each rotation const float period = 5.0f; // in seconds const float t = ImFmod(g.Time, period) / period; // map period into [0, 1] // Tweening functions for each part of the spinner auto stroke_head_tween = [](float t){ t = sawtooth<num_detents>(t); return interval(0.0, 0.5, bezier)(t); }; auto stroke_tail_tween = [](float t){ t = sawtooth<num_detents>(t); return interval(0.5, 1.0, bezier)(t); }; auto step_tween = [=](float t){ return floor(lerp(0.0, (float)num_detents, t)); }; auto rotation_tween = sawtooth<num_detents>; const float head_value = stroke_head_tween(t); const float tail_value = stroke_tail_tween(t); const float step_value = step_tween(t); const float rotation_value = rotation_tween(t); const float min_arc = 30.0f / 360.0f * 2.0f * IM_PI; const float max_arc = 270.0f / 360.0f * 2.0f * IM_PI; const float step_offset = skip_detents * 2.0f * IM_PI / num_detents; const float rotation_compensation = ImFmod(4.0*IM_PI - step_offset - max_arc, 2*IM_PI); const float a_min = start_angle + tail_value * max_arc + rotation_value * rotation_compensation - step_value * step_offset; const float a_max = a_min + (head_value - tail_value) * max_arc + min_arc; window->DrawList->PathClear(); int num_segments = 24; for (int i = 0; i < num_segments; i++) { const float a = a_min + ((float)i / (float)num_segments) * (a_max - a_min); window->DrawList->PathLineTo(ImVec2(center.x + ImCos(a) * radius, center.y + ImSin(a) * radius)); } window->DrawList->PathStroke(color, false, thickness); return true; } } ```

❤️ 18

jdumas commented

2021-01-06 21:48:24 +00:00

(Migrated from github.com)

@zfedoran could you confirm what's the license on your code snippet? This is really cool!

jdumas commented

2021-01-06 21:48:24 +00:00

(Migrated from github.com)

@zfedoran could you confirm what's the license on your code snippet? This is really cool!

zfedoran commented

2021-01-07 00:39:28 +00:00

(Migrated from github.com)

@zfedoran could you confirm what's the license on your code snippet? This is really cool!

Feel free to use the snippet however you'd like. Consider the license on the snippet MIT, same as this repository. If you build something cool with it, we'd love to see it ;)

> @zfedoran could you confirm what's the license on your code snippet? This is really cool! Feel free to use the snippet however you'd like. Consider the license on the snippet MIT, same as this repository. If you build something cool with it, we'd love to see it ;)

👍 1

zfedoran commented

2021-01-07 00:39:28 +00:00

(Migrated from github.com)

@zfedoran could you confirm what's the license on your code snippet? This is really cool!

Feel free to use the snippet however you'd like. Consider the license on the snippet MIT, same as this repository. If you build something cool with it, we'd love to see it ;)

> @zfedoran could you confirm what's the license on your code snippet? This is really cool! Feel free to use the snippet however you'd like. Consider the license on the snippet MIT, same as this repository. If you build something cool with it, we'd love to see it ;)

👍 1

jdumas commented

2021-01-07 00:44:26 +00:00

(Migrated from github.com)

Thanks!

jdumas commented

2021-01-07 00:44:26 +00:00

(Migrated from github.com)

Thanks!

OPstriker commented

2022-05-18 23:34:21 +00:00

(Migrated from github.com)

Works Great TY

OPstriker commented

2022-05-18 23:34:21 +00:00

(Migrated from github.com)

Works Great TY

ghost commented

2024-02-18 14:32:15 +00:00

(Migrated from github.com)

Thought someone else might find these useful. Please feel free to use / change or upgrade code as needed. These are rough but work well enough for my use. (Note: Loosely inspired by Material Design.)

Screenshots/Video

If you do change them, please post your versions, I'd love to see what you come up with.

Full Code (usage example can be found below):

namespace ImGui {
    
    bool BufferingBar(const char* label, float value,  const ImVec2& size_arg, const ImU32& bg_col, const ImU32& fg_col) {
        ImGuiWindow* window = GetCurrentWindow();
        if (window->SkipItems)
            return false;
        
        ImGuiContext& g = *GImGui;
        const ImGuiStyle& style = g.Style;
        const ImGuiID id = window->GetID(label);

        ImVec2 pos = window->DC.CursorPos;
        ImVec2 size = size_arg;
        size.x -= style.FramePadding.x * 2;
        
        const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y));
        ItemSize(bb, style.FramePadding.y);
        if (!ItemAdd(bb, id))
            return false;
        
        // Render
        const float circleStart = size.x * 0.7f;
        const float circleEnd = size.x;
        const float circleWidth = circleEnd - circleStart;
        
        window->DrawList->AddRectFilled(bb.Min, ImVec2(pos.x + circleStart, bb.Max.y), bg_col);
        window->DrawList->AddRectFilled(bb.Min, ImVec2(pos.x + circleStart*value, bb.Max.y), fg_col);
        
        const float t = g.Time;
        const float r = size.y / 2;
        const float speed = 1.5f;
        
        const float a = speed*0;
        const float b = speed*0.333f;
        const float c = speed*0.666f;
        
        const float o1 = (circleWidth+r) * (t+a - speed * (int)((t+a) / speed)) / speed;
        const float o2 = (circleWidth+r) * (t+b - speed * (int)((t+b) / speed)) / speed;
        const float o3 = (circleWidth+r) * (t+c - speed * (int)((t+c) / speed)) / speed;
        
        window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o1, bb.Min.y + r), r, bg_col);
        window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o2, bb.Min.y + r), r, bg_col);
        window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o3, bb.Min.y + r), r, bg_col);
    }

    bool Spinner(const char* label, float radius, int thickness, const ImU32& color) {
        ImGuiWindow* window = GetCurrentWindow();
        if (window->SkipItems)
            return false;
        
        ImGuiContext& g = *GImGui;
        const ImGuiStyle& style = g.Style;
        const ImGuiID id = window->GetID(label);
        
        ImVec2 pos = window->DC.CursorPos;
        ImVec2 size((radius )*2, (radius + style.FramePadding.y)*2);
        
        const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y));
        ItemSize(bb, style.FramePadding.y);
        if (!ItemAdd(bb, id))
            return false;
        
        // Render
        window->DrawList->PathClear();
        
        int num_segments = 30;
        int start = abs(ImSin(g.Time*1.8f)*(num_segments-5));
        
        const float a_min = IM_PI*2.0f * ((float)start) / (float)num_segments;
        const float a_max = IM_PI*2.0f * ((float)num_segments-3) / (float)num_segments;

        const ImVec2 centre = ImVec2(pos.x+radius, pos.y+radius+style.FramePadding.y);
        
        for (int i = 0; i < num_segments; i++) {
            const float a = a_min + ((float)i / (float)num_segments) * (a_max - a_min);
            window->DrawList->PathLineTo(ImVec2(centre.x + ImCos(a+g.Time*8) * radius,
                                                centre.y + ImSin(a+g.Time*8) * radius));
        }

        window->DrawList->PathStroke(color, false, thickness);
    }
    
}

Version/Branch of Dear ImGui: dear imgui, v1.62 WIP

Standalone, minimal, complete and verifiable example:

ImGui::Begin("Progress Indicators");

        const ImU32 col = ImGui::GetColorU32(ImGuiCol_ButtonHovered);
        const ImU32 bg = ImGui::GetColorU32(ImGuiCol_Button);

        ImGui::Spinner("##spinner", 15, 6, col);
        ImGui::BufferingBar("##buffer_bar", 0.7f, ImVec2(400, 6), bg, col);
        
ImGui::End();

edit (June 25th): Updated code based on feedback provided (#1901 (comment))

Nice work! Using this in my Game (Springtech-Studios/SisijaFight)

> Thought someone else might find these useful. Please feel free to use / change or upgrade code as needed. These are rough but work well enough for my use. (Note: Loosely inspired by Material Design.) > > **Screenshots/Video** > > ![progress_indicators](https://user-images.githubusercontent.com/623790/41831953-e5a624ee-7817-11e8-964a-4212766cb4e7.gif) [ ![progress_indicators](https://user-images.githubusercontent.com/623790/41831953-e5a624ee-7817-11e8-964a-4212766cb4e7.gif) ](https://user-images.githubusercontent.com/623790/41831953-e5a624ee-7817-11e8-964a-4212766cb4e7.gif) [ ](https://user-images.githubusercontent.com/623790/41831953-e5a624ee-7817-11e8-964a-4212766cb4e7.gif) > > If you do change them, please post your versions, I'd love to see what you come up with. > > Full Code (usage example can be found below): > > ```c++ > namespace ImGui { > > bool BufferingBar(const char* label, float value, const ImVec2& size_arg, const ImU32& bg_col, const ImU32& fg_col) { > ImGuiWindow* window = GetCurrentWindow(); > if (window->SkipItems) > return false; > > ImGuiContext& g = *GImGui; > const ImGuiStyle& style = g.Style; > const ImGuiID id = window->GetID(label); > > ImVec2 pos = window->DC.CursorPos; > ImVec2 size = size_arg; > size.x -= style.FramePadding.x * 2; > > const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y)); > ItemSize(bb, style.FramePadding.y); > if (!ItemAdd(bb, id)) > return false; > > // Render > const float circleStart = size.x * 0.7f; > const float circleEnd = size.x; > const float circleWidth = circleEnd - circleStart; > > window->DrawList->AddRectFilled(bb.Min, ImVec2(pos.x + circleStart, bb.Max.y), bg_col); > window->DrawList->AddRectFilled(bb.Min, ImVec2(pos.x + circleStart*value, bb.Max.y), fg_col); > > const float t = g.Time; > const float r = size.y / 2; > const float speed = 1.5f; > > const float a = speed*0; > const float b = speed*0.333f; > const float c = speed*0.666f; > > const float o1 = (circleWidth+r) * (t+a - speed * (int)((t+a) / speed)) / speed; > const float o2 = (circleWidth+r) * (t+b - speed * (int)((t+b) / speed)) / speed; > const float o3 = (circleWidth+r) * (t+c - speed * (int)((t+c) / speed)) / speed; > > window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o1, bb.Min.y + r), r, bg_col); > window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o2, bb.Min.y + r), r, bg_col); > window->DrawList->AddCircleFilled(ImVec2(pos.x + circleEnd - o3, bb.Min.y + r), r, bg_col); > } > > bool Spinner(const char* label, float radius, int thickness, const ImU32& color) { > ImGuiWindow* window = GetCurrentWindow(); > if (window->SkipItems) > return false; > > ImGuiContext& g = *GImGui; > const ImGuiStyle& style = g.Style; > const ImGuiID id = window->GetID(label); > > ImVec2 pos = window->DC.CursorPos; > ImVec2 size((radius )*2, (radius + style.FramePadding.y)*2); > > const ImRect bb(pos, ImVec2(pos.x + size.x, pos.y + size.y)); > ItemSize(bb, style.FramePadding.y); > if (!ItemAdd(bb, id)) > return false; > > // Render > window->DrawList->PathClear(); > > int num_segments = 30; > int start = abs(ImSin(g.Time*1.8f)*(num_segments-5)); > > const float a_min = IM_PI*2.0f * ((float)start) / (float)num_segments; > const float a_max = IM_PI*2.0f * ((float)num_segments-3) / (float)num_segments; > > const ImVec2 centre = ImVec2(pos.x+radius, pos.y+radius+style.FramePadding.y); > > for (int i = 0; i < num_segments; i++) { > const float a = a_min + ((float)i / (float)num_segments) * (a_max - a_min); > window->DrawList->PathLineTo(ImVec2(centre.x + ImCos(a+g.Time*8) * radius, > centre.y + ImSin(a+g.Time*8) * radius)); > } > > window->DrawList->PathStroke(color, false, thickness); > } > > } > ``` > > **Version/Branch of Dear ImGui: dear imgui, v1.62 WIP** > > **Standalone, minimal, complete and verifiable example:** > > ```c++ > ImGui::Begin("Progress Indicators"); > > const ImU32 col = ImGui::GetColorU32(ImGuiCol_ButtonHovered); > const ImU32 bg = ImGui::GetColorU32(ImGuiCol_Button); > > ImGui::Spinner("##spinner", 15, 6, col); > ImGui::BufferingBar("##buffer_bar", 0.7f, ImVec2(400, 6), bg, col); > > ImGui::End(); > ``` > > **edit (June 25th):** Updated code based on feedback provided ([#1901 (comment)](https://github.com/ocornut/imgui/issues/1901#issuecomment-399868577)) Nice work! Using this in my Game (Springtech-Studios/SisijaFight)

❤️ 2

xdCraze commented

2024-06-13 15:45:41 +00:00

(Migrated from github.com)

I know this is a little old but how do I make the spinner play for a certian time?

obsqrbtz commented

2024-06-14 11:37:45 +00:00

(Migrated from github.com)

I know this is a little old but how do I make the spinner play for a certian time?

You may store the start time at some variable and then display the spinner only if current time is less than start + {whatever interval you need}

> I know this is a little old but how do I make the spinner play for a certian time? You may store the start time at some variable and then display the spinner only if current time is less than start + {whatever interval you need}

xdCraze commented

2024-06-15 18:31:23 +00:00

(Migrated from github.com)

I know this is a little old but how do I make the spinner play for a certian time?

You may store the start time at some variable and then display the spinner only if current time is less than start + {whatever interval you need}

Can you make an example?

> > I know this is a little old but how do I make the spinner play for a certian time? > > You may store the start time at some variable and then display the spinner only if current time is less than start + {whatever interval you need} Can you make an example?

obsqrbtz commented

2024-06-17 12:34:42 +00:00

(Migrated from github.com)

I know this is a little old but how do I make the spinner play for a certian time?

You may store the start time at some variable and then display the spinner only if current time is less than start + {whatever interval you need}

Can you make an example?

Tried it out. Simply sleeping for n seconds seems easier.

static bool loading = false;

static void wait(unsigned int sec){
    loading = true;
    sleep(sec);
    loading = false;
}

static void some_window(){
    if (ImGui::Button("Show spinner")){
        std::thread counter(wait, 10);
        counter.detach();	
    }
    if (loading){
        ImGui::Text("Loading %c", "|/-\\"[(int)(ImGui::GetTime() / 0.05f) & 3]);
    }
}

int main(int argc, char *argv[]){
 ...
    some_window();
 ...
}

> > > I know this is a little old but how do I make the spinner play for a certian time? > > > > > > You may store the start time at some variable and then display the spinner only if current time is less than start + {whatever interval you need} > > Can you make an example? Tried it out. Simply sleeping for n seconds seems easier. ```c++ static bool loading = false; static void wait(unsigned int sec){ loading = true; sleep(sec); loading = false; } static void some_window(){ if (ImGui::Button("Show spinner")){ std::thread counter(wait, 10); counter.detach(); } if (loading){ ImGui::Text("Loading %c", "|/-\\"[(int)(ImGui::GetTime() / 0.05f) & 3]); } } int main(int argc, char *argv[]){ ... some_window(); ... } ```

👎 1

sirnacnud commented

2026-02-21 16:12:14 +00:00

(Migrated from github.com)

FYI, the Spinner and BufferingBar functions have a return type specified as bool, but don't actually return at the end of the functions. This will cause a runtime crash if you just copy the code as is.

FYI, the `Spinner` and `BufferingBar` functions have a return type specified as `bool`, but don't actually return at the end of the functions. This will cause a runtime crash if you just copy the code as is.

Rows
Columns

Progress Indicators (spinner + loading bar) #1901