ExProgress

<!-- ════════ 01 · Bar — States ════════ -->
<ux7:ExPanel  id="panelStates" headerText="01 · Bar — States (gradient + animated)" expanded="true">
  <ux7:content>
    <ux7:ExProgress id="progDefault" value="40" variant="bar" state="default" label="Yükleniyor" showValue="true" animated="true" />
    <ux7:ExProgress id="progSuccess" value="75" variant="bar" state="success" label="Tamamlandı" showValue="true" animated="true" />
    <ux7:ExProgress id="progInfo" value="90" variant="bar" state="info" label="Senkronizasyon" showValue="true" animated="true" />
    <ux7:ExProgress id="progWarning" value="55" variant="bar" state="warning" label="Disk kullanımı" showValue="true" animated="true" />
    <ux7:ExProgress id="progError" value="30" variant="bar" state="error" label="Hata oranı" showValue="true" animated="true" />
    <ux7:ExProgress id="progGlow" value="100" variant="bar" state="success" glow="true" label="Yedekleme · glow" showValue="true" />
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ 02 · Boyutlar + bubble ════════ -->
<ux7:ExPanel id="panelSize" headerText="02 · Boyutlar — sm · md · lg · xl" expanded="true">
  <ux7:content>
    <ux7:ExProgress id="progSm" value="60" variant="bar" size="sm" accent="a-2" label="sm · 6px" showValue="true" />
    <ux7:ExProgress id="progMd" value="60" variant="bar" size="md" accent="a-1" label="md · 10px" showValue="true" animated="true" />
    <ux7:ExProgress id="progLg" value="60" variant="bar" size="lg" accent="a-6" bubble="true" showValue="true" animated="true" label="lg · 16px · bubble" />
    <ux7:ExProgress id="progXl" value="60" variant="bar" size="xl" accent="a-3" bubble="true" showValue="true" animated="true" label="xl · 22px · bubble" />
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ 03 · Striped + Indeterminate + Custom text ════════ -->
<ux7:ExPanel id="panelStriped" headerText="03 · Çizgili &amp; Belirsiz &amp; Canlı indirme" expanded="true">
  <ux7:content>
    <ux7:ExProgress id="progStriped1" value="65" variant="bar" size="lg" state="success" striped="true" showValue="true" label="Yükleme · striped" />
    <ux7:ExProgress id="progStriped2" value="45" variant="bar" size="lg" state="warning" striped="true" showValue="true" label="İşlem · striped" />
    <ux7:ExProgress id="progInd1" value="0" variant="bar" accent="a-1" indeterminate="true" label="Sunucuya bağlanılıyor…" showValue="false" />
    <ux7:ExProgress id="progInd2" value="0" variant="bar" accent="a-6" indeterminate="true" label="Veriler işleniyor…" showValue="false" />
    <ux7:ExProgress id="progCustom1" value="48" variant="bar" accent="a-2" valueText="480 KB / 1 MB" showValue="true" animated="true" label="İndiriliyor" />
    <ux7:ExProgress id="progCustom2" value="100" variant="bar" state="success" valueText="Tamamlandı ✓" showValue="true" complete="onProgressComplete" label="Aktarım" />
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ 04 · Circle ════════ -->
<ux7:ExPanel id="panelCircle" headerText="04 · Ring — dairesel ilerleme" expanded="true">
  <ux7:content>
    <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom">
      <ux7:ExProgress id="progCircle1" value="72" variant="circle" size="lg" state="success" showValue="true" strokeWidth="9" cap="SLA" label="Hizmet düzeyi" class="sapUiSmallMarginEnd" />
      <ux7:ExProgress id="progCircle2" value="45" variant="circle" size="lg" accent="a-2" showValue="true" strokeWidth="9" cap="CPU" label="İşlemci yükü" class="sapUiSmallMarginEnd" />
      <ux7:ExProgress id="progCircle3" value="90" variant="circle" size="lg" accent="a-6" showValue="true" strokeWidth="9" cap="Bellek" label="RAM kullanımı" class="sapUiSmallMarginEnd" />
      <ux7:ExProgress id="progCircle4" value="64" variant="circle" size="md" accent="a-5" showValue="true" strokeWidth="5" cap="ince" label="strokeWidth 5" />
    </FlexBox>
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ 05 · Gauge ════════ -->
<ux7:ExPanel id="panelGauge" headerText="05 · Gauge — yarım daire" expanded="true">
  <ux7:content>
    <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom">
      <ux7:ExProgress id="progGauge1" value="78" variant="gauge" state="success" showValue="true" cap="Sağlık skoru" class="sapUiSmallMarginEnd" />
      <ux7:ExProgress id="progGauge2" value="52" variant="gauge" state="warning" showValue="true" cap="Kapasite" class="sapUiSmallMarginEnd" />
      <ux7:ExProgress id="progGauge3" value="91" variant="gauge" accent="a-1" showValue="true" cap="Performans" />
    </FlexBox>
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ 06 · Stepper ════════ -->
<ux7:ExPanel id="panelSteps" headerText="06 · Stepper — numaralı adımlar" expanded="true">
  <ux7:content>
    <ux7:ExProgress id="progSteps" value="2" max="5" variant="steps" accent="a-1" stepLabels="Hesap,Profil,Ödeme yöntemi,Onay,Bitti" />
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ 07 · Segments ════════ -->
<ux7:ExPanel id="panelSegments" headerText="07 · Segment çubuğu" expanded="true">
  <ux7:content>
    <ux7:ExProgress id="progSeg1" value="3" max="5" variant="segments" size="md" accent="a-3" />
    <ux7:ExProgress id="progSeg2" value="2" max="4" variant="segments" size="lg" accent="a-6" />
    <ux7:ExProgress id="progSeg3" value="5" max="7" variant="segments" size="sm" accent="a-2" />
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ 08 · Stacked ════════ -->
<ux7:ExPanel id="panelStacked" headerText="08 · Stacked — çok parçalı dağılım" expanded="true">
  <ux7:content>
    <!-- Depolama -->
    <ux7:ExProgress id="progStack1" variant="stacked" label="Depolama dağılımı" valueText="512 GB / 1 TB" segments='[{"w":34,"color":"var(--ex-c-1, #4F46E5)","label":"Belgeler","detail":"348 GB"},{"w":22,"color":"var(--ex-c-3, #0EA5E9)","label":"Medya","detail":"225 GB"},{"w":14,"color":"var(--ex-c-4, #10B981)","label":"Yedek","detail":"143 GB"},{"w":10,"color":"var(--ex-c-5, #8B5CF6)","label":"Diğer","detail":"102 GB"}]' />
    <!-- Bütçe -->
    <ux7:ExProgress id="progStack2" variant="stacked" label="Çeyrek bütçesi" valueText="%82 kullanıldı" segments='[{"w":40,"color":"var(--ex-c-2, #06B6D4)","label":"Pazarlama","detail":"%40"},{"w":26,"color":"var(--ex-c-6, #EC4899)","label":"Ar-Ge","detail":"%26"},{"w":16,"color":"var(--ex-c-7, #F59E0B)","label":"Operasyon","detail":"%16"}]' />
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ 09 · Inline ════════ -->
<ux7:ExPanel id="panelInline" headerText="09 · Inline — liste satırı içi" expanded="true">
  <ux7:content>
    <ux7:ExProgress id="progInline1" value="92" variant="bar" inline="true" accent="a-3" label="rapor-final.pdf" showValue="true" />
    <ux7:ExProgress id="progInline2" value="64" variant="bar" inline="true" accent="a-1" label="veri-seti.csv" showValue="true" />
    <ux7:ExProgress id="progInline3" value="38" variant="bar" inline="true" accent="a-4" label="arşiv.zip" showValue="true" />
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ 10 · Glass ════════ -->
<ux7:ExPanel id="panelGlass" headerText="10 · Glass — koyu zeminde buzlu" expanded="true">
  <ux7:content>
    <FlexBox wrap="Wrap">
      <ux7:ExProgress id="progGlassBar1" value="68" variant="bar" size="md" accent="a-2" label="Throughput" showValue="true" animated="true" glass="true" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" />
      <ux7:ExProgress id="progGlassBar2" value="94" variant="bar" size="md" accent="a-3" label="Uptime" showValue="true" animated="true" glass="true" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" />
      <ux7:ExProgress id="progGlassCircle" value="81" variant="circle" size="md" accent="a-6" showValue="true" strokeWidth="7" cap="Load" glass="true" class="sapUiSmallMarginBottom" />
    </FlexBox>
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ Accent renkleri (a-1 … a-8) ════════ -->
<ux7:ExPanel id="panelAccent" headerText="Accent — a-1 … a-8 (state=default)" expanded="true">
  <ux7:content>
    <ux7:ExProgress id="progAcc1" value="60" variant="bar" accent="a-1" label="indigo · a-1" showValue="true" animated="true" />
    <ux7:ExProgress id="progAcc2" value="60" variant="bar" accent="a-2" label="cyan · a-2" showValue="true" animated="true" />
    <ux7:ExProgress id="progAcc3" value="60" variant="bar" accent="a-3" label="sky · a-3" showValue="true" animated="true" />
    <ux7:ExProgress id="progAcc4" value="60" variant="bar" accent="a-4" label="teal · a-4" showValue="true" animated="true" />
    <ux7:ExProgress id="progAcc5" value="60" variant="bar" accent="a-5" label="magenta · a-5" showValue="true" animated="true" />
    <ux7:ExProgress id="progAcc6" value="60" variant="bar" accent="a-6" label="purple · a-6" showValue="true" animated="true" />
    <ux7:ExProgress id="progAcc7" value="60" variant="bar" accent="a-7" label="amber · a-7" showValue="true" animated="true" />
    <ux7:ExProgress id="progAcc8" value="60" variant="bar" accent="a-8" label="rose · a-8" showValue="true" animated="true" />
  </ux7:content>
</ux7:ExPanel>

<!-- ════════ Canlı kontrol ════════ -->
<ux7:ExPanel id="panelLive" headerText="Live — setValue() / +10 / −10 / reset" expanded="true">
  <ux7:content>
    <ux7:ExProgress id="progLive" value="20" variant="bar" size="lg" accent="a-1" bubble="true" showValue="true" animated="true" label="Canlı bar" complete="onProgressComplete" />
    <FlexBox class="sapUiSmallMarginTop">
      <Button text="−10" press="onMinus" class="sapUiSmallMarginEnd" />
      <Button text="+10" type="Emphasized" press="onPlus" class="sapUiSmallMarginEnd" />
      <Button text="Reset" press="onReset" />
    </FlexBox>
  </ux7:content>
</ux7:ExPanel>