Custom Loading Bar

0
Hello, does anybody know, how to add a custom HTML element into the loading progress bar? I would like to change the line to something else.
asked
2 answers
1

Hi Jakub,

     I have implemented custom loader in my application by adding below:

 

.mx-progress {

    width: 200px !important;

    height: 200px;

    background: transparent !important;

    position: absolute !important;

    top: 50% !important;

    left: 20% !important;

    transform: translate(-50%, -50%) !important;

}

 

.mx-progress-indicator {

    background: url("img/Configuration$Images$gear2.svg") no-repeat center center !important;

    background-size: contain !important;

    width: 100% !important;

    height: 60% !important;

    &:before,

    &::after {

      background: transparent !important;  

}

 

In this mx-progress and mx-progress-indicator are default classes, you achieve by applying contents in that classes

answered
0

To add a custom HTML element into the loading progress bar in Mendix, you would need to customize the loading indicator by altering its CSS or replacing the default loading animation with your own custom HTML element. Since Mendix uses a default loading spinner, it’s possible to modify its appearance or replace it with a completely different HTML element.

 

Create a class " custom-progress-bar" 

 

 

#custom-loading {  text-align: center;  font-size: 20px;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

.custom-progress-bar {  width: 100%;  height: 20px;  background-color: #e0e0e0;  border-radius: 10px;  overflow: hidden;  position: relative;}

.custom-progress-bar:before {  content: '';  display: block;  height: 100%;  width: 0%;  background-color: #4caf50;  animation: progress 3s infinite;}

@keyframes progress {  0% {    width: 0%;  }  50% {    width: 50%;  }  100% {    width: 100%;  }}

answered