{"id":1075,"date":"2018-05-31T03:22:44","date_gmt":"2018-05-31T03:22:44","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=1075"},"modified":"2018-06-01T02:34:42","modified_gmt":"2018-06-01T02:34:42","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/loaders\/usage\/","title":{"rendered":"Usage"},"content":{"rendered":"\n<p>Components<\/p>\n<h1>\n\t\tSpinner<br \/>\n\t<\/h1>\n<h2>\n\t\tGuidelines<br \/>\n\t<\/h2>\n<h4>\n\t\tLoading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.<br \/>\n\t<\/h4>\n<p>The waiting experience is a crucial design opportunity. Although it may not be obvious what is occurring on the back-end, we can communicate clearly to reassure the user that progress is happening.<\/p>\n<p>It is best practice to use a loading spinner whenever the wait time is anticipated to be longer than three seconds.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Size\" target=\"_self\"><br \/>\n\t\tSize<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Loading spinners may be scaled down if the loading experience is contextual to a certain item on the page.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Placement\" target=\"_self\"><br \/>\n\t\tPlacement<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Loading spinners should appear centered over a page or content that it is loading. Please note that the top-level navigation is not included in the page loading overlay.<\/p>\n<h2>\n\t\tUsage<br \/>\n\t<\/h2>\n<h5>\n\t\tButton Type<br \/>\n\t<\/h5>\n<h5>\n\t\tPurpose<br \/>\n\t<\/h5>\n<p><strong>Circular<\/strong><\/p>\n<p><strong>Progression<\/strong><\/p>\n<h2>\n\t\tBest Practices<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Do\" target=\"_self\"><br \/>\n\t\tDo<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<ul>\n<li>Use a Spinner when a task is not immediate.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Use one Spinner at a time.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Descriptive verbs are appropriate under a Spinner to help the user understand what&#8217;s happening. Ie: Saving, processing, updating.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Use a Spinner when confirming a change has been made or a task is being processed.<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Don&#039;t\" target=\"_self\"><br \/>\n\t\tDon&#8217;t<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<ul>\n<li>Don\u2019t use a Spinner when performing immediate tasks.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don&#8217;t show multiple Spinners at the same time.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don&#8217;t include more than a few words when paired with a Spinner.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Components Spinner Guidelines Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. The waiting experience is a crucial design opportunity. Although it may not be obvious what is occurring on the back-end, we can communicate clearly to reassure the user that progress is happening.&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":925,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1075","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/1075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=1075"}],"version-history":[{"count":4,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/1075\/revisions"}],"predecessor-version":[{"id":1103,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/1075\/revisions\/1103"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/925"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=1075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}