Custom 'Page loading....' after login

Contains tips for configurators working with Aware IM
Post Reply
Rennur
Posts: 1191
Joined: Thu Mar 01, 2012 5:13 am
Location: Sydney, Australia

Custom 'Page loading....' after login

Post by Rennur »

Create your own custom "loading application" message.
  • i) Here is the result with a animated leading bar:
    Image
    The default loading text is sandwiched between the logo & the the loading bar
  • ii) Another one with animated ajax loader
    Image
    I've used a solid white PNG file to hide the default loading text
The code for example (ii). Insert straight after the <body> tag in Startup.html.

Code: Select all

<div id="bas_startup_msg" style="text-align: center;">
<img style="-webkit-user-select: none; cursor: -webkit-zoom-in; margin-top:-100px;" src="images/AwaresoftLogo30.gif">
<div style="clear:both"></div>
<img style="-webkit-user-select: none; cursor: -webkit-zoom-in; margin-top:-73px" width="200" height="20"  src="images/Solid_white.png">
<div style="clear:both"></div>
<img style="-webkit-user-select: none; cursor: -webkit-zoom-in; margin-top:-60px;" src="images/ajax-loader_sml.gif">
<div style="clear:both"></div>
<p style="-webkit-user-select: none; cursor: -webkit-zoom-in; margin-top:-10px"> Loading Application </p>
</div> 
The loaders
Image
Image
Solid_white.png
Image

Cheers
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

THX

Post by hpl123 »

Great stuff Rennur. Thanks for sharing.
Henrik (V8 Developer Ed. - Windows)
Gabbitas
Posts: 334
Joined: Sun Jan 03, 2010 3:36 am

Post by Gabbitas »

Hi Rennur,

This is great stuff, thank you.

Is there any chance you could post the code you used for the first example? I have tried to re-create it but cant get the 'Please wait. Loading...' to sandwich between the logo and leader bar!

Thanks
Rennur
Posts: 1191
Joined: Thu Mar 01, 2012 5:13 am
Location: Sydney, Australia

Post by Rennur »

Just play with the margin settings.

Code: Select all

<div id="bas_startup_msg" style="text-align: center;">
<img style="-webkit-user-select: none; cursor: -webkit-zoom-in; margin-top:-120px;" src="images/AwaresoftLogo30.gif">
<div style="clear:both"></div>
<img style="-webkit-user-select: none; cursor: -webkit-zoom-in; margin-top:-45px;" src="images/ajax-loader.gif">
Gabbitas
Posts: 334
Joined: Sun Jan 03, 2010 3:36 am

Post by Gabbitas »

Hi Rennur,

I have tried to play with margins but it doesn't seem to work for me. Both the logo and the leader end up underneath the 'Please wait. Loading Page...'
I have gone to extremes margin-top: 300px and margin-top: -300px but they still seem to end up under the loading text.

I'm sure I'm doing something wrong but the html I'm inserting now looks exactly the same as yours apart from the logo but it still doesn't work. :?

Thanks
Rennur
Posts: 1191
Joined: Thu Mar 01, 2012 5:13 am
Location: Sydney, Australia

Post by Rennur »

Try now:

<div id="bas_startup_msg" style="text-align: center;">
<img style="-webkit-user-select: none; cursor: -webkit-zoom-in; vertical-align: middle; border: 0; margin-top:-120px;" src="images/AwaresoftLogo30.gif">
<div style="clear:both"></div>
<img style="-webkit-user-select: none; cursor: -webkit-zoom-in; vertical-align: middle; border: 0; margin-top:-45px;" src="images/ajax-loader.gif">
Gabbitas
Posts: 334
Joined: Sun Jan 03, 2010 3:36 am

Post by Gabbitas »

Success!

Thanks, Rennur that did the trick. Great tip and really appreciate your help.
BenHayat
Posts: 2749
Joined: Thu Dec 23, 2010 5:48 am
Location: Fla, USA
Contact:

Post by BenHayat »

This thread just solved another feature request.
Post Reply