Page Title

How to Add Preloader in HTML Page

A preloader is one of the important elements of the user-friendly interface. It indicates that contents are still loading with an animated icon or text. In this tutorial, you will come to know how to create a preloader on the HTML page. Besides this, you can also download the complete source code of this preloader project.

Basically, it is a full-screen loading animation that covers the whole page until the page fully loaded. The overlay and loader icon build with CSS (no image) and jQuery used for preloader function.

Before getting started with coding, I would like you to suggest to browse the demo page check preloader working. Well! Let’s get started with HTML structure to build a loading screen.

How to Add Preloader in HTML Page?

In order to display a loading screen animation before completely load the page, you need to create two main HTML elements. The first div element is the overlay that covers the whole page (to hide the main content of the page). Similarly, the second div element is the preloader that contains the loader’s related content.

So, create a div element with a class name «overlay». Likewise, create a div element with a class name «preloader» and place a child div inside it, and define its class name «loader» . Inside the loader, build a span element with a class name «loader-inner» . In the end, create a p tag and place your text (like “Loading…” or “Please wait…” ) that you want to show on the loading screen.

You can also add any other element (like your site logo) inside the “preloader” tag that you want to display on the loading screen. Similarly, if you want to show only the animated loader icon, you can remove the p tag.

CSS Styles for Preloader

After creating HTML structure for the preloader, now it’s time to style it using CSS. For this purpose, target the «#overlay» element and make it a full-width element by defining the width and height property as 100%. Keep its position fixed to pull out from its parent element and set 0 value for the top, left, right, bottom to fit on the full screen. Likewise, define 2 value for the z-index and set a background color according to your needs.

Now, define the basic styles for the preloader loading text. We need to centralize this text container. To do so, specify its fixed dimension by defining 120px width and 90px height. Keep its position as absolute and align the text to the center. Similarly, specify the top and left value as 80% and 50% respectively. The other properties like color, font-size, etc. can be defined according to your requirements.

If you want to apply animation on your loading text, check these CSS text animations.

Animated Page Preloader Icon Styles

The «loader» class is the outer/container of the loader icon. Display it as an inline-block element, specify its width & height as 30px, and keep its absolute position. Set the 4px thick border and specify the top value as 50% in order to keep this element in the mid of the screen.

Here, the important property for this class is animation. Define an infinite animation «loader» with a 2s animation duration. If you want to customize this loading icon, you can set a custom color for the border. Furthermore, you can make it circular by defining border-radius property with the value «50%» .

Inner of the loader is a span element that we are going to make it as a filled object for the loader icon. So, display it as inline-block, define 100% width, and specify the “top” value for the vertical-align property. Likewise, define «loader-inner» animation with a 2s ease-in duration. You can specify any HTML color value for the background-color property that you want to show inside the loader.

CSS Keyframes for Loader Animation

There are two animations that we used inside the loader. The first one is about to rotate the element with the following keyframes.

@keyframes loader < 0% < transform: rotate(0deg); >25% < transform: rotate(180deg); >50% < transform: rotate(180deg); >75% < transform: rotate(360deg); >100% < transform: rotate(360deg); >> @-webkit-keyframes loader < 0% < transform: rotate(0deg); >25% < transform: rotate(180deg); >50% < transform: rotate(180deg); >75% < transform: rotate(360deg); >100% < transform: rotate(360deg); >>

The second animation increase/decrease the height of the span element to make the fill/refill illusion. Finally, add the following keyframes into your project and done.

@keyframes loader-inner < 0% < height: 0%; >25% < height: 0%; >50% < height: 100%; >75% < height: 100%; >100% < height: 0%; >> @-webkit-keyframes loader-inner < 0% < height: 0%; >25% < height: 0%; >50% < height: 100%; >75% < height: 100%; >100% < height: 0%; >>

At last, include the jQuery (JavaScript library) and preloader function to fade away loader after window load. You can set the custom duration (in milliseconds) for the delay and fade-out animation.

That’s all! Hopefully, you have successfully implemented this preloader into your HTML web page. If you have any questions or suggestions let me know by comment below.

Muhammad Asif

Muhammad Asif is a Front End Developer and Editor Staff at Codeconvey.com. He enjoys experimenting with new CSS features and helping others learn about them.

Источник

Display a loading icon until the page loads completely

Updated:
Isn’t it a great idea to show a cool animated image until your website is loading? Of Course, it will improve your site’s user experience.

Let’s learn how to use jQuery and CSS to show loading image while page loading. Free download loading gif images and use these 7 + 10 cool pre-loading icons.

Special Discount for SmallEnvelop Readers and Subscribers

Using my link, you will get 25% off on all InVideo plans
(Offer valid till 30th April)

Bonus: Canva is an excellent tool to design blog images, social banner, business cards, posters, infographics, resumes, and other visual graphics. It has a very user-friendly drag and drop interface that makes your job easy, so anyone can easily create beautiful graphics.
Canva also provides pre-made templates for posters, logos, cards, resumes, flyers, powerpoint presentations, and many more. It’s a wonderful tool that designers and non-designers both can use to create beautiful and appealing images.

How to show a Responsive loading icon or image while page loads.

1. Add a div just after tag.

2. Add some CSS to show the icon and bring it in the middle of the page.

/* Paste this css to your style sheet file or under head tag */ /* This only works with JavaScript, if it's not present, don't show loader */ .no-js #loader < display: none; >.js #loader < display: block; position: absolute; left: 100px; top: 0; >.se-pre-con < position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(https://smallenvelop.com/wp-content/uploads/2014/08/Preloader_11.gif) center no-repeat #fff; >

3. Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading.

  //paste this code under the head tag or in a separate js file. // Wait for window load $(window).load(function() < // Animate loader off screen $(".se-pre-con").fadeOut("slow");; >);

All done, now reload your page and it will show a loading icon.

Many of you have been searching for a way to show a loading gif while actual image is being loaded or show a spinner gif while an HTML element or div is being loaded. Let’s learn how to show a loading icon over each image on your site while the image is loading, using jQuery.

How to show loading gif while actual image is loading – Very simple method.

1. Add the following script to < head >.

The loadImg.js contains the plugin which will automatically detect the images on the page and hides it while the images are not loaded completely. Until then it will show a loading icon. You can change the ‘img’ to any div or class on which you want to show the spinner while it is loading.

The plugin loadImg.js contains the following code.

(function() < (function($) < return $.fn.imgPreload = function(options) < var delay_completion, i, image_stack, placeholder_stack, replace, settings, spinner_stack, src, x, _i, _len; settings = < fake_delay: 10, animation_duration: 1000, spinner_src: 'spinner.gif' >; if (options) < $.extend(settings, options); >image_stack = []; placeholder_stack = []; spinner_stack = []; window.delay_completed = false; delay_completion = function() < var x, _i, _len, _results; window.delay_completed = true; _results = []; for (_i = 0, _len = image_stack.length; _i < _len; _i++) < x = image_stack[_i]; _results.push($(x).attr('data-load-after-delay') === 'true' ? (replace(x), $(x).removeAttr('data-load-after-delay')) : void 0); >return _results; >; setTimeout(delay_completion, settings.fake_delay); this.each(function() < var $image, $placeholder, $spinner_img, offset_left, offset_top; $image = $(this); offset_top = $image.offset().top; offset_left = $image.offset().left; $spinner_img = $(''); $placeholder = $('').attr(< src: 'data:image/gif;base64,R0lGODlhAQABA IABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' >); $placeholder.attr(< width: $image.attr('width') >); $placeholder.attr(< height: $image.attr('height') >); spinner_stack.push($spinner_img); placeholder_stack.push($placeholder); image_stack.push($image.replaceWith($placeholder)); $('body').append($spinner_img); $spinner_img.css(< position: 'absolute' >); $spinner_img.css('z-index', 9999); $spinner_img.load(function() < $(this).css(< left: (offset_left + $placeholder.width() / 2) - $(this).width() / 2 >); return $(this).css(< top: (offset_top + $placeholder.height() / 2) - $(this).height() / 2 >); >); return $spinner_img.attr(< src: settings.spinner_src >); >); i = 0; for (_i = 0, _len = image_stack.length; _i < _len; _i++) < x = image_stack[_i]; x.attr(< no: i++ >); src = x.attr('src'); x.attr(< src: '' >); x.load(function() < if (window.delay_completed) < return replace(this); >else < return $(this).attr('data-load-after-delay', true); >>); x.attr(< src: src >); > replace = function(image) < var $image, no_; $image = $(image); no_ = $image.attr('no'); placeholder_stack[no_].replaceWith($image); spinner_stack[no_].fadeOut(settings.animation_duration / 2, function() < return $(this).remove(); >); return $image.fadeOut(0).fadeIn(settings.animation_duration); >; return this; >; >)(jQuery); >).call(this); 

2. Add some markup having some images.

3. Add some CSS code. Please make sure that the images have specific width and height so that the loading icon may be displayed in the center.

.images ul li img < width: 400px; height: 266px; >.images ul li

That’s all for the codes. You will able to show a loading icon over each image on the page while actual images are not fully loaded.

The final page would look like

Display a Loading icon while images loads

  

  

  

  

  

  

In the above demo, we have bundled 17 cool loading icons which you can use for your free and commercial project. If you want more icons just go to

• http://preloaders.net/
• http://loadergenerator.com/
• Loading.io : Using this tool you can customize colors and download your pre loader icons into SVG, CSS and GIF formats.

This way we can show the loading image while your webpage is loading and while an image is completely loaded. I hope this simple preloader will help you improve your site’s user experience. If you get any difficulty using the codes to your website then do comment below. Feel free to contact me for any help.
Subscribe to our email list to get updates to this post.

Источник

CSS Animated Loading Icon

In this tutorial i will show how to create Simple Animated Loading Icon using HTML, CSS. You can use this animation concept in between the time of when user click the link to move on next page.

Related Posts:

Its very helpful for you, when the visit your website looks like very awesome. So in below we give the full source code of CSS Loading Icon Animation just download and run your project.

HTML Code

 #loader < bottom: 0; height: 175px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 175px; >#loader .dot < bottom: 0; height: 100%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 87.5px; >#loader .dot::before < border-radius: 100%; content: ""; height: 87.5px; left: 0; position: absolute; right: 0; top: 0; transform: scale(0); width: 87.5px; >#loader .dot:nth-child(7n+1) < transform: rotate(45deg); >#loader .dot:nth-child(7n+1)::before < animation: 0.8s linear 0.1s normal none infinite running load; background: #00ff80 none repeat scroll 0 0; >#loader .dot:nth-child(7n+2) < transform: rotate(90deg); >#loader .dot:nth-child(7n+2)::before < animation: 0.8s linear 0.2s normal none infinite running load; background: #00ffea none repeat scroll 0 0; >#loader .dot:nth-child(7n+3) < transform: rotate(135deg); >#loader .dot:nth-child(7n+3)::before < animation: 0.8s linear 0.3s normal none infinite running load; background: #00aaff none repeat scroll 0 0; >#loader .dot:nth-child(7n+4) < transform: rotate(180deg); >#loader .dot:nth-child(7n+4)::before < animation: 0.8s linear 0.4s normal none infinite running load; background: #0040ff none repeat scroll 0 0; >#loader .dot:nth-child(7n+5) < transform: rotate(225deg); >#loader .dot:nth-child(7n+5)::before < animation: 0.8s linear 0.5s normal none infinite running load; background: #2a00ff none repeat scroll 0 0; >#loader .dot:nth-child(7n+6) < transform: rotate(270deg); >#loader .dot:nth-child(7n+6)::before < animation: 0.8s linear 0.6s normal none infinite running load; background: #9500ff none repeat scroll 0 0; >#loader .dot:nth-child(7n+7) < transform: rotate(315deg); >#loader .dot:nth-child(7n+7)::before < animation: 0.8s linear 0.7s normal none infinite running load; background: magenta none repeat scroll 0 0; >#loader .dot:nth-child(7n+8) < transform: rotate(360deg); >#loader .dot:nth-child(7n+8)::before < animation: 0.8s linear 0.8s normal none infinite running load; background: #ff0095 none repeat scroll 0 0; >#loader .lading < background-image: url("../images/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; bottom: -40px; height: 20px; left: 0; position: absolute; right: 0; width: 180px; >@keyframes load < 100% < opacity: 0; transform: scale(1); >> @keyframes load < 100% < opacity: 0; transform: scale(1); >>

Источник