progressBar does not render on localhost

Question

I am using sfdx force:lightning:lwc:start to start a localhost where I test my LWCs. It has been working fine until recently, where I tried to render progressBar:

 <template>
    <lightning-progress-bar value=50 size="large"></lightning-progress-bar>
</template>

Nothing shows - but other components do. What is the reason for this, anyone has similar experience?

Answer 1

lightning-progress-bar wants to take up 100% of the parent's allocated space for it, but in the lightning web previewer, that space is calculated on the contents of the component. Net result: the component ends up being zero pixels wide, so you see nothing. You need to give the component a non-zero width somehow. Here's a simple example:

<template>
  <div style="min-width: 20vw">
    <lightning-progress-bar value="50" size="large"></lightning-progress-bar>
  </div>
</template>