Backdrop spinner

Alvaro_Sanchez · February 12, 2025, 12:56pm

Hello, I am using the marketplace backdrop spinner component. I want to change the color of the spinner itself, I have managed to change the background color to make it transparent but the blue color of the spinner, how would I do it?

Regards,
Alvaro

Bohdan_Vynarchuk · February 12, 2025, 2:12pm

Hi @Alvaro_Sanchez,

You can change the color of the loader using
@bl-customComponent-loader-color: {your color};
In the Theme → Editor tab
You can find more information in the component documentation:

github.com/Backendless/ui-builder-library

components/bl-backdrop/README.md

main

# Backdrop Spinner

Backdrop Spinner is the component of the Backendless [UI-Builder](https://backendless.com/developers/#ui-builder).

The component represents a background with a loader in the center of it. By default, the component's visibility is set to **false**, and you have to activate it when needed. The component is customizable, you can choose the background color and type of the loader.

<p align="center">
  <img src="./thumbnail.png" alt="main thumbnail" width="780"/>
</p>

## Demo

View an example of how to install this component and how it works in your UI [here](https://app.arcade.software/share/GkmFWWC2eBptyFzSc7f1).

## Properties

| Property           | Type                                                                                                          | Default value          | Logic                     | Data Binding | UI Setting | Description                              |
|--------------------|---------------------------------------------------------------------------------------------------------------|------------------------|---------------------------|--------------|------------|------------------------------------------|
| backdropVisibility | *Checkbox*                                                                                                    | `false`                | Backdrop Visibility Logic | YES          | YES        | controls the visibility of a component.  |
| loaderType         | *Select* <br/>[`bar`,`doted circle`,`doted horizon`,`doted line circle`,`doted square`,`line circle`,`radar`] | "bar"                  | Loader Type Logic         | NO           | YES        | controls the loader type of a component. |

This file has been truncated. show original

Regards,
Bohdan

Alvaro_Sanchez · February 12, 2025, 5:16pm

Hi @Bohdan_Vynarchuk ,

I have all the code written in CSS. Is there a way to write it in normal css? I have tried the following and it doesn’t work:

Regards,
Alvaro

Dima · February 13, 2025, 9:40am

Yes, you can find all the needed properties to override in this file

github.com/Backendless/ui-builder-library

components/bl-backdrop/styles/index.less

main

@bl-customComponent-backdrop-background: @disabledColor;
@bl-customComponent-loader-color: @themePrimary;
@bl-customComponent-loader-size: 120px;
@bl-customComponent-lineCircleLoader-lineWeight: 14px;
@bl-customComponent-lineCircleLoader-containerSize: @bl-customComponent-loader-size;
@bl-customComponent-lineCircleLoader-color: @bl-customComponent-loader-color;
@bl-customComponent-dotedCircleLoader-color: @bl-customComponent-loader-color;
@bl-customComponent-barLoader-color: @bl-customComponent-loader-color;
@bl-customComponent-dotedLineCircleLoader-color: @bl-customComponent-loader-color;
@bl-customComponent-radarLoader-color: @bl-customComponent-loader-color;
@bl-customComponent-dotedSquareLoader-color: @bl-customComponent-loader-color;
@bl-customComponent-dotedHorizonLoader-color: @bl-customComponent-loader-color;

.bl-customComponent-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

This file has been truncated. show original

But is there any reason to use only CSS? If so, you should extract all properties that used the variables we mentioned before.

Alvaro_Sanchez · February 13, 2025, 10:20am

Hi, This is the solution for my app:

Thank you for the info.

Regards,
Alvaro