{
"componentChunkName": "component---src-templates-doc-template-js",
"path": "/tr/docs/progress",
"result": {"data":{"current":{"fields":{"page":{"path":"/docs/progress","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"tr","title":"İlerleme","markdown":"\nBar ve çember görünümünde 2 farklı tipte ilerleme komponenti oluşturduk. `.small`, normal ve `.large` boyutlarında kullanabilirsiniz.\n\n\n## İlerleme Barı\n\nİlerleme barı için yüzdelik değer küçükten büyüğe doğru `translateX(-100%)` ve `translateX(0%)` arasındadır.\n\n
\n\n```html\n\n \n\n\n \n\n\n \n\n\n \n\n```\n\n## İlerleme Çemberi\n\nİlerleme çemberi oluşturmak için satır içi svg kullandık. Çemberin değeri, `.gra-progress-circle-value` sınıfına sahip `` ile temsil edilmekte. Çemberin değeriyle oynamak için `stroke-dashoffset` kullanmalısınız. %0 anlamına gelen çemberin en küçük değeri `stroke-dashoffset: 380` ve en büyük değeri olan %100 `stroke-dashoffset: 172` ile eşdeğerdir.\n\n
\n
\n \n
\n
\n\n```html\n
\n \n
\n```\n\n### Boyutlar\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n\n```html\n
\n \n
\n
\n \n
\n
\n \n
\n```\n\n### Renkler\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n\n```html\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n```\n","mdtype":"MDHTML","section":"progress"},{"lang":"en","title":"Progress","markdown":"\nWe created 2 different types of progress components in bar and circle view. You can use it in `.small`, normal and `.large` sizes.\n\n\n## Progress Bar\n\nFor progress bar, percentage value from small to large is between `translateX(-100%)` and `translateX(0%)`\n\n
\n\n```html\n\n \n\n\n \n\n\n \n\n\n \n\n```\n\n## Progress Circle\n\nWe used inline svg for creating progress circle. The value of circle represents with `` which have `.gra-progress-circle-value` class. To move value of circle, you should use `stroke-dashoffset`. Smallest value of circle which means 0% is `stroke-dashoffset: 380` and biggest value which means 100% is `stroke-dashoffset: 172`\n\n
\n
\n \n
\n
\n\n```html\n
\n \n
\n```\n\n### Sizes\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n\n```html\n
\n \n
\n
\n \n
\n
\n \n
\n```\n\n### Colors\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n\n```html\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n```\n","mdtype":"MDHTML","section":"progress"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/progress/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/progress","redirect":false,"defaultLanguage":"en"}}},
"staticQueryHashes": ["63159454"]}