Topic
  • 2 replies
  • Latest Post - ‏2013-11-19T08:29:36Z by FadyRamzy
FadyRamzy
FadyRamzy
29 Posts

Pinned topic How to create a loading image in RUI?

‏2013-11-08T20:21:01Z |

Dear All,

In my application i want to display an Ajax loader image (like the one in attachment) when actions being done like uploading files or querying a database

i want to display the loader on top of the page and prevent the user from making any actions, and the loader to close when the action is complete

 

 

Attachments

Updated on 2013-11-19T10:08:26Z at 2013-11-19T10:08:26Z by FadyRamzy
  • Smyle Z. Huang
    Smyle Z. Huang
    13 Posts
    ACCEPTED ANSWER

    Re: How to create a loading image in RUI?

    ‏2013-11-12T06:57:10Z  

    Hi, 

    Generally it can be simulated by a DIV overlay with a fixed position style.

    Here is a simple implementation in EGL:

    _over Div{ children=[], style="display:none;", zIndex="2147483647",  position="fixed",  x="0", y="0", background="RGBA(32,32,32,0.2)" };

    Here I assign a max zIndex to the overlay, with a 0.2 alpha transparency. Each time this _over div is shown, it will prevent user from interacting with bottom layer.

    Now you can simply add the ajax-loader.gif as a child of the overlay by:

    _over Div{ children=[Image], style="display:none;", zIndex="2147483647",  
    position="fixed",  x="0", y="0", background="RGBA(32,32,32,0.2)" };
    Image Image{ src="download.gif", position="fixed" };

    Each time the overlay is shown, it will also show the loading gif. Of course, the loading gif will show in the upper left by default. To make it a little beautiful, we can simply center it in the screen by the EGL codes below:

    Image.x = (_over.pixelWidth - Image.pixelWidth)/2;
    Image.y = (_over.pixelHeight - Image.pixelHeight)/2;

    Below is a simple sample for your reference.

    Regards,
    Smyle

    ------------------

    handler overlaySample type RUIhandler {initialUI = [ Button, _over ],onConstructionFunction = start, cssFile="css/RUI.css",  title="over"}
    Button Button{ text="Show loading", onClick::=showOverlay };
    Button1 Button{ text="Hide loading", onClick::=hideOverlay };
     
    _over Div{ children=[Button1, Image], style="display:none;", zIndex="2147483647",  
    position="fixed",  x="0", y="0", background="RGBA(32,32,32,0.2)" };
     
    Image Image{ src="download.gif", position="fixed" };
     
    function start()
    end
     
    function showOverlay( event Event in )
    _over.style="display:block;right:0;bottom:0;";
    Image.x = (_over.pixelWidth - Image.pixelWidth)/2;
    Image.y = (_over.pixelHeight - Image.pixelHeight)/2;
    end
     
    function hideOverlay( event Event in  )
    _over.style="display:none";
    end
    end

     

  • Smyle Z. Huang
    Smyle Z. Huang
    13 Posts

    Re: How to create a loading image in RUI?

    ‏2013-11-12T06:57:10Z  

    Hi, 

    Generally it can be simulated by a DIV overlay with a fixed position style.

    Here is a simple implementation in EGL:

    _over Div{ children=[], style="display:none;", zIndex="2147483647",  position="fixed",  x="0", y="0", background="RGBA(32,32,32,0.2)" };

    Here I assign a max zIndex to the overlay, with a 0.2 alpha transparency. Each time this _over div is shown, it will prevent user from interacting with bottom layer.

    Now you can simply add the ajax-loader.gif as a child of the overlay by:

    _over Div{ children=[Image], style="display:none;", zIndex="2147483647",  
    position="fixed",  x="0", y="0", background="RGBA(32,32,32,0.2)" };
    Image Image{ src="download.gif", position="fixed" };

    Each time the overlay is shown, it will also show the loading gif. Of course, the loading gif will show in the upper left by default. To make it a little beautiful, we can simply center it in the screen by the EGL codes below:

    Image.x = (_over.pixelWidth - Image.pixelWidth)/2;
    Image.y = (_over.pixelHeight - Image.pixelHeight)/2;

    Below is a simple sample for your reference.

    Regards,
    Smyle

    ------------------

    handler overlaySample type RUIhandler {initialUI = [ Button, _over ],onConstructionFunction = start, cssFile="css/RUI.css",  title="over"}
    Button Button{ text="Show loading", onClick::=showOverlay };
    Button1 Button{ text="Hide loading", onClick::=hideOverlay };
     
    _over Div{ children=[Button1, Image], style="display:none;", zIndex="2147483647",  
    position="fixed",  x="0", y="0", background="RGBA(32,32,32,0.2)" };
     
    Image Image{ src="download.gif", position="fixed" };
     
    function start()
    end
     
    function showOverlay( event Event in )
    _over.style="display:block;right:0;bottom:0;";
    Image.x = (_over.pixelWidth - Image.pixelWidth)/2;
    Image.y = (_over.pixelHeight - Image.pixelHeight)/2;
    end
     
    function hideOverlay( event Event in  )
    _over.style="display:none";
    end
    end

     

  • FadyRamzy
    FadyRamzy
    29 Posts

    Re: How to create a loading image in RUI?

    ‏2013-11-19T08:29:36Z  

    Hi, 

    Generally it can be simulated by a DIV overlay with a fixed position style.

    Here is a simple implementation in EGL:

    _over Div{ children=[], style="display:none;", zIndex="2147483647",  position="fixed",  x="0", y="0", background="RGBA(32,32,32,0.2)" };

    Here I assign a max zIndex to the overlay, with a 0.2 alpha transparency. Each time this _over div is shown, it will prevent user from interacting with bottom layer.

    Now you can simply add the ajax-loader.gif as a child of the overlay by:

    _over Div{ children=[Image], style="display:none;", zIndex="2147483647",  
    position="fixed",  x="0", y="0", background="RGBA(32,32,32,0.2)" };
    Image Image{ src="download.gif", position="fixed" };

    Each time the overlay is shown, it will also show the loading gif. Of course, the loading gif will show in the upper left by default. To make it a little beautiful, we can simply center it in the screen by the EGL codes below:

    Image.x = (_over.pixelWidth - Image.pixelWidth)/2;
    Image.y = (_over.pixelHeight - Image.pixelHeight)/2;

    Below is a simple sample for your reference.

    Regards,
    Smyle

    ------------------

    handler overlaySample type RUIhandler {initialUI = [ Button, _over ],onConstructionFunction = start, cssFile="css/RUI.css",  title="over"}
    Button Button{ text="Show loading", onClick::=showOverlay };
    Button1 Button{ text="Hide loading", onClick::=hideOverlay };
     
    _over Div{ children=[Button1, Image], style="display:none;", zIndex="2147483647",  
    position="fixed",  x="0", y="0", background="RGBA(32,32,32,0.2)" };
     
    Image Image{ src="download.gif", position="fixed" };
     
    function start()
    end
     
    function showOverlay( event Event in )
    _over.style="display:block;right:0;bottom:0;";
    Image.x = (_over.pixelWidth - Image.pixelWidth)/2;
    Image.y = (_over.pixelHeight - Image.pixelHeight)/2;
    end
     
    function hideOverlay( event Event in  )
    _over.style="display:none";
    end
    end

     

    Thank you very much :)