Styling Loader Text

SpaceyMcSpaceFace — Thu, 16 Sep 2021 05:18:46 GMT

Is there a way to style the loader "text"? Specifically increasing the font size?

I've tried adding "font-size" and "--calcite-loader-font-size" to the style attribute on calcite-loader element but it didn't do anything.

<calcite-loader class="loader" active scale="l" text="loading ..." label="loading" style=" --calcite-loader-font-size: 2em; font-size:2em; --calcite-ui-text-1: #fff; > </calcite-loader>

I've also tried to style the text via JavaScript. This works BUT you'll initially see the smaller font size before JavaScript is executed to increase the font-size, which doesn't look great. Thanks!

<li-code lang="c">document.querySelectorAll("calcite-loader").forEach(node => node.shadowRoot.querySelector(".loader__text").style.setProperty("font-size", "1.3em"));

Re: Styling Loader Text

BenElan — Mon, 27 Sep 2021 18:20:09 GMT

Hi @SpaceyMcSpaceFace.,

I apologize for the belated reply. The "--calcite-loader-font-size" css var effects the load percentage and can only be used when the type property is "determinate". In order to change the text property's size, you can use the "--calcite-font-size--2" css var. Here is the typography doc where it provides those css vars. I put together a sample demonstrating how to change both:

https://codepen.io/benesri/pen/BaZvybv

Let me know if you have any additional questions!

Ben

topic Re: Styling Loader Text in Calcite Design System Questions

Styling Loader Text

Re: Styling Loader Text