{
"componentChunkName": "component---src-templates-doc-template-js",
"path": "/docs/loading",
"result": {"data":{"current":{"fields":{"page":{"path":"/docs/loading","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Loading","markdown":"\nWe created 3 different types of loading components in bar, circle and dots view. We used to same structure with [progress bar](/docs/progress 'progress bar') and [progress circle](/docs/progress 'progress circle') for loadings.\n\n\n## Loading Bar\n\nAs same structure progress bar, you can use `.gra-loading` class and turn it to loading bar.\n\n
\n \n \n \n
\n\n```html\n\n \n\n```\n\n## Loading Circles\n\nThere are 2 different type of loading circle. As same structure progress circle, you can use `.gra-loading` class and turn it to loading circle. But you should use type of loading circle `.gra-circle-turn-pieces` and `.gra-circle-turn`\n\n
\n
\n \n
\n
\n\n```html\n
\n \n
\n```\n\n
\n
\n \n
\n
\n\n```html\n
\n \n
\n```\n\n## Loading Dots\n\n
\n
\n \n \n \n
\n
\n\n```html\n
\n \n \n \n
\n```\n\n","mdtype":"MDHTML","section":"loading"},{"lang":"tr","title":"Bekleme","markdown":"\nBar, çember ve nokta görünümünde 3 farklı tipte bekleme komponenti oluşturduk. Bar ve çember için [ilerleme barı](/docs/progress 'ilerleme barı') ve [ilerleme çemberi](/docs/progress 'ilerleme çemberi') ile aynı yapı kullanıldı.\n\n## Bekleme Barı\n\nİlerleme çubuğu ile aynı yapıda, `.gra-loading` classını kullanabilir ve bekleme barına dönüştürebilirsiniz.\n\n
\n \n \n \n
\n\n```html\n\n \n\n```\n\n## Bekleme Çemberleri\n\n2 farklı tipte bekleme çemberi oluşturduk. İlerleme çemberi ile aynı yapıda, `.gra-loading` classını kullanabilir ve bekleme çemberine dönüştürebilirsiniz. Ancak ilerleme çemberleri için `.gra-circle-turn` ya da `.gra-circle-turn-pieces` classlarından birini de kullanmanız gerekli.\n\n
\n
\n \n
\n
\n\n```html\n
\n \n
\n```\n\n
\n
\n \n
\n
\n\n```html\n
\n \n
\n```\n\n## Bekleme Noktaları\n\n
\n
\n \n \n \n
\n
\n\n```html\n
\n \n \n \n
\n```\n\n","mdtype":"MDHTML","section":"loading"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/loading/en.md","language":"en","intl":{"language":"en","languages":["en","tr"],"messages":{"404.pagenotfound":"Page Not Found","404.emptyroute":"Oops! The page you are looking for has been changed or removed.","404.gotodocs":"Go To Docs","404.gotohome":"Go To Home","title":"Gralig CSS","description":"A modest, grayish CSS Library","summary":"Gralig is a modest, grayish CSS library. It can be starting point for your CSS development.","author":"@erenesto","keywords":"css, css library, clean css, grayish, frontend, ui, modest, pure, clean design, lightweight css","pages.404":"Error 404","pages.index":"Gralig CSS","pages.docs":"Gralig Documentation","sidenavLinks.docs.name":"Introduction","sidenavLinks.colors.name":"Colors","sidenavLinks.grid.name":"Grid","sidenavLinks.dark.name":"Dark Mode","sidenavLinks.vars.name":"Variables","sidenavLinks.responsive.name":"Responsive","sidenavLinks.utils.name":"Utils","sidenavLinks.typography.name":"Typography","sidenavLinks.button.name":"Button","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Custom Inputs","sidenavLinks.checkbox.name":"Checkbox","sidenavLinks.radio.name":"Radio","sidenavLinks.switch.name":"Switch","sidenavLinks.nav.name":"Nav","sidenavLinks.navbar.name":"Navbar","sidenavLinks.footer.name":"Footer","sidenavLinks.breadcrumb.name":"Breadcrumb","sidenavLinks.card.name":"Card","sidenavLinks.alert.name":"Alert","sidenavLinks.list.name":"List","sidenavLinks.table.name":"Table","sidenavLinks.dropdown.name":"Dropdown","sidenavLinks.progress.name":"Progress","sidenavLinks.loading.name":"Loading","sidenavLinks.modal.name":"Modal","words.copy":"Copy","words.copied":"Copied!","words.docs":"Docs","words.builtwith":"Built with"},"routed":false,"originalPath":"/docs/loading","redirect":false,"defaultLanguage":"en"}}},
"staticQueryHashes": ["63159454"]}