{"componentChunkName":"component---src-pages-components-loading-style-mdx","path":"/components/loading/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","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":"a5e6b088-4959-53da-8cc2-8a58a5ef29fe","children":[],"parent":"60657f15-cbf3-5a86-ad3d-221e0c9fcacb","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":"b659b0eb1d22aff5edb9d7854cec02d1","counter":1130,"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":"/tmp/42b44a0/src/pages/components/loading/style.mdx"}}}}