{"id":99,"date":"2018-01-17T06:39:47","date_gmt":"2018-01-17T06:39:47","guid":{"rendered":"http:\/\/loftocean.com\/doc\/loftloader\/?page_id=99"},"modified":"2021-10-21T11:02:18","modified_gmt":"2021-10-21T11:02:18","slug":"bar-number","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftloader\/progress\/bar-number\/","title":{"rendered":"Bar + Number"},"content":{"rendered":"<p>When choose <strong>Bar + Number<\/strong>:<\/p>\n<ul>\n<li><strong>Position \u2013 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 <strong>px<\/strong>.<\/li>\n<li><strong>Color \u2013<\/strong> Click to choose a text color from the color picker. Or enter the hex value of a color you like.<\/li>\n<li><strong>Gradient Color<\/strong> &#8211;\u00a0Since 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. Please note that the gradient color will be applied to the progress bar only, and the color of the percentage number will still be the solid color.<\/li>\n<li><strong>Size \u2013<\/strong> Drag to change font size for the progress count number.<\/li>\n<li><strong>Font<\/strong> \u2013 Choose a Google font, or use the website default font (so that LoftLoader Pro won\u2019t call Google Fonts again). (New option added since v1.2.2)<\/li>\n<li><strong>Google Font \u2013<\/strong> Choose a font family from the Google Fonts list. <del datetime=\"2018-09-28T13:01:29+00:00\">Or choose <strong>\u201cDefault\u201d<\/strong> to use the font which is using by your site (so LoftLoader Pro won\u2019t call Google Fonts again).<\/del> (Updated since v1.2.2.)<\/li>\n<li><strong>Font Weight \u2013<\/strong> Select font weight. <span class=\"highlighted\">Please note:<\/span> not every font supports all the font weight values listed.<\/li>\n<li><strong>Letter Spacing \u2013<\/strong> Choose a letter spacing value in the list. It will expand or condense the space evenly between the characters.<\/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-7.01.57-pm-1024x640.png\" alt=\"\" class=\"wp-image-748\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-7.01.57-pm-1024x640.png 1024w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-7.01.57-pm-300x188.png 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-7.01.57-pm-768x480.png 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-7.01.57-pm-1536x960.png 1536w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/Screen-Shot-2021-10-21-at-7.01.57-pm-2048x1280.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>When choose Bar + Number: 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":90,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-99","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/99","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=99"}],"version-history":[{"count":4,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/99\/revisions"}],"predecessor-version":[{"id":749,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/99\/revisions\/749"}],"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=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}