{"id":95,"date":"2018-01-17T06:31:35","date_gmt":"2018-01-17T06:31:35","guid":{"rendered":"http:\/\/loftocean.com\/doc\/loftloader\/?page_id=95"},"modified":"2021-10-21T10:57:26","modified_gmt":"2021-10-21T10:57:26","slug":"progress-bar","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftloader\/progress\/progress-bar\/","title":{"rendered":"Progress Bar"},"content":{"rendered":"<p>When choose <strong>Bar<\/strong>:<\/p>\n<ul>\n<li><strong>Position \u2013<\/strong> <strong>Top\/Middle\/Bottom<\/strong>.\n<ul>\n<li>When choose <strong>Top<\/strong> or <strong>Bottom<\/strong>, the loading bar will be put at the top or the bottom of the browser window.<\/li>\n<li>When choose <strong>Middle<\/strong>, if there is also a loading animation, the bar will be put below the animation. If no animation, the bar will be right in the middle of the browser window.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Width \u2013<\/strong> Give a width value of the loading bar. You can click on the unit to switch between <strong>px<\/strong> and <strong>%<\/strong>.<\/li>\n<li><strong>Height \u2013<\/strong> Give a height value of the loading bar. The unit is px.<\/li>\n<li><strong>Color \u2013<\/strong> Click to choose a color from the color picker. Or enter the hex value of a color you like.<\/li>\n<li><strong>Gradient Color \u2013 <\/strong>Since version 2.3.2, you can use gradient color as the background color of the progress bar. Just click to <strong style=\"font-size: inherit;\">Enable Gradient<\/strong><span style=\"font-size: inherit;\">, then pick a\u00a0<\/span><strong style=\"font-size: inherit;\">Start Color<\/strong><span style=\"font-size: inherit;\">\u00a0and an\u00a0<\/span><strong style=\"font-size: inherit;\">End Color.<\/strong><span style=\"font-size: inherit;\">\u00a0<\/span>Currently we only support linear gradient between 2 colors.<\/li>\n<\/ul>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-6.56.35-pm-1024x640.png\" alt=\"\" class=\"wp-image-745\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-6.56.35-pm-1024x640.png 1024w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-6.56.35-pm-300x188.png 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-6.56.35-pm-768x480.png 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-6.56.35-pm-1536x960.png 1536w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-6.56.35-pm-2048x1280.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>When choose Bar: Position \u2013 Top\/Middle\/Bottom. When choose Top or Bottom, the loading bar will be put at the top or the bottom of the browser window. When choose Middle, if there is also a loading animation, the bar will be put below the animation. If no animation, the bar will be right in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":90,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-95","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/95","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/comments?post=95"}],"version-history":[{"count":3,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/95\/revisions"}],"predecessor-version":[{"id":746,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/95\/revisions\/746"}],"up":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/90"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/media?parent=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}