Solved

How can I change the look and feel of the busy spinner?

  • 13 June 2019
  • 3 replies
  • 132 views

Userlevel 4
My WebUI app is looking mighty spiffy. However, whenever AIMMS takes an extra second or two, I see this blue busy spinner.

Alas, that is not in my color scheme.

How can I change either the color of the spinner or the .gif itself so that the spinner matches my look and feel?

Thanks!
icon

Best answer by Pratap Kumble 21 June 2019, 12:39

Hi @MathFour ,

Please try the following style:

/* to change the color of the busy text */
.theme-aimms .veil-msg .msg-body {
color: red;
}

/* to change the loader image */
.theme-aimms .veil-msg{
background: grey url("../images/dotloader.gif") no-repeat 25px;
height: 150px; /* if you want to change the height of the busy bar. */
}

/* to change the color of the cancel button on the right */
.theme-aimms .tag-veil .veil-msg.state-busy .ui-button{
background:green;
}


the image needs to be in the /resources/css/images folder.

The current loading image is a 50x50 px image.

Do let me know if this helped.

Thanks.
View original

3 replies

Userlevel 3
Hey MathFour,

The busy icon is an gif located in C:\Users\...\AppData\Local\AIMMS\IFA\Aimms\4.67.5.0-x64-VS2017\WebUIDev\www\resources\images depending on which AIMMS version you are using.

The default for the AIMMS version I'm currently using is busy_610467c49e28b4e0fc620c1e8336555b.gif which is blue. To change this, I suggest you to download something in your system's color scheme and change the referenced gif in the css class below.

.theme-aimms .veil-msg {
opacity: 1;
height: 50px;
background: #f5f6fa url(../../resources/images/throbber_5e55c38….gif) no-repeat 25px;
text-align: left;
padding-left: 74px;
color: #505767;
}
Userlevel 4
Thanks @gabiservidone, however it doesn't work. I even tried changing the name of my gif to the name of the blue one, but it still picks up a runtime gif somehow.

Other ideas?
Userlevel 4
Hi @MathFour ,

Please try the following style:

/* to change the color of the busy text */
.theme-aimms .veil-msg .msg-body {
color: red;
}

/* to change the loader image */
.theme-aimms .veil-msg{
background: grey url("../images/dotloader.gif") no-repeat 25px;
height: 150px; /* if you want to change the height of the busy bar. */
}

/* to change the color of the cancel button on the right */
.theme-aimms .tag-veil .veil-msg.state-busy .ui-button{
background:green;
}


the image needs to be in the /resources/css/images folder.

The current loading image is a 50x50 px image.

Do let me know if this helped.

Thanks.

Reply


Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator