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.

I have found simple way to create spinning icons in Outsystems web app.

=== 1. How to make the icon spin ===

1. Place an icon widget and select the icon.

The icon will be displayed, but it will not spin... If we could add style class to the icon, the whole trick would be just give it 'fa-spin' class, but the icon widget in web apps does not allow us to do that. Fortunately, we still can set CSS classes to enclosing containers! Here is a workaround:

2. Enclose the icon widget in Container. Give the container a style class, e.g. 'my-spin'

3. Go to the CSS theme editor and add the following:


.my-spin .fa
{
    animation:fa-spin 2s infinite linear;
}

--> The icon will spin!

How does it work?

The CSS rule content is the same as defined for .fa-spin class in fontawesome. It applies the animation which is defined in fontawesome stylesheet and has name "fa-spin". The selector we specify makes it apply to any .fa icon inside our .my-spin container. 

If you want the "pulse" spinning (8 discrete positions) use:


.my-spin .fa
{
    animation:fa-spin 1s infinite steps(8);
}


=== 2. How to make spinner be displayed while you are working on the server side ===

Suppose you have a time-consuming server-side action which you call from a screen action, triggered by button or link.

1. Make your spinner be displayed conditionally depending on a screen variable (e.g. using "If" widget).

2. Make your screen action be invoked using Ajax ("Ajax submit")

3. In the beginning of your screen action, set the screen variable to the value that will make the spinner to be displayed.

4. Use "Ajax refresh" operation to update your condition widget

5. Do time-consuming stuff

6. When done, change the variable value again so it corresponds to invisible state of the spinner

7.  Use "Ajax refresh" operation again to update your condition widget

The magic is in "Ajax refresh" operation, which refreshes the UI immediately, even from the middle of the screen action.