# Segmented progress bars?

**URL:** <https://community.glideapps.com/t/segmented-progress-bars/75326>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [July 31, 2024, 9:58pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326 "2024-07-31T21:58:21Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 31, 2024, 9:58pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/1 "2024-07-31T21:58:21Z")

</div>

Hi, is it possible to make Glide’s progress bar into a segmented progress bar, with (preferably) a title for each segment? Something like this, only with titles above each segment.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/0/b0c74837066f036743ea430c206a711e1f28e7cc.png)

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [July 31, 2024, 11:24pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/2 "2024-07-31T23:24:36Z")

</div>

Have you tried Custom Component feature? Take a screenshot of this and paste the image link on Custom Component Generator using AI.

It might work maybe.

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 1, 2024, 12:39pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/3 "2024-08-01T12:39:11Z")

</div>

I tried but it didn’t work. I’m guessing CSS will be a more reliable solution. Let me try Chat GPT to see if it can churn out any custom CSS.

Update: No luck with ChatGPT either ☹

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 1, 2024, 2:26pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/4 "2024-08-01T14:26:42Z")

</div>

Tagging this as something I’ll look into through the weekend.

So you have an input as a number for the progress bar, but that progress bar should also have a set number of segments, and each segment should have a title?

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 1, 2024, 2:32pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/5 "2024-08-01T14:32:33Z")

</div>

> [@ThinhDinh](#):
>
> Tagging this as something I’ll look into through the weekend.

Wow, thank you so much 🙂

> [@ThinhDinh](#):
>
> So you have an input as a number for the progress bar, but that progress bar should also have a set number of segments, and each segment should have a title?

Yes exactly. I have tied up my percentage amount to a “status” field via a lookup, so as the status changes to the next one, the percentage increases by 20%.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 1, 2024, 2:35pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/6 "2024-08-01T14:35:16Z")

</div>

> **[Thinh Dinh on LinkedIn: Glide Community gave me an inspiration for my series,...](https://www.linkedin.com/posts/thinhcdinh_glide-community-gave-me-an-inspiration-for-activity-7223695509851398144-4mW5?utm_source=share&utm_medium=member_desktop)**
>
> Glide Community gave me an inspiration for my series, literally last weekend. So here we go:
> 
> Weekend Workshop #3 - SwiperJS Card Component
> 
> As a low-code…

I’ve been doing this thing for 3 weeks and been sourcing ideas from this community. Maybe I’ll try yours or another one this weekend, maybe both, and will let you know as soon as I get something done.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 2, 2024, 4:04pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/7 "2024-08-02T16:04:50Z")

</div>

It took a lot of thought and time for the first trial. 🤫

 ![Screenshot 2024-08-02 at 23.01.08](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/3/c3447c1a23c4c6cdbd3327d33d1a7dba004c7140.png)

---

<div class="post-metadata">

**Author:** ![FrancoisDigico](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francoisdigico/32/75651_2.png) [@FrancoisDigico](https://community.glideapps.com/u/FrancoisDigico)\
**Post date:** [August 3, 2024, 4:40am UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/8 "2024-08-03T04:40:48Z")

</div>

Well, it’s called CSS.

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 3, 2024, 8:01am UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/9 "2024-08-03T08:01:46Z")

</div>

This looks awesome! With the help from you and ThinhDinh, we might just be able to make something like this possible in Glide (minus the animation)

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3ccbd1bb26d73068288484b2ac602bcb0eec3ec3.gif)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 3, 2024, 8:18am UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/10 "2024-08-03T08:18:20Z")

</div>

I’m also exploring the capabilities of this new component. It looks quite impressive. There seems to be a simpler way to code it. It even gets complicated when you present it to AI; maybe we need to adapt to its language and understanding 😄.  
Here’s the code I tested; please adapt it to your needs. Give your data the name “myProgress” in the custom component panel.

