{"id":105934,"date":"2023-04-07T17:40:27","date_gmt":"2023-04-07T12:10:27","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=105934"},"modified":"2023-04-07T17:40:27","modified_gmt":"2023-04-07T12:10:27","slug":"custom-css-preloader-animations-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/custom-css-preloader-animations-in-elementor\/","title":{"rendered":"How to Add Custom CSS Preloader Animations in Elementor?"},"content":{"rendered":"\n<p>Do you want to add Custom CSS Preloader Animation in your Elementor website? With the Preloader widget from The Plus Addons for Elementor you get several preloader animation options, but you may want to create a custom CSS preloader animation that aligns with your website&#8217;s theme and branding.<\/p>\n\n\n\n<p>You can easily use custom coded CSS preloader with the Preloader widget from The Plus Addons for Elementor.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Preloader widget, <a href=\"\/docs\/preloader-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure it&#8217;s installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/pre-loader?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Add the Preloader widget on the page or template, in the <strong>Content<\/strong> tab, you\u2019ll find an item under <strong>Preloader<\/strong>.<\/p>\n\n\n\n<p>Open the item and select <strong>Custom Code <\/strong>from the <strong>Select<\/strong> dropdown.<\/p>\n\n\n\n<p>In the <strong>Code<\/strong> field, add your CSS Preloader code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"488\" height=\"732\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-custom-code.png\" alt=\"preloader custom code\" class=\"wp-image-105936\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-custom-code.png 488w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-custom-code-200x300.png 200w\" sizes=\"(max-width: 488px) 100vw, 488px\" \/><\/figure>\n\n\n\n<p>If you know HTML and CSS, you can create your own CSS loading animation, but if you don\u2019t, then you can find many custom CSS loading animations on different websites like <a href=\"https:\/\/cssloaders.github.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSSloaders<\/a>, <a href=\"https:\/\/loading.io\/css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Loading.io<\/a> etc.<\/p>\n\n\n\n<p>For example, we\u2019ll use a CSS loading animation from the <a href=\"https:\/\/cssloaders.github.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSSloaders<\/a>.<\/p>\n\n\n\n<p>Click on the animation you like and it will show the HTML and CSS code in a popup. Copy the CSS first then in the Preloader widget add &lt;style&gt; &lt;\/style&gt; tag and paste the CSS in between the tag.<\/p>\n\n\n\n<p>Like this &#8211;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\nYour CSS Code\u2026\n\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Then go back to the CSSloders site and copy the HTML and paste it in the Preloader widget.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"946\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/add-custom-css-loader-code.gif\" alt=\"add custom css loader code\" class=\"wp-image-105941\"\/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You have to change the CSS to adjust the style of the loader.<\/em><\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"913\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-custom-code-demo.gif\" alt=\"preloader custom code demo\" class=\"wp-image-105943\"\/><\/figure>\n\n\n\n<p>That\u2019s it. Now your custom CSS loading animation will show as the preloader.<\/p>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/shortcode-based-preloader-animation-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add Shortcode Based Preloader Animation in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":105945,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,559],"class_list":["post-105934","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-preloader"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=105934"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105934\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/105945"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105934"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}