0

I have an requirement where I need to increase the thickness of progress bar to 1rem. Salesforce has provided progress bar as below:

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

Whenever we use lightning progress bar we can define the size and salesforce provides below SLDS classes to manage the thickness:

  • .slds-progress-bar_x-small (.125rem)
  • .slds-progress-bar_small (.25rem)
  • .slds-progress-bar_medium (.5rem)
  • .slds-progress-bar_large (0.75rem)

I am struggling to understand how we can modify the thickness, for example in my case I want it to be 1rem. I have tried declaring the class and providing height in css but it always gets overwritten by above properties.

Is there any way we can modify the thickness? Or do we have to go with building progress bar from scratch using SLDS library.

2 Answers 2

2

The attribute size defines which of these classes the component will use, so the max height you can set is 0.75rem using size="large".

Due to Shadow Dom, the styles defined in your component don't leak into child component like lightning-progress-bar. That's why even if you define slds-progress-bar_large css class in your component providing a value for its height, it will not alter the standard component.

Shadow DOM is a standard that encapsulates the internal document object model (DOM) structure of a web component. Encapsulating the DOM gives developers the ability to share a component and protect the component from being manipulated by arbitrary HTML, CSS, and JavaScript.

You can modify some styles of a standard component if it provides styling hooks, but lightning-progress-bar does not. Indeed there is no mention of available styling hooks in its blueprint.

Therefore, to set an arbitrary height, you have to build your own progress bar starting from the blueprint. This way you can have your own css class with a custom height, i.e. progress-bar_x-large.

Something like:

HTML

<div class="slds-progress-bar progress-bar_x-large slds-progress-bar_circular" aria-valuemin={min} aria-valuemax={max} aria-valuenow={value} role="progressbar">
    <span class="slds-progress-bar__value" style={progressValue}>
        <span class="slds-assistive-text">Progress: {value}%</span>
    </span>
</div>

CSS

.progress-bar_x-large {
    height: 1rem;
}

JS

min = 0;
max = 100;
value = 50;

get progressValue() {
    return `width:${this.value}%`;
}
0

You can do that by loading css from static resource through loadStyle. This css will pierce Shadow DOM, but you need to use it carefully, as it will influence the other usages of the progress bar, so you need to adjust the css query to select only the correct one if you are planning to use more than one on the page.

Create a static resource which looks similar to this:

.slds-progress-bar {
    height: 100px;
}

In your LWC, import your css (assuming the name is testcss):

import testcss from '@salesforce/resourceUrl/testcss';

then in your LWC class:

connectedCallback() {
    loadStyle(this, testcss)
        .catch((error) => {/*handle errors*/})
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .