Loading image spinner in web

Loading image spinner in web

  

Hi, i want to know if it is possible to display a spinner icon in web like 

the one that exist in mobile using the spinner icon and the style class "icon fa-spin".

UPDATE: I already create a spinner, but i need to display it while a webservice is working, when I click a button I'm consuming this webservice but sometimes there is a lot of data and it takes like 3 seconds to get a response and there is where I need to display the spinner.

Thanks in advance.

Regards.

Hi Reynaldo


AFAIK there is no built-in spin class on web.You can either find an animated GIF of a spinning icon and import it into your module, then set it up as an image, or create your own spin CSS class. An example (taken directly from W3Schools) would be:

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;

    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}


Hope this helps!

   CLSJ

Hi,

Yes, you can do it as like what you do now, 

1) verify if you have this tag exists "<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">" normally it will add to page when icon widget added, but confirm it.

2) Object class name with "fas fa-spinner fa-spin", will be spinner.


Thanks,

Balu

Carlos López Santibáñez Jácome wrote:

Hi Reynaldo


AFAIK there is no built-in spin class on web.You can either find an animated GIF of a spinning icon and import it into your module, then set it up as an image, or create your own spin CSS class. An example (taken directly from W3Schools) would be:

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;

    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}


Hope this helps!

   CLSJ

Thanks for your answer,  I already create a spinner, but i need to display it while a webservice is working, when I click a button I'm consuming this webservice but sometimes there is a lot of data and it takes like 3 seconds to get a response and there is where I need to display the spinner.

Regards

Reynaldo Merino wrote:

Carlos López Santibáñez Jácome wrote:

Hi Reynaldo

...

Thanks for your answer,  I already create a spinner, but i need to display it while a webservice is working, when I click a button I'm consuming this webservice but sometimes there is a lot of data and it takes like 3 seconds to get a response and there is where I need to display the spinner.

Regards

Oh in that case the spinner as in mobile wouldn't do any good either, as you can't do two ajax refreshes on the same element in the same screen action (well you can, but you'll only see the last one).


For that use case I'd suggest using either the silkUI "Feedback Ajax Wait" or the "Load on Visible" elements.

Hope this helps!

   CLSJ


Solution

Reynaldo Merino wrote:

Hi, i want to know if it is possible to display a spinner icon in web like 

the one that exist in mobile using the spinner icon and the style class "icon fa-spin".

UPDATE: I already create a spinner, but i need to display it while a webservice is working, when I click a button I'm consuming this webservice but sometimes there is a lot of data and it takes like 3 seconds to get a response and there is where I need to display the spinner.

Thanks in advance.

Regards.


Hi Reyn,

You can use this forge component for your use case it will block the whole UI until the action performed. 

https://www.outsystems.com/forge/component/1278/fullpagefeedbackajax/


Regards,

Pankaj

Solution

Pankaj pant wrote:

Reynaldo Merino wrote:

Hi, i want to know if it is possible to display a spinner icon in web like 

the one that exist in mobile using the spinner icon and the style class "icon fa-spin".

UPDATE: I already create a spinner, but i need to display it while a webservice is working, when I click a button I'm consuming this webservice but sometimes there is a lot of data and it takes like 3 seconds to get a response and there is where I need to display the spinner.

Thanks in advance.

Regards.


Hi Reyn,

You can use this forge component for your use case it will block the whole UI until the action performed. 

https://www.outsystems.com/forge/component/1278/fullpagefeedbackajax/


Regards,

Pankaj

Thanks for your answer again!!!


Regards


Carlos López Santibáñez Jácome wrote:

Reynaldo Merino wrote:

Carlos López Santibáñez Jácome wrote:

Hi Reynaldo

...

Thanks for your answer,  I already create a spinner, but i need to display it while a webservice is working, when I click a button I'm consuming this webservice but sometimes there is a lot of data and it takes like 3 seconds to get a response and there is where I need to display the spinner.

Regards

Oh in that case the spinner as in mobile wouldn't do any good either, as you can't do two ajax refreshes on the same element in the same screen action (well you can, but you'll only see the last one).


For that use case I'd suggest using either the silkUI "Feedback Ajax Wait" or the "Load on Visible" elements.

Hope this helps!

   CLSJ


Thanks for your answer but I can not find those widgets :(


Reynaldo Merino wrote:

Pankaj pant wrote:

Thanks for your answer again!!!


Regards



Your Welcome Reynalo.