Community
Select to view content in your preferred language

Styling Loader Text

834
1
09-15-2021 10:18 PM
SpaceyMcSpaceFace
by
New Contributor
‎09-15-2021 10:18 PM

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"));

 

0 Kudos
1 Reply
BenElan
by Esri Contributor
Esri Contributor
‎09-27-2021 11:16 AM

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

0 Kudos