Customizing the Default Loader to a Spinner GIF in Mendix 10.X.X

0
Hello Mendix Community,   I am currently working with Mendix 10.4.1 and looking to enhance the user experience of my application. I would like to replace the default loading indicator with a custom spinner GIF. Has anyone in the community successfully implemented a custom loader?   If so, could you please share your insights or steps on how to achieve this? Any guidance or reference to relevant documentation would be greatly appreciated.   Thank you in advance for your help!
asked
2 answers
3

Its not as easy as just upload an image here and your done but it doable with CSS. You could figure out the used classes (for example mx-progress-indicator) for the loader by inspecting it in your browser and then overwriting the CSS where you remove the current one and add the gif as a background to the same element. 

 

If you want the loader to show up without making some microflow logic you can also just type mx.ui.showProgress() in the browser console. Makes inspecting abit easier.

 

You could try something like:

.mx-progress-indicator {

       background: url(progress.gif);

}

 

and then make sure you have a progress.gif in your theme folder. You will also have to update the existing css to remove some stuff like the white background and the ::before and ::after animations of the existing loader probably.

 

Hopefully this helps as a starting ground.

 

answered
2

Instead of using spinner gif, you can create a spinner only with CSS code and override the .mx-progress-indicator{} class with your CSS code. There is this website https://10015.io/tools/css-loader-generator where you can get CSS code for different types of loader/spinner which you can also customize and it also has Angular material UI progress spinner code.

I had to implement a similar use case where I needed to use 'Angular material UI progress spinner' in my mendix app. So I got the CSS code for the same and wrote the below style class in custom CSS file.

 

.mx-progress{
  height: 120px;
  width: 120px;
  padding: 30px;
  .mx-progress-indicator {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #ff8300;
    animation: spinner-bulqg1 1.1199999999999999s infinite linear alternate,
        spinner-oaa3wk 2.2399999999999998s infinite linear;
    background: rgb(255 255 255);
    &:before {
      animation: none;
    }

    &:after {
      animation: none;
    }
  }

  @keyframes spinner-bulqg1 {
   0% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
   }

   12.5% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
   }

   25% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
   }

   50% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
   }

   62.5% {
      clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
   }

   75% {
      clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
   }

   100% {
      clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
   }
  }

  @keyframes spinner-oaa3wk {
   0% {
      transform: scaleY(1) rotate(0deg);
   }

   49.99% {
      transform: scaleY(1) rotate(135deg);
   }

   50% {
      transform: scaleY(-1) rotate(0deg);
   }

   100% {
      transform: scaleY(-1) rotate(-135deg);
   }
  }
}

 

answered