How to create a indeterminate progress bar? #5370

New issue

Closed

opened 2022-06-03 11:19:32 +00:00 by Stehsaer · 4 comments

Stehsaer commented

2022-06-03 11:19:32 +00:00

(Migrated from github.com)

I want to create a indeterminate progress bar in IMGUI similar to the image below:

Is there any way to achieve that?

I want to create a indeterminate progress bar in IMGUI similar to the image below: ![progressbar-indeterminate](https://user-images.githubusercontent.com/54050160/171843826-044a9f23-6539-4f90-8053-fd34f0794402.gif) Is there any way to achieve that?

ocornut commented

2022-06-03 11:28:39 +00:00

(Migrated from github.com)

Have you tried to type “indeterminate progress bar” into the search bar? Because when I do I find #5316.

Without those details and labelling you can implement one using the same primitive used by that function.

Have you tried to type “indeterminate progress bar” into the search bar? Because when I do I find #5316. Without those details and labelling you can implement one using the same primitive used by that function.

Stehsaer commented

2022-06-03 11:59:28 +00:00

(Migrated from github.com)

Thanks for your advice. However, instead of implementing one by the user, I'd like to suggest turning the indeterminate progress bar into an OFFICIAL feature. It would make things easier without taking too much time modifying the code.

ocornut commented

2022-06-03 12:34:03 +00:00

(Migrated from github.com)

You can and should create widgets without modifying dear imgui code.

#include "imgui_internal.h"

void IndeterminateProgressBar(const ImVec2& size_arg)
{
    using namespace ImGui;

    ImGuiContext& g = *GImGui;
    ImGuiWindow* window = GetCurrentWindow();
    if (window->SkipItems)
        return;

    ImGuiStyle& style = g.Style;
    ImVec2 size = CalcItemSize(size_arg, CalcItemWidth(), g.FontSize + style.FramePadding.y * 2.0f);
    ImVec2 pos = window->DC.CursorPos;
    ImRect bb(pos.x, pos.y, pos.x + size.x, pos.y + size.y);
    ItemSize(size);
    if (!ItemAdd(bb, 0))
        return;

    const float speed = g.FontSize * 0.05f;
    const float phase = ImFmod((float)g.Time * speed, 1.0f);
    const float width_normalized = 0.2f;
    float t0 = phase * (1.0f + width_normalized) - width_normalized;
    float t1 = t0 + width_normalized;

    RenderFrame(bb.Min, bb.Max, GetColorU32(ImGuiCol_FrameBg), true, style.FrameRounding);
    bb.Expand(ImVec2(-style.FrameBorderSize, -style.FrameBorderSize));
    RenderRectFilledRangeH(window->DrawList, bb, GetColorU32(ImGuiCol_PlotHistogram), t0, t1, style.FrameRounding);
}

We'll very probably merge something based #5316 it is a matter of deciding how to design the style and API (in term of relationship between speed, size and thickness) but the point and power of dear imgui is we should empower users to do those things themselves. You can and should create widgets without modifying dear imgui code. ```cpp #include "imgui_internal.h" void IndeterminateProgressBar(const ImVec2& size_arg) { using namespace ImGui; ImGuiContext& g = *GImGui; ImGuiWindow* window = GetCurrentWindow(); if (window->SkipItems) return; ImGuiStyle& style = g.Style; ImVec2 size = CalcItemSize(size_arg, CalcItemWidth(), g.FontSize + style.FramePadding.y * 2.0f); ImVec2 pos = window->DC.CursorPos; ImRect bb(pos.x, pos.y, pos.x + size.x, pos.y + size.y); ItemSize(size); if (!ItemAdd(bb, 0)) return; const float speed = g.FontSize * 0.05f; const float phase = ImFmod((float)g.Time * speed, 1.0f); const float width_normalized = 0.2f; float t0 = phase * (1.0f + width_normalized) - width_normalized; float t1 = t0 + width_normalized; RenderFrame(bb.Min, bb.Max, GetColorU32(ImGuiCol_FrameBg), true, style.FrameRounding); bb.Expand(ImVec2(-style.FrameBorderSize, -style.FrameBorderSize)); RenderRectFilledRangeH(window->DrawList, bb, GetColorU32(ImGuiCol_PlotHistogram), t0, t1, style.FrameRounding); } ``` ![indeterminate_progress_bar](https://user-images.githubusercontent.com/8225057/171854438-0935f893-3fcb-49e8-afc1-a0b667762c1c.gif)

👍 7 ❤️ 2

ocornut commented

2022-06-08 15:30:53 +00:00

(Migrated from github.com)

Closing as answered + linking to #5316 for future updates.