As a web developer, soon or later you will write some AJAX scripts on your web pages. One of interesting AJAX features is the animated loading image (see the image on the right) which is telling the visitors to be patient while the system is processing requests.
Of course, I am using a lot of loading images in my web codes too. But sometimes I just wanted to be different, I want my loading images to be branded with my own identity.
I can launch the Photoshop to do some image editing, but recently I figured out an easier way to accomplish the above. And I believe you can do the same as long as you would like to spend a few minutes reading this post.
First, you need to have a generic animated loading icon or image.
I used a web site called http://www.ajaxload.info/ which allows you to select different indicator types, and different fore and background color, then generate your own loading image on the fly.
After you generate this image based on your parameters, you can preview it first. And if you are satisfied, just click Download it to download as .gif file format.
Overall, the whole process is very user-friendly and easy.
Now, just go ahead to select your favorite type and create one.
Now, we are going to add some logo to it.
After you have a generic animated image, you can start to add more staffs on it to make sure it will be unique to the rest of world.
Again, I will not mention any image editing skills here. What I am going to do is creating some CSS style on top of this new image to make it different.
For example, I have adding the following tags to allow my own logo to appear under the animated loading images: (please be noted, I am using ASP.NET as an example)
<div id="loadingWrapper" style="border: 3px solid #435770; background-color: #ffffff; color: black; text-align: center; height: 180px; width: 200px; font-weight: bold;"><div id=”loadingImage” style=” background: White url(‘/images/logo_trans.gif’) no-repeat center; “>
<asp:image ID=”imgLoading” runat=”server” ImageUrl=”~/images/ajax-loader.gif” tooltip=”Loading” style=”vertical-align:middle;” />
</div><div id=”loadingText”>Please wait while we are loading your data …</div>
</div>
In this way, your loading indicator image will look different with your own logo as the background as the below.
Again, this is just a starter, you can add your own imagination to make it more creative but in an easier way.
Enjoy programming.
0 Responses to “How to add and customize AJAX loading image on web pages”