How to make QProgress shown in the same line?

[flight9]

QProgress seems, by default, is a block element as demos in doc:
https://quasar-framework.org/components/progress-bar.html

I would like to create a status bar with it, how can I make it shown as a inline element to sit aside my other icons?

[metalsadman]

add loading to your q element :loading="true". i dunno how you would want a line progress bar beside an icon since i con is small. adding a :loading prop on let say a button with icon will give it a loading animation until :loading prop becomes false. better give an example maybe on how it should look like.

[flight9]

@metalsadman the status bar may look like below:

[metalsadman]

@flight9 something like this? https://codesandbox.io/s/pk54042697

[Hawkeye64]

[Vue warn]: Method "counter" has already been defined as a data property. is because there is a property counter and a function counter causing a collision.

[metalsadman]

@Hawkeye64 @flight9 fixed now, with simulated progress.

[Hawkeye64]

@metalsadman That looks really good!

[flight9]

@metalsadman awesome!

      <div class="col-9">
        <q-progress
            :percentage="progress"
            height="25px">            
        </q-progress>      
      </div> 

these code can make qprogress shown inline, very helpful, thanks!