{"componentChunkName":"component---src-pages-components-loading-style-mdx","path":"/components/loading/style/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Loading","description":"Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/loading/style.mdx","titleType":"prepend","MdxNode":{"id":"bbc9c378-68d0-5ee4-9b53-f342c8588b2a","children":[],"parent":"f275ff68-0a4b-5e69-9926-47e5abf45f71","internal":{"content":"---\ntitle: Loading\ndescription: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                  | Property         | Color token       |\n| ---------------------- | ---------------- | ----------------- |\n| `.bx--loading__svg`    | stroke           | `$interactive-04` |\n| `.bx--loading--small`  | stroke           | `$interactive-04` |\n| `.bx--loading-overlay` | background-color | `$overlay-01`     |\n\n## Structure\n\n| Class                 | Property      | px / rem | Spacing token |\n| --------------------- | ------------- | -------- | ------------- |\n| `.bx--loading`        | height, width | 88 / 5.5 | –             |\n| `.bx--loading--small` | height, width | 16 / 1   | –             |\n\n<div className=\"image--fixed\">\n\n![Large spinner structure measurements](images/loading-style-1.png)\n\n</div>\n\n<Caption>\n  Structure measurements for small and large loading spinner | px / rem\n</Caption>\n\n### Placement\n\nThe large loading spinner 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.\n\n<div className=\"image--fixed\">\n\n![Large spinner in context example](images/loading-style-4.png)\n\n</div>\n\n<Caption>Example of a large loading spinner in product context</Caption>\n","type":"Mdx","contentDigest":"1dc5647f65664f1d05578bed67acb1d6","counter":1362,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Loading","description":"Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Loading\ndescription: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                  | Property         | Color token       |\n| ---------------------- | ---------------- | ----------------- |\n| `.bx--loading__svg`    | stroke           | `$interactive-04` |\n| `.bx--loading--small`  | stroke           | `$interactive-04` |\n| `.bx--loading-overlay` | background-color | `$overlay-01`     |\n\n## Structure\n\n| Class                 | Property      | px / rem | Spacing token |\n| --------------------- | ------------- | -------- | ------------- |\n| `.bx--loading`        | height, width | 88 / 5.5 | –             |\n| `.bx--loading--small` | height, width | 16 / 1   | –             |\n\n<div className=\"image--fixed\">\n\n![Large spinner structure measurements](images/loading-style-1.png)\n\n</div>\n\n<Caption>\n  Structure measurements for small and large loading spinner | px / rem\n</Caption>\n\n### Placement\n\nThe large loading spinner 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.\n\n<div className=\"image--fixed\">\n\n![Large spinner in context example](images/loading-style-4.png)\n\n</div>\n\n<Caption>Example of a large loading spinner in product context</Caption>\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/components/loading/style.mdx"}}}}