Progress Indicator Doesn't Work

[Khadijahnclark]

Hello, I am trying to create a loading screen, however when testing the progress indicator element, I found that nothing shows up! I thought "Oh? Maybe it's transparent or something", so I went and try it put it in a window element but same issue. Thank you!

[stretch07]

share your code please, it works on the demo

[instilledbee]

I also have the same issue. I installed 98.css via npm, and I think the version there might be different from the one in this repo. The progress indicator component was added on 18 Sep 2023, while the latest published version in npm was on 13 Mar 2023 Is it possible to publish a new version on npm so we can use the latest features of this theme?

Meanwhile, I guess we can just download and reference the latest 98.css file from the releases in this repo.

[instilledbee]

Actually, it seems the latest tagged release on this repo is further behind. Latest one was tagged on 22 May 2022.

For those of us who need the latest features now, the best way to do so would be to build manually from source.

[Gatorzgaming]

Not sure if I am just failing at programing (The fact that this issue exist makes me think otherwise) but here if my code

<link
  rel="stylesheet"
  href="https://unpkg.com/98.css"
>
<div class="window" style="width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">A Window With Stuff In It</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <p>
      Follower Goal
      
    </p>
    <div class="progress-indicator">
      <span class="progress-indicator-bar"  style="width: 40%;" />
    </div>
  </div>
    
</div>

[Jet0751]

Doing a little inspect element, here's the .CSS that should have the latest changes.

https://jdan.github.io/98.css/98.css

edit:
I tested it, and this version of the .css has the progress bar whereas the one from the npm & jsdelivr doesn't have it.

<div class="progress-indicator segmented"> <span class="progress-indicator-bar" style="width: 40%;" /> </div>

edit 2:
You can also find it in their gh-pages branch
https://github.com/jdan/98.css/blob/gh-pages/98.css

[Gatorzgaming]

<link rel="stylesheet" href="https://jdan.github.io/98.css/98.css" />
<div class="window" style="width: 140px">
  <div class="title-bar">
    <div class="title-bar-text">Follower Goal</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <p>
      <b> 17/20</b>
    </p>

    <div class="progress-indicator">
      <span class="progress-indicator-bar" style="width: 85%" />
    </div>
  </div>
</div>

It works! Thank you!

[horizoncarlo]

Ran into this too - any chance the various CDNs will get updated? Seems like a mistake as both the latest CDN and the direct version are tagged as 0.1.20.

CDN example, as you can see no "progress" anything classes: https://cdn.jsdelivr.net/npm/98.css@0.1.20/dist/98.min.css
Git version: https://jdan.github.io/98.css/98.css

I'll probably just host locally for now