{"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","Accessibility"]},"relativePagePath":"/components/loading/style.mdx","titleType":"prepend","MdxNode":{"id":"c7f89cbd-8026-5722-bee5-8eb69f1d9f65","children":[],"parent":"b31c3de7-adc9-5607-b0b8-9cc725efa5ff","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', 'Accessibility']\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":"4c2eee3b94f1ed32d3202a080f11fb8d","counter":1349,"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","Accessibility"]},"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', 'Accessibility']\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/3ed0734e/src/pages/components/loading/style.mdx"}}}}