How to Create a CSS3 Ajax loading icon without an image

Every time your web application interacts with the server, there is an inevitable delay. This may be an Ajax request, uploading a file, or using the new HTML5 web sockets api (for example, sending events on a server. Ideally, you should give the user some feedback to indicate that their actions are handled. You will often see small GIF animations and rotation modes. Images are the best choice across browsers, but they have many problems: gif does not support alpha transparency. You need to exercise caution when placing the image on a color background. Bitmap images will not be of good size. If you change the dimension, you need to create a new image. If you are not careful, an animated image can have a large file size. Images incur additional HTTP requests. Although the image will be cached, the initial download time may exceed the background process it represents! You can use preload code to address this issue by using images or URLs that use embedded data, but it works harder. Fortunately, CSS3 allows us to create loading icons without images. They are easy to create, scale, and then ensure the color, use for any background and do not produce image downloads. You need: an HTML element, for example. <Div id = "ajaxloader"> </div>. Some CSS backgrounds, borders, and shadow effects create a graphic icon. CSS3 conversion and animation rotation or movement of elements. CSS3 conversion and animation are experimental properties that require vendor prefixes-and you know they cause trouble. The sample code implements the final property as well as prefixes for webkit (Chrome and Safari),-moz (Firefox),-MS (IE), and-o (Opera ), but no one can guarantee that they will always work. When writing this article, the latest versions of Chrome, Safari, and Firefox provide CSS3 animations. IE9/8/7/6 shows a static image, although IE10 and oper12 may support attributes. What makes things more complicated is that Firefox allows you to activate the pseudo elements separately. Therefore, you can add two elements to use: Before and After and rotate or move them in different directions to create more complex animations. Although I initially wanted to do this, it does not work in the webkit browser. Chrome and Safari only allow true element animation. This seems to be a bug or supervision, but it is not fixed in the current or beta version. Create Icons our HTML div can be placed anywhere in the document, although it is best to use it as the final child body. Then, it will appear higher than other elements, which can be located in the relationship page. The icon CSS simply sets the wide white circle boundary. The correct border color is then set to transparent and a small shadow is applied: # ajaxloader {position: absolute; width: 30px; height: 30px; border: 8px solid # fff; border-right-color: transparent; border-radius: 50%; box-shadow: 0 0 25px 2px # eee;} result: CSS Ajax icon 1 can easily adjust different effects of attributes, such as adding border-right: 0 none; producing: CSS Ajax Icon 2 animated icons make the icons spin and pulse, we apply changes in rotation conversion and transparency in a CSS3 animation. The animation name, duration, loose type, and repeated values are applied to the element: # ajaxloader {animation: spin 1 s linear infinite;} followed by the animation frame: @ keyframes spin {from {transform: rotate (0deg); opacity: 0.2;} 50% {transform: rotate (180deg); opacity: 1.0;} to {transform: rotate (360deg); opacity: 0.2 ;}} all browsers support no prefix for animations, so you can see webkit,-moz, -ms and-o substitutes are in the source code when you view the demo page. the displayed Icons can now be started using JavaScript whenever an Ajax request is made. This is a good result. You can easily customize the current browser of file 55%. Unfortunately, 45% of network users will not see the animation. This number will decrease when IE10 is released and the user switches to the latest version of another browser, but it is still a large percentage. You can return to an image, but if you do, you may wish to use the image to suit all browsers. Therefore, I suggest you look at your own statistics. If your visitor is mainly using Chrome, Safari, and Firefox, you can use today's technology. If not, stick to the image and wait a moment for more consistent browser support.