{"id":100832,"date":"2020-03-23T15:57:28","date_gmt":"2020-03-23T20:57:28","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=100832"},"modified":"2024-09-28T12:52:12","modified_gmt":"2024-09-28T17:52:12","slug":"add-preloader-animation-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/","title":{"rendered":"How to Add a Page Loading Animation (Preloader) in WordPress"},"content":{"rendered":"\n

Page speed<\/a> plays a critical role in your website\u2019s performance. If it takes more than a second or two for a page to fully load, that can frustrate users enough to make them leave your site. However, it can help if the visitor has something engaging to look at while the page finishes loading. <\/p>\n\n\n\n

A page loading animation, or \u2018preloader animation\u2019, helps inform visitors that a page is loading (it isn\u2019t stuck), and increases the likelihood that they\u2019ll stay on the site. In this way, it can improve the User Experience (UX) and reduce your bounce rates<\/a>. <\/p>\n\n\n\n

In this post, we\u2019ll explain the benefits of preloader animations and when to use one. Then we\u2019ll walk you through your options for adding a WordPress page loading animation. Let\u2019s get started!<\/p>\n\n\n\n\n\n

What Is a Loading Animation?<\/h2>\n\n\n\n

A preloader animation, or loading animation, signals to users that a page is actively loading. It\u2019s a simple animation that can be used as a progress indicator for pages that only load certain pieces of content at a time.<\/p>\n\n\n\n

WordPress preloaders give visitors something more enjoyable and interesting to look at in the seconds while they wait for the entire page to finish loading. In some cases, they can even offer an estimate of how much time is left.<\/p>\n\n\n\n

When Should I Use a Preloader?<\/h2>\n\n\n\n

A preloader is a smart choice when you have a video- or image-heavy WordPress site that takes a bit longer to load than normal. That way, visitors will be reassured that your site is functioning as intended, and isn\u2019t broken.<\/p>\n\n\n\n

However, if your site is mostly text-based, a preloader animation may not be necessary. Instead, it would make more sense to focus on improving your page speed<\/a>.<\/p>\n\n\n\n

Two Options for Adding a WordPress Loading Animation<\/h2>\n\n\n\n

There are two main methods you can use to add a WordPress preloader animation to your site. You can use a plugin, which is the easier option, or perform the task manually. Let\u2019s take a look at how to get started with both methods. <\/p>\n\n\n\n

Option 1: Add a Preloader Animation Using a Plugin<\/h3>\n\n\n\n

Adding a preloader animation via a plugin is the quicker and easier option for most users. There are a handful of plugins you can use, but we recommend WP Smart Preloader<\/a>.<\/p>\n\n\n\n

This is a free, highly-customizable plugin. It uses CSS and minimal HTML markup to help reduce the risk of users leaving your website as content loads. However, it is important to note that this plugin has not been tested with the most recent version of WordPress, so it’s important to test it out in a local development environment first. <\/p>\n\n\n\n

In the following steps, we\u2019ll show you how it works.<\/p>\n\n\n\n

Step 1: Download WP Smart Preloader<\/h4>\n\n\n\n

You can download the WP Smart Preloader plugin via the WordPress Plugin Directory. Then you can upload the .zip <\/em>file to your WordPress site, by going to Plugins > Add New > Upload Plugin<\/em> in the admin dashboard:<\/p>\n\n\n\n

Another option is to search for the plugin via the search bar on the Plugin > Add New<\/em> screen:<\/p>\n\n\n\n

Either way, once the plugin is installed, click on the Activate <\/em>button. You can then locate its options under Settings > WP Smart Preloader<\/em>.<\/p>\n\n\n\n

Step 2: Select Your Style<\/h4>\n\n\n\n

On the WP Smart Preloader Settings<\/em> page, the first thing to do is select a style for the preloader. Under the Select Preloader <\/em>section, there will be a drop-down menu letting you choose from six style options, as well as an option for custom animation:<\/p>\n\n\n\n

Once you select a style, you can preview it in the window below. If you want to add your own custom animation, you can include your HTML code under the Custom Animation<\/em> section:<\/p>\n\n\n\n

At the end of this screen, you can set the duration for the loader itself and the \u2018fade out\u2019 effect:<\/p>\n\n\n\n

If you leave these fields blank, the defaults will be set at 1500 milliseconds (1.5 seconds) and 2500 milliseconds (2.5 seconds) respectively. When you\u2019re done, click on the Save Changes <\/em>button.<\/p>\n\n\n\n

Step 3: Preview Your Preloader Animation<\/h4>\n\n\n\n

Once you\u2019re done configuring your settings, visit your WordPress site in a new browser tab to preview the preloader animation. You can go back to make any stylistic changes as needed. Once you\u2019re happy with the preloader, it will be set up and ready to go.<\/p>\n\n\n\n

Option 2: Add a WordPress Loading Animation Manually<\/h3>\n\n\n\n

If you\u2019re not interested in using a plugin, you can still add this feature to your site manually. The main advantage of creating a custom preloader is that you have more flexibility in how it\u2019s designed.<\/p>\n\n\n\n

Of course, it\u2019s also a more difficult process. Next, we\u2019ll walk you through how to create, upload, and format a custom preloader animation for your WordPress site.<\/p>\n\n\n\n

Step 1: Brainstorm Your Loading Animation<\/h4>\n\n\n\n

The first step is to decide what kind of animation you\u2019re going to use. You might research other preloader animation tools to get an idea of the style you like. There are some free animations you can use and explore on Codepen, which can be a great way to get some ideas.<\/p>\n\n\n\n

Step 2: Develop or Download Your Loading Animation<\/h4>\n\n\n\n

To develop your animation, you can use a tool such as Photoshop to create a GIF<\/a> or a spinning preloader animation. You can also refer to our resource on creating WordPress animations using CSS<\/a>.<\/p>\n\n\n\n

We recommend the latter approach, as adding a GIF preloader to your WordPress site is best done with a plugin. In addition to Codepen (mentioned above), you can also download an animation from sites such as Spinkit<\/a> and LoadLab<\/a>. <\/p>\n\n\n\n

For this tutorial, we\u2019ll use a preloader animation from Spinkit. Regardless of where you get your animation from, you\u2019ll need its CSS source code to manually add it to your WordPress site:<\/p>\n\n\n\n

Most free preloader animations will include a source link, where you can find both its HTML and CSS:<\/p>\n\n\n\n

Keep in mind that you can also use the CSS source code from a preloader animation, and then later customize it to your liking. <\/p>\n\n\n\n

Step 3: Create a Child Theme<\/h4>\n\n\n\n

Once you have your animation, you can add it to your WordPress site. The safest way to do that is to set up a child theme. If you\u2019re not sure how to do that, you can review our tutorial on how to create a WordPress child theme<\/a>. <\/p>\n\n\n\n

Step 4: Add HTML Code to Your Theme\u2019s header.php<\/em> File<\/h4>\n\n\n\n

The next step is to locate the header.php<\/em> file for your WordPress theme. You can do this via the WordPress Theme Editor<\/em> screen:<\/p>\n\n\n\n

You can also edit the files using an FTP client<\/a> such as FileZilla<\/a>. The file will be located in the wp-content > themes <\/em>folder in your site\u2019s root directory.<\/p>\n\n\n\n

Once you locate and open the file, insert the following HTML code below the body tag:<\/p>\n\n\n\n

<!--CSS Spinner-->\n<div class=\"spinner-wrapper\">\n<div class=\"spinner\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Adjust or add whatever HTML code is necessary for your particular WordPress preloader animation, and save the file. <\/p>\n\n\n\n
Step 5: Add the CSS Code to Your Stylesheet<\/h4>\n\n\n\n
Now it\u2019s time to add CSS to style your animation. Locate the CSS stylesheet (style.css<\/em>) for your WordPress theme, then copy and paste the CSS source code for your animation. In our case, we\u2019ll be adding the following:<\/p>\n\n\n\n
.spinner {\n  margin: 100px auto;\n  width: 50px;\n  height: 40px;\n  text-align: center;\n  font-size: 10px;\n}\n\n.spinner > div {\n  background-color: #333;\n  height: 100%;\n  width: 6px;\n  display: inline-block;\n  \n  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;\n  animation: sk-stretchdelay 1.2s infinite ease-in-out;\n}\n\n.spinner .rect2 {\n  -webkit-animation-delay: -1.1s;\n  animation-delay: -1.1s;\n}\n\n.spinner .rect3 {\n  -webkit-animation-delay: -1.0s;\n  animation-delay: -1.0s;\n}\n\n.spinner .rect4 {\n  -webkit-animation-delay: -0.9s;\n  animation-delay: -0.9s;\n}\n\n.spinner .rect5 {\n  -webkit-animation-delay: -0.8s;\n  animation-delay: -0.8s;\n}\n\n@-webkit-keyframes sk-stretchdelay {\n  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  \n  20% { -webkit-transform: scaleY(1.0) }\n}\n\n@keyframes sk-stretchdelay {\n  0%, 40%, 100% { \n    transform: scaleY(0.4);\n    -webkit-transform: scaleY(0.4);\n  }  20% { \n    transform: scaleY(1.0);\n    -webkit-transform: scaleY(1.0);\n  }\n}\n<\/code><\/pre>\n\n\n\n
Before you save your changes, remove this part: \u201cmargin: 100px auto;\u201d. In its place, copy and paste the following:<\/p>\n\n\n\n
position: absolute;\ntop: 48%;\nleft: 48%;<\/code><\/pre>\n\n\n\n
Then you can save the file.<\/p>\n\n\n\n
Step 6: Add jQuey Code to Make the Loading Animation Work<\/h4>\n\n\n\n
In order to make your spinner preloader animation work, you\u2019ll need to add a bit of jQuery. To do that, you can navigate back to the header.php<\/em> file, and insert the following before the closing body tag:<\/p>\n\n\n\n
<script>\n$(document).ready(function() {\n\/\/Preloader\npreloaderFadeOutTime = 500;\nfunction hidePreloader() {\nvar preloader = $('.spinner-wrapper');\npreloader.fadeOut(preloaderFadeOutTime);\n}\nhidePreloader();\n});\n<\/script>\n<\/code><\/pre>\n\n\n\n
Then save your file, and preview your site to make sure the WordPress preloader animation works as intended.<\/p>\n\n\n\n
Find More Tips and Guides from WP Engine<\/h2>\n\n\n\n
Adding WordPress loading animations to your site can help to engage visitors and reduce bounce rates. Plus, you have multiple options for getting the job done quickly.<\/p>\n\n\n\n
At WP Engine, it\u2019s our mission to provide tips, tricks, and resources for developers<\/a> as well as high-quality hosting services for WordPress<\/a> to help you ensure that your website always looks its best. Learn more about our plans<\/a> today!<\/p>\n","protected":false},"excerpt":{"rendered":"
Page speed plays a critical role in your website\u2019s performance. If it takes more than a second or two for a page to fully load, that can frustrate users enough to make them leave your site. However, it can help if the visitor has something engaging to look at while the page finishes loading.  A…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":145938,"template":"","resource-topic":[904,912],"resource-role":[895,896,897,899],"resource-type":[916],"class_list":["post-100832","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Add a Preloader Animation to WordPress<\/title>\n<meta name=\"description\" content=\"Improve UX with engaging WordPress loading animations. Discover how to integrate preloader animations and explore the top preloader plugins.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Preloader Animation to WordPress\" \/>\n<meta property=\"og:description\" content=\"Improve UX with engaging WordPress loading animations. Discover how to integrate preloader animations and explore the top preloader plugins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-28T17:52:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/03\/loading-animation.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Add a Preloader Animation to WordPress\" \/>\n<meta name=\"twitter:description\" content=\"Improve UX with engaging WordPress loading animations. Discover how to integrate preloader animations and explore the top preloader plugins.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/03\/loading-animation.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/\",\"name\":\"How to Add a Preloader Animation to WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2020-03-23T20:57:28+00:00\",\"dateModified\":\"2024-09-28T17:52:12+00:00\",\"description\":\"Improve UX with engaging WordPress loading animations. Discover how to integrate preloader animations and explore the top preloader plugins.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add a Page Loading Animation (Preloader) in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a Preloader Animation to WordPress","description":"Improve UX with engaging WordPress loading animations. Discover how to integrate preloader animations and explore the top preloader plugins.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Add a Preloader Animation to WordPress","og_description":"Improve UX with engaging WordPress loading animations. Discover how to integrate preloader animations and explore the top preloader plugins.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-09-28T17:52:12+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/03\/loading-animation.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Add a Preloader Animation to WordPress","twitter_description":"Improve UX with engaging WordPress loading animations. Discover how to integrate preloader animations and explore the top preloader plugins.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/03\/loading-animation.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/","name":"How to Add a Preloader Animation to WordPress","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2020-03-23T20:57:28+00:00","dateModified":"2024-09-28T17:52:12+00:00","description":"Improve UX with engaging WordPress loading animations. Discover how to integrate preloader animations and explore the top preloader plugins.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-preloader-animation-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add a Page Loading Animation (Preloader) in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/03\/loading-animation-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Developer, Freelancer, Site Owner","topic":"<strong>Topics:<\/strong> Marketing, Performance","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/100832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/145938"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=100832"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=100832"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=100832"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=100832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}