How to change spinner circular width and indication color

Description

How to change spinner circular width and indication color

What MCU/Processor/Board and compiler are you using?

ARM

What LVGL version are you using?

7

What do you want to achieve?

What have you tried so far?

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

void spinner(void)
{
    /*Create a Preloader object*/
    lv_obj_t * preload = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload, 100, 100);
    lv_obj_align(preload, NULL, LV_ALIGN_CENTER, 0, 0);
}

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

To change the width I think you can just increase the object size.

To change the arc’s color set the line_color style property on LV_ARC_PART_INDIC.

1 Like

Not Worked. Please find my style and object code

//style_spinner
        static lv_style_t style_spinner;
        lv_style_init(&style_spinner);
        lv_style_set_line_color(&style_spinner,LV_SPINNER_PART_INDIC, LV_COLOR_BG);
//loader
        lv_obj_t *loader=lv_spinner_create(lv_scr_act(),NULL);
        lv_obj_set_size(loader,75,75);
        lv_obj_add_style(loader,LV_SPINNER_PART_BG,&style_spinner);
        lv_obj_align(loader,logo_title,LV_ALIGN_OUT_BOTTOM_MID,0,30);

i want decrease width of spinner. please find the attachment.download

1 Like

Change the line_width style property.

line_width decreased the gap but i want to decrease the width of indication also.
i tried lv_style_set_line_width(&style_spinner,LV_SPINNER_PART_INDIC, 2); but not worked.

The code you provided above is incorrect. You should be passing a state here (LV_STATE_DEFAULT), not a part.

1 Like

embeddedt,
Thanks for your replay. Here i want to change indicator width and indicator color for spinner.

It won’t work if you pass a part; that’s not what the API expects (source). The part should be provided in the lv_obj_add_style (which you are doing), and the state should be provided in the lv_style_set call.

Please find my style

        static lv_style_t style_spinner;
        lv_style_init(&style_spinner);
        lv_style_set_line_color(&style_spinner,LV_STATE_DEFAULT, LV_COLOR_WHITE);
        lv_style_set_line_width(&style_spinner,LV_SPINNER_PART_BG, 2);
//loader
        lv_obj_t *loader=lv_spinner_create(lv_scr_act(),NULL);
        lv_obj_set_size(loader,75,75);
        lv_obj_add_style(loader,LV_SPINNER_PART_BG,&style_spinner);
        lv_obj_align(loader,NULL,LV_ALIGN_CENTER,0,30);

the above code gives me below output. but spinner indicator color and indicator width not changed.

You haven’t corrected the call to lv_style_set_line_width; also you would want to change the line width on both LV_SPINNER_PART_BG and LV_SPINNER_PART_INDIC.

Thanks embeddedt. issue resolved

1 Like

Glad you were able to fix it!