Customize spinner background color and font size of label

[Hartmut]

Hi,

I have a spinner in my Navigation sidebar that in general works as it should do. The code is as follows:

<div id="wrapper">

    <div class="sidebar-item" id="toggled" @onclick="@OnButtonClick">

        <span class="e-icons expand"></span>

        <span class="e-text" title="menu">Menu</span>

    </div>

    <div class="myForm">

        <div class="sel">

            <h4> Restrict search to Project or Study</h4>

            <SfDropDownList TValue="string" TItem="SelectorModel" PopupWidth="100%" PopupHeight="350px" Placeholder="Restict to" DataSource="@SelectorList">

                <DropDownListEvents TItem="SelectorModel" TValue="string" OnValueSelect="@OnSelectorSelectHandler"></DropDownListEvents>

                <DropDownListFieldSettings Value="Id" Text="Table"></DropDownListFieldSettings>

            </SfDropDownList>

        </div>

        <div class="cat">

            <h4> Select a Name</h4>

            <SfDropDownList TValue="string" TItem="SelectedSelectorModel" PopupWidth="100%" PopupHeight="350px" Placeholder="Select name"

                            DataSource="@SelectedSelectorList" @bind-value="_selectedCatName" Enabled="@_nameEnabled">

                <DropDownListEvents TItem="SelectedSelectorModel" TValue="string" OnValueSelect="@OnNameSelectHandler"></DropDownListEvents>

                <DropDownListFieldSettings Value="Id" Text="Name"></DropDownListFieldSettings>

            </SfDropDownList>

        </div>

        <div class="cat">

            <h4> Select a Category to search</h4>

            <SfDropDownList TValue="string" TItem="CategoryModel" PopupWidth="100%" PopupHeight="350px" Placeholder="Select a category" DataSource="@CategoriesList"

                            Enabled="@_catEnabled">

                <DropDownListEvents TItem="CategoryModel" TValue="string" OnValueSelect="@OnCategorySelecthandler"></DropDownListEvents>

                <DropDownListFieldSettings Value="Id" Text="Text"></DropDownListFieldSettings>

            </SfDropDownList>

        </div>

    </div>

    <br /> <br /> <br />

    <div id="spinner01">

        <SfSpinner @bind-Visible="@Spinner01Visibility" Size="75" Label="Loading......" CssClass="e-custom-color"></SfSpinner>

    </div>

    <br /> <br /><br />

    <div class="but">

        <SfButton CssClass="e-custom" Disabled="@_button1Disabled" @onclick="OnButtonClickHandler">Search.....</SfButton>

        <SfButton CssClass="e-custom">BLOCKBUTTON</SfButton>

    </div>

</div>

with

<style>

    #spinner01 {

        left: 50%;

        position: absolute;

        text-align: center;

        text: 24px;

        }

    .e-spinner-pane.e-custom-color e.spinner-inner .e-spin-bootstrap5 {

        stroke: green;

        }

Question1: the green stroke is not applied, can you tell me why?

Q2: how can I apply a background color?

Q3: how can I change the size and the color of the font of the spinner label?

Q4: when I change the CssClass to e-spin-overlay, nothing seem to change, the darker background of your examples is not applied.

Thanks for your help

Hartmut

[Kokila Poovendran]

Hi Hartmut,

We have reviewed your code and found solutions to each of your questions:

Question 1: "The green stroke is not applied, can you tell me why?"

To apply the green stroke, ensure that the custom class is defined before adding the spinner class. You can achieve this by using the following CSS:

    .e-custom-color.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 {

        stroke: green;

   

    }

Question 2:  How can I apply a background color?

To set the background color of the spinner, you can use the following CSS:

    .e-custom-color.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 {

        stroke: green;

        background: beige;

    }

Question 3:  How can I change the size and the color of the font of the spinner label?

To change the font size and color of the spinner label, you can use the following style:

    .e-custom-color.e-spinner-pane .e-spinner-inner .e-spin-label {

        font-size : 16px;

        color: red;

 

    }

 

Question 4:  When I change the CssClass to e-spin-overlay, nothing seem to change, the darker background of your examples is not applied.

To address this issue, you can set the height of the target element containing the spinner.

<div id="spin-target" style="height: 600px;">

    <SfSpinner @bind-Visible="@Spinner01Visibility" Size="75" Label="Loading......" CssClass="e-custom-color"></SfSpinner>

</div>

 

We hope these solutions help you achieve the desired customizations for your spinner. If you have any further questions or concerns, please let us know.

Regards,
Kokila Poovendran.

[Hartmut]

High Kokila,

most things worked very well, only one thing is not what I expected. Maybe my question was not precise. The background color of your solution only affects the space inside the rotating spinner, but I wanted to apply a color to the outer surrounding of the spinner. How can I do this?

Hartmut