```auto
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Segmented Progress Bar</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
        margin: 0;
      }

      h2 {
        font-size: 32px;
        color: #fff;
        text-align: left;
        width: 100%;
        max-width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
        box-sizing: border-box;
      }

      .progress-container {
        display: flex;
        gap: 10px;
        width: 100%;
        max-width: 100%;
      }

      .progress-segment {
        flex: 1;
        height: 20px;
        background-color: #ddd;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
      }

      .progress-fill {
        height: 100%;
        background-color: #6a5acd;
        border-radius: 15px;
        transition: width 0.5s;
      }
    </style>
  </head>
  <body>
    <h2>Segmented Progress Bar</h2>
    <div class="progress-container">
      <div class="progress-segment">
        <div class="progress-fill" id="fill-1"></div>
      </div>
      <div class="progress-segment">
        <div class="progress-fill" id="fill-2"></div>
      </div>
      <div class="progress-segment">
        <div class="progress-fill" id="fill-3"></div>
      </div>
      <div class="progress-segment">
        <div class="progress-fill" id="fill-4"></div>
      </div>
      <div class="progress-segment">
        <div class="progress-fill" id="fill-5"></div>
      </div>
    </div>

    <script>
      var myProgress = S.myProgress;
      var totalSegments = 5;
      var segmentWidth = 100 / totalSegments;
      var segments = Math.floor(myProgress / segmentWidth);
      var remainder =
        ((myProgress % segmentWidth) / segmentWidth) * 100;

      for (var i = 1; i <= totalSegments; i++) {
        var fillElement = document.getElementById(
          "fill-" + i
        );
        if (i < segments + 1) {
          fillElement.style.width = "100%";
        } else if (i === segments + 1) {
          fillElement.style.width = remainder + "%";
        } else {
          fillElement.style.width = "0%";
        }
      }
    </script>
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 3, 2024, 2:15pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/11 "2024-08-03T14:15:16Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/1/61db71928bdf901bf92f273bc455f4f6b9f71d02.png)

Loading 😄

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 4, 2024, 1:56pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/12 "2024-08-04T13:56:33Z")

</div>

> **[Segmented progress bars](https://docs.lowcode.agency/recordings/shrWzGKquTLnWSHf9W5N)**
>
> Summary:
> The video discusses segmented progress bars in an Instagram blog, showcasing how to customize progress bars with different steps and components.
> 
> Chapters:
> 00:00 Introduction to Segmented Progress Bars
> 01:01 Customizing Progress Bars
> 02:28...

Progress bar:

```auto
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Segmented Progress Bar</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>
  <body
    class="bg-gray-100 min-h-screen flex items-center justify-center"
  >
    <div
      x-data="progressBar()"
      x-init="init()"
      class="w-full max-w-3xl p-6 bg-white rounded-lg shadow-lg"
    >
      <div class="flex mb-4 space-x-1">
        <template
          x-for="(width, index) in segmentWidths"
          :key="index"
        >
          <div
            class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden"
          >
            <div
              class="h-full bg-blue-500 transition-all duration-300 ease-in-out"
              :style="{ width: width }"
            ></div>
          </div>
        </template>
      </div>
      <h2
        class="text-2xl font-bold text-center text-gray-800"
        x-text="getCurrentStepTitle()"
      ></h2>
      <p
        class="text-center text-gray-600"
        x-text="getCurrentStepDescription()"
      ></p>
      <p
        class="text-center text-gray-600 mt-2"
        x-text="`${progress}% completed`"
      ></p>
    </div>

    <script>
      function progressBar() {
        return {
          progress: 0,
          steps: {},
          segmentWidths: [],
          init() {
            this.progress = parseInt(S.progress);
            this.steps = JSON.parse(S.steps);
            this.calculateSegmentWidths();
          },
          calculateSegmentWidths() {
            const stepCount = Object.keys(
              this.steps
            ).length;
            const segmentSize = 100 / stepCount;
            this.segmentWidths = Array.from(
              { length: stepCount },
              (_, index) => {
                const segmentProgress = Math.min(
                  Math.max(
                    this.progress - index * segmentSize,
                    0
                  ),
                  segmentSize
                );
                return `${
                  (segmentProgress / segmentSize) * 100
                }%`;
              }
            );
          },
          getCurrentStepTitle() {
            const currentStepIndex = Math.floor(
              this.progress /
                (100 / Object.keys(this.steps).length)
            );
            const stepKeys = Object.keys(this.steps);
            return stepKeys[
              Math.min(
                currentStepIndex,
                stepKeys.length - 1
              )
            ];
          },
          getCurrentStepDescription() {
            const currentStepIndex = Math.floor(
              this.progress /
                (100 / Object.keys(this.steps).length)
            );
            const stepKeys = Object.keys(this.steps);
            return this.steps[
              stepKeys[
                Math.min(
                  currentStepIndex,
                  stepKeys.length - 1
                )
              ]
            ];
          },
        };
      }
    </script>
  </body>
</html>

```

Steps manager:

```auto
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Steps Manager</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>
  <body class="bg-gray-100 min-h-screen p-6">
    <div
      x-data="stepsManager()"
      x-init="initializeSteps()"
      class="container mx-auto bg-gray-100 rounded-lg shadow-lg p-6"
    >
      <h1
        class="text-3xl font-bold mb-6 text-center text-gray-800"
      >
        Steps Manager
      </h1>

      <div class="mb-6">
        <h2
          class="text-xl font-semibold mb-2 text-gray-700"
        >
          Add New Step
        </h2>
        <div class="flex space-x-2">
          <input
            type="text"
            x-model="newStepTitle"
            placeholder="Step Title"
            class="flex-1 p-2 border rounded"
          />
          <input
            type="text"
            x-model="newStepDescription"
            placeholder="Step Description"
            class="flex-1 p-2 border rounded"
          />
          <button
            @click="debounceAddStep()"
            class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300"
          >
            Add Step
          </button>
        </div>
      </div>

      <div>
        <h2
          class="text-xl font-semibold mb-2 text-gray-700"
        >
          Current Steps
        </h2>
        <template
          x-for="(step, index) in stepsArray"
          :key="index"
        >
          <div class="bg-white p-4 rounded-lg shadow mb-2">
            <div
              x-show="!step.editing"
              class="flex items-center"
            >
              <div class="flex-1">
                <h3
                  class="font-semibold text-lg text-gray-800"
                  x-text="step.title"
                ></h3>
                <p
                  class="text-gray-600"
                  x-text="step.description"
                ></p>
              </div>
              <div class="flex space-x-2">
                <button
                  @click="editStep(index)"
                  class="text-blue-500 hover:text-blue-700"
                >
                  ✏️
                </button>
                <button
                  @click="debounceMoveStep(index, 'up')"
                  :disabled="index === 0"
                  class="text-blue-500 hover:text-blue-700 disabled:text-gray-400"
                >
                  ↑
                </button>
                <button
                  @click="debounceMoveStep(index, 'down')"
                  :disabled="index === stepsArray.length - 1"
                  class="text-blue-500 hover:text-blue-700 disabled:text-gray-400"
                >
                  ↓
                </button>
                <button
                  @click="debounceRemoveStep(index)"
                  class="text-red-500 hover:text-red-700"
                >
                  ×
                </button>
              </div>
            </div>
            <div
              x-show="step.editing"
              class="flex items-center space-x-2"
            >
              <input
                type="text"
                x-model="step.editTitle"
                class="flex-1 p-2 border rounded"
              />
              <input
                type="text"
                x-model="step.editDescription"
                class="flex-1 p-2 border rounded"
              />
              <button
                @click="saveEdit(index)"
                class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-300"
              >
                Save
              </button>
              <button
                @click="cancelEdit(index)"
                class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-300"
              >
                Cancel
              </button>
            </div>
          </div>
        </template>
      </div>

      <div class="mt-6">
        <h2
          class="text-xl font-semibold mb-2 text-gray-700"
        >
          JSON Output
        </h2>
        <pre
          class="bg-gray-800 text-green-400 p-4 rounded overflow-x-auto"
          x-text="JSON.stringify(steps, null, 2)"
        ></pre>
      </div>
    </div>

    <script>
      function debounce(func, wait) {
        let timeout;
        return function (...args) {
          const context = this;
          clearTimeout(timeout);
          timeout = setTimeout(
            () => func.apply(context, args),
            wait
          );
        };
      }

      function stepsManager() {
        return {
          steps: {},
          stepsArray: [],
          newStepTitle: "",
          newStepDescription: "",
          initializeSteps() {
            if (S && S.steps) {
              try {
                this.steps = JSON.parse(S.steps);
                this.updateStepsArray();
              } catch (error) {
                console.error(
                  "Error parsing S.steps:",
                  error
                );
                this.steps = {};
                this.stepsArray = [];
              }
            }
          },
          updateStepsArray() {
            this.stepsArray = Object.entries(
              this.steps
            ).map(([title, description]) => ({
              title,
              description,
              editing: false,
              editTitle: title,
              editDescription: description,
            }));
          },
          updateSteps() {
            this.steps = Object.fromEntries(
              this.stepsArray.map((step) => [
                step.title,
                step.description,
              ])
            );
            S.steps = JSON.stringify(this.steps);
          },
          addStep() {
            if (
              this.newStepTitle &&
              this.newStepDescription
            ) {
              this.stepsArray.push({
                title: this.newStepTitle,
                description: this.newStepDescription,
                editing: false,
                editTitle: this.newStepTitle,
                editDescription: this.newStepDescription,
              });
              this.newStepTitle = "";
              this.newStepDescription = "";
              this.updateSteps();
            }
          },
          debounceAddStep: debounce(function () {
            this.addStep();
          }, 300),
          removeStep(index) {
            this.stepsArray.splice(index, 1);
            this.updateSteps();
          },
          debounceRemoveStep: debounce(function (index) {
            this.removeStep(index);
          }, 300),
          moveStep(index, direction) {
            if (
              (direction === "up" && index > 0) ||
              (direction === "down" &&
                index < this.stepsArray.length - 1)
            ) {
              const newIndex =
                direction === "up" ? index - 1 : index + 1;
              const temp = this.stepsArray[index];
              this.stepsArray[index] =
                this.stepsArray[newIndex];
              this.stepsArray[newIndex] = temp;
              this.updateSteps();
            }
          },
          debounceMoveStep: debounce(function (
            index,
            direction
          ) {
            this.moveStep(index, direction);
          },
          300),
          editStep(index) {
            this.stepsArray[index].editing = true;
          },
          saveEdit(index) {
            const step = this.stepsArray[index];
            step.title = step.editTitle;
            step.description = step.editDescription;
            step.editing = false;
            this.updateSteps();
          },
          cancelEdit(index) {
            const step = this.stepsArray[index];
            step.editTitle = step.title;
            step.editDescription = step.description;
            step.editing = false;
          },
        };
      }
    </script>
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 4, 2024, 3:38pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/13 "2024-08-04T15:38:28Z")

</div>

Ahhh, time to watch this!

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 8, 2024, 10:50pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/14 "2024-08-08T22:50:31Z")

</div>

Dayumm, this is something else!

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 8, 2024, 11:25pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/15 "2024-08-08T23:25:54Z")

</div>

@Himaladin am I doing this right?

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f3e61b20b67cd12c25e3b00e55cc8d32d5a29233.png)

This is what I’m getting at the moment:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/3/035a572dac5dcc459e46427c5ca73a20d239768b.png)

The code I’m using (removed the H2 title for now)

```auto
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <style>
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      .progress-container {
        display: flex;
        gap: 8px;
        width: 100%;
        max-width: 100%;
      }

      .progress-segment {
        flex: 1;
        height: 8px;
        background-color: #e9e5f3;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
      }

      .progress-fill {
        height: 100%;
        background-color: #613dc7;
        border-radius: 15px;
        transition: width 0.5s;
      }
    </style>
  </head>
  <body>
    <div class="progress-container">
      <div class="progress-segment">
        <div class="progress-fill" id="fill-1"></div>
      </div>
      <div class="progress-segment">
        <div class="progress-fill" id="fill-2"></div>
      </div>
      <div class="progress-segment">
        <div class="progress-fill" id="fill-3"></div>
      </div>
      <div class="progress-segment">
        <div class="progress-fill" id="fill-4"></div>
      </div>
      <div class="progress-segment">
        <div class="progress-fill" id="fill-5"></div>
      </div>
    </div>

    <script>
      var myProgress = S.myProgress;
      var totalSegments = 5;
      var segmentWidth = 100 / totalSegments;
      var segments = Math.floor(myProgress / segmentWidth);
      var remainder =
        ((myProgress % segmentWidth) / segmentWidth) * 100;

      for (var i = 1; i <= totalSegments; i++) {
        var fillElement = document.getElementById(
          "fill-" + i
        );
        if (i < segments + 1) {
          fillElement.style.width = "100%";
        } else if (i === segments + 1) {
          fillElement.style.width = remainder + "%";
        } else {
          fillElement.style.width = "0%";
        }
      }
    </script>
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 8, 2024, 11:36pm UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/16 "2024-08-08T23:36:04Z")

</div>

Seems like there’s a little issue with the Code component at the moment where the component does not tie correctly with defined variables.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 9, 2024, 1:26am UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/17 "2024-08-09T01:26:20Z")

</div>

Yes… 20% You can go directly to the column in the table without having to write it there. Now this component is having problems, is it working for you?

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [August 9, 2024, 2:03am UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/18 "2024-08-09T02:03:09Z")

</div>

No, at this moment it’s not working for me either. The component is being displayed but the bar isn’t being filled up.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [August 16, 2024, 2:03am UTC](https://community.glideapps.com/t/segmented-progress-bars/75326/19 "2024-08-16T02:03:17Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.