{"id":2430,"date":"2020-01-22T15:37:28","date_gmt":"2020-01-22T15:37:28","guid":{"rendered":"https:\/\/www.leadshook.com\/help\/?p=2430"},"modified":"2024-02-14T11:51:33","modified_gmt":"2024-02-14T11:51:33","slug":"how-to-create-a-progress-loader","status":"publish","type":"post","link":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/","title":{"rendered":"How to create a Progress Loader"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A progress loader is a visual message that the page is busy and wants you to wait.<\/li>\n\n\n\n<li>There are two types of progress loader. One is determinate, where we know before hand how much time the task will take to complete. The other is indeterminate, where we don&#8217;t know when the task will end.<\/li>\n\n\n\n<li>In this example we will be using an animated gif. Which is an animated image, that keeps looping. You can search Google for an animated loading gif to download and use.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a video of how to set this up:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2020\/01\/Progress-Loader.mp4\"><\/video><figcaption class=\"wp-element-caption\"><br><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The code for the text-editor source<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"loading\" style=\"text-align:center\"&gt;\n&lt;img alt=\"\" height=\"272\" src=\"https:\/\/static.leadshook.io\/upload\/test1\/tenor-1579701518943.gif\" width=\"482\" \/&gt;\n&lt;\/div&gt;\n\n&lt;div id=\"loaded\" style=\"display: none;\"&gt;\n&lt;h1&gt;Your page has fully loaded!&lt;\/h1&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>And the code for the JavaScipt<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nsetTimeout(function() { \ndocument.getElementById(\"loading\").style.display=\"none\";\ndocument.getElementById(\"loaded\").style.display=\"block\";\n}, 5*1000);\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you like you can download a copy of this demo Decision Tree. Then you can import it into your own account.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-55c01c73-b67a-45bf-9c86-9d4963b44866\" href=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2020\/01\/progress-loader_2020-01-22.zip\">progress-loader_2020-01-22<\/a><a href=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2020\/01\/progress-loader_2020-01-22.zip\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-55c01c73-b67a-45bf-9c86-9d4963b44866\">Download<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: Here&#8217;s a video of how to set this up: If you like you can download a copy of this demo Decision Tree. Then you can import it into your own account.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[548,620],"tags":[470,469,191,471,575,49],"class_list":["post-2430","post","type-post","status-publish","format-standard","hentry","category-css-hacks","category-scripts","tag-load","tag-loader","tag-loading","tag-meter","tag-preloader","tag-progress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to create a Progress Loader - LeadsHook Knowledge Base<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a Progress Loader - LeadsHook Knowledge Base\" \/>\n<meta property=\"og:description\" content=\"Introduction: Here&#8217;s a video of how to set this up: If you like you can download a copy of this demo Decision Tree. Then you can import it into your own account.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/\" \/>\n<meta property=\"og:site_name\" content=\"LeadsHook Knowledge Base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/leadshook\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-22T15:37:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-14T11:51:33+00:00\" \/>\n<meta name=\"author\" content=\"Nik T\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@leadshook\" \/>\n<meta name=\"twitter:site\" content=\"@leadshook\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nik T\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-create-a-progress-loader\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-create-a-progress-loader\\\/\"},\"author\":{\"name\":\"Nik T\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/person\\\/4bfe37d814563cc729828b7055313f4d\"},\"headline\":\"How to create a Progress Loader\",\"datePublished\":\"2020-01-22T15:37:28+00:00\",\"dateModified\":\"2024-02-14T11:51:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-create-a-progress-loader\\\/\"},\"wordCount\":139,\"publisher\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#organization\"},\"keywords\":[\"load\",\"loader\",\"loading\",\"meter\",\"preloader\",\"progress\"],\"articleSection\":[\"CSS Hacks\",\"Scripts\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-create-a-progress-loader\\\/\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-create-a-progress-loader\\\/\",\"name\":\"How to create a Progress Loader - LeadsHook Knowledge Base\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#website\"},\"datePublished\":\"2020-01-22T15:37:28+00:00\",\"dateModified\":\"2024-02-14T11:51:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-create-a-progress-loader\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-create-a-progress-loader\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/how-to-create-a-progress-loader\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a Progress Loader\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/\",\"name\":\"LeadsHook Knowledge Base\",\"description\":\"LeadsHook Training &amp; Technical Help\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#organization\",\"name\":\"LeadsHook\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/leadshook-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/leadshook-logo.png\",\"width\":350,\"height\":83,\"caption\":\"LeadsHook\"},\"image\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/leadshook\\\/\",\"https:\\\/\\\/x.com\\\/leadshook\",\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/leadshook\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/person\\\/4bfe37d814563cc729828b7055313f4d\",\"name\":\"Nik T\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g\",\"caption\":\"Nik T\"},\"sameAs\":[\"http:\\\/\\\/www.LeadsHook.com\"],\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/author\\\/nik\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a Progress Loader - LeadsHook Knowledge Base","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/","og_locale":"en_US","og_type":"article","og_title":"How to create a Progress Loader - LeadsHook Knowledge Base","og_description":"Introduction: Here&#8217;s a video of how to set this up: If you like you can download a copy of this demo Decision Tree. Then you can import it into your own account.","og_url":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/","og_site_name":"LeadsHook Knowledge Base","article_publisher":"https:\/\/www.facebook.com\/leadshook\/","article_published_time":"2020-01-22T15:37:28+00:00","article_modified_time":"2024-02-14T11:51:33+00:00","author":"Nik T","twitter_card":"summary_large_image","twitter_creator":"@leadshook","twitter_site":"@leadshook","twitter_misc":{"Written by":"Nik T"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/#article","isPartOf":{"@id":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/"},"author":{"name":"Nik T","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/4bfe37d814563cc729828b7055313f4d"},"headline":"How to create a Progress Loader","datePublished":"2020-01-22T15:37:28+00:00","dateModified":"2024-02-14T11:51:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/"},"wordCount":139,"publisher":{"@id":"https:\/\/www.leadshook.com\/help\/#organization"},"keywords":["load","loader","loading","meter","preloader","progress"],"articleSection":["CSS Hacks","Scripts"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/","url":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/","name":"How to create a Progress Loader - LeadsHook Knowledge Base","isPartOf":{"@id":"https:\/\/www.leadshook.com\/help\/#website"},"datePublished":"2020-01-22T15:37:28+00:00","dateModified":"2024-02-14T11:51:33+00:00","breadcrumb":{"@id":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.leadshook.com\/help\/how-to-create-a-progress-loader\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.leadshook.com\/help\/"},{"@type":"ListItem","position":2,"name":"How to create a Progress Loader"}]},{"@type":"WebSite","@id":"https:\/\/www.leadshook.com\/help\/#website","url":"https:\/\/www.leadshook.com\/help\/","name":"LeadsHook Knowledge Base","description":"LeadsHook Training &amp; Technical Help","publisher":{"@id":"https:\/\/www.leadshook.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.leadshook.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.leadshook.com\/help\/#organization","name":"LeadsHook","url":"https:\/\/www.leadshook.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png","contentUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png","width":350,"height":83,"caption":"LeadsHook"},"image":{"@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/leadshook\/","https:\/\/x.com\/leadshook","https:\/\/www.linkedin.com\/showcase\/leadshook\/"]},{"@type":"Person","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/4bfe37d814563cc729828b7055313f4d","name":"Nik T","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g","caption":"Nik T"},"sameAs":["http:\/\/www.LeadsHook.com"],"url":"https:\/\/www.leadshook.com\/help\/author\/nik\/"}]}},"_links":{"self":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/2430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/comments?post=2430"}],"version-history":[{"count":4,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/2430\/revisions"}],"predecessor-version":[{"id":6543,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/2430\/revisions\/6543"}],"wp:attachment":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/media?parent=2430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/categories?post=2430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/tags?post=2430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}