In the web application, the loading overlay effect is very useful when part of the page content is loaded dynamically from the backend. Generally, a loading GIF image with an overlay background is displayed over the HTML element while fetching content from the backend. Assume that a data list is displayed on the web page with pagination links. When the pagination links are clicked, another list of data is displayed. To fetch data from the backend script, the server takes some time, and the user does not understand what is happening behind the scenes. So, if you display a loading image over the content list, it will be helpful for the user to understand the data loading process.<\/p>\n
In this tutorial, we’ll provide a short code snippet to create an overlay element and display a preloader loading GIF over the content div using CSS. Not only for the list content, but you can also use it for every case where you want to add an overlay effect on the content and display loading animation.<\/p>\n
HTML Code:<\/b> CSS Code:<\/b> In the web application, the loading overlay effect is very useful when part of the page content is loaded dynamically from the backend. Generally, a loading GIF image with an overlay background is displayed over <\/p>\n","protected":false},"author":1,"featured_media":5421,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[130],"tags":[124,179,199,197,198],"class_list":["post-1620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css","tag-html","tag-loader","tag-overlay","tag-preloader","cat-130-id","has_thumb"],"yoast_head":"\n
\nCreate an HTML element to contain the overlay wrapper with a loading image.<\/p>\n\n
.overlay<\/code> element.<\/li>\n<\/ul>\n<div<\/span> class<\/span>=\"content\"<\/span>><\/span>\r\n <!-- Loader element --><\/span>\r\n <div<\/span> class<\/span>=\"overlay\"<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"overlay-content\"<\/span>><\/span><img<\/span> src<\/span>=\"images\/loader.gif\"<\/span> alt<\/span>=\"Loading...\"<\/span>\/><\/span><\/div<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n \r\n <!-- Page content goes here --><\/span>\r\n<\/div<\/span>><\/span><\/pre>\n
\nDefine CSS code to apply styles to the overlay background and loading image over HTML element.<\/p>\n.content<\/span>{\r\n position<\/span>: relative;\r\n}\r\n.overlay<\/span>{\r\n position<\/span>: absolute;\r\n left<\/span>: 0<\/span>; \r\n top<\/span>: 0<\/span>; \r\n right<\/span>: 0<\/span>; \r\n bottom<\/span>: 0<\/span>;\r\n z-index<\/span>: 2<\/span>;\r\n background-color<\/span>: rgba<\/span>(255,255,255,0.8);\r\n}\r\n.overlay-content<\/span> {\r\n position<\/span>: absolute;\r\n transform<\/span>: translateY<\/span>(-50%);\r\n -webkit-transform<\/span>: translateY<\/span>(-50%);\r\n -ms-transform<\/span>: translateY<\/span>(-50%);\r\n top<\/span>: 50%<\/span>;\r\n left<\/span>: 0<\/span>;\r\n right<\/span>: 0<\/span>;\r\n text-align<\/span>: center;\r\n color<\/span>: #555<\/span>;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"