'%3e%3cpath%20d='M6.240%200.312Q4.632%200.312%203.492-0.516Q2.352-1.344%201.752-2.820Q1.152-4.296%201.152-6.240Q1.152-8.136%201.716-9.600Q2.280-11.064%203.396-11.916Q4.512-12.768%206.144-12.768Q7.440-12.768%208.280-12.252Q9.120-11.736%209.624-10.848Q10.128-9.960%2010.416-8.880L10.896-8.880Q10.704-9.936%2010.548-11.088Q10.392-12.240%2010.392-13.056L10.392-16.920L13.032-16.920L13.032-6.144L13.032%200L10.752%200L10.848-3.456L10.416-3.456Q9.984-1.704%208.988-0.696Q7.992%200.312%206.240%200.312M6.960-1.896Q8.088-1.896%208.856-2.556Q9.624-3.216%2010.020-4.176Q10.416-5.136%2010.416-6.024L10.416-6.360Q10.416-6.960%2010.200-7.680Q9.984-8.400%209.564-9.060Q9.144-9.720%208.496-10.140Q7.848-10.560%206.960-10.560Q5.472-10.560%204.668-9.324Q3.864-8.088%203.864-6.192Q3.864-4.248%204.692-3.072Q5.520-1.896%206.960-1.896'%20fill='%23707b3a'/%3e%3cpath%20d='M18.200%200L15.608%200L15.608-12.480L18.200-12.480L18.200%200M16.904-15.936L13.736-13.824L13.736-16.032L16.904-18.144L20.072-16.032L20.072-13.824'%20fill='%23707b3a'/%3e%3cpath%20d='M23.392%200L20.800%200L20.800-7.680L20.800-12.480L23.056-12.480L22.912-8.592L23.320-8.592Q23.800-10.728%2024.868-11.760Q25.936-12.792%2027.712-12.792Q29.800-12.792%2030.892-11.304Q31.984-9.816%2031.984-6.768L31.984%200L29.344%200L29.344-6.504Q29.344-8.568%2028.708-9.552Q28.072-10.536%2026.848-10.536Q25.768-10.536%2025.012-9.852Q24.256-9.168%2023.848-8.064Q23.440-6.960%2023.392-5.664'%20fill='%23707b3a'/%3e%3cpath%20d='M39.888%200.312Q36.912%200.312%2035.304-1.392Q33.696-3.096%2033.696-6.024Q33.696-7.992%2034.404-9.516Q35.112-11.040%2036.444-11.916Q37.776-12.792%2039.672-12.792Q42.288-12.792%2043.800-11.040Q45.312-9.288%2045.144-5.808L36.216-5.760Q36.288-3.744%2037.248-2.736Q38.208-1.728%2039.912-1.728Q41.376-1.728%2042.072-2.400Q42.768-3.072%2043.032-3.984L45.312-3.456Q44.880-1.704%2043.548-0.696Q42.216%200.312%2039.888%200.312M39.696-10.656Q38.376-10.656%2037.488-9.804Q36.600-8.952%2036.336-7.368L42.720-7.416Q42.624-9.072%2041.772-9.864Q40.920-10.656%2039.696-10.656'%20fill='%23707b3a'/%3e%3cpath%20d='M51.200%200.264Q49.328%200.264%2048.440-0.744Q47.552-1.752%2047.552-3.840L47.552-10.344L45.704-10.344L45.752-12.480L46.952-12.480Q47.576-12.480%2047.876-12.684Q48.176-12.888%2048.272-13.416L48.512-15.264L50.072-15.264L50.072-12.480L53.504-12.480L53.504-10.296L50.072-10.296L50.072-3.912Q50.072-2.976%2050.504-2.568Q50.936-2.160%2051.776-2.160Q52.232-2.160%2052.700-2.268Q53.168-2.376%2053.600-2.688L53.600-0.168Q52.880%200.072%2052.280%200.168Q51.680%200.264%2051.200%200.264'%20fill='%23707b3a'/%3e%3cpath%20d='M59.320%200.264Q57.448%200.264%2056.560-0.744Q55.672-1.752%2055.672-3.840L55.672-10.344L53.824-10.344L53.872-12.480L55.072-12.480Q55.696-12.480%2055.996-12.684Q56.296-12.888%2056.392-13.416L56.632-15.264L58.192-15.264L58.192-12.480L61.624-12.480L61.624-10.296L58.192-10.296L58.192-3.912Q58.192-2.976%2058.624-2.568Q59.056-2.160%2059.896-2.160Q60.352-2.160%2060.820-2.268Q61.288-2.376%2061.720-2.688L61.720-0.168Q61%200.072%2060.400%200.168Q59.800%200.264%2059.320%200.264'%20fill='%23707b3a'/%3e%3cpath%20d='M68.808%200.312Q65.832%200.312%2064.224-1.392Q62.616-3.096%2062.616-6.024Q62.616-7.992%2063.324-9.516Q64.032-11.040%2065.364-11.916Q66.696-12.792%2068.592-12.792Q71.208-12.792%2072.720-11.040Q74.232-9.288%2074.064-5.808L65.136-5.760Q65.208-3.744%2066.168-2.736Q67.128-1.728%2068.832-1.728Q70.296-1.728%2070.992-2.400Q71.688-3.072%2071.952-3.984L74.232-3.456Q73.800-1.704%2072.468-0.696Q71.136%200.312%2068.808%200.312M68.616-10.656Q67.296-10.656%2066.408-9.804Q65.520-8.952%2065.256-7.368L71.640-7.416Q71.544-9.072%2070.692-9.864Q69.840-10.656%2068.616-10.656'%20fill='%23707b3a'/%3e%3cpath%20d='M76.520%200.288Q74.744%200.288%2074.744-1.296Q74.744-2.904%2076.520-2.904Q78.344-2.904%2078.344-1.296Q78.344%200.288%2076.520%200.288'%20fill='%23707b3a'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Design system
Components
DProgressBar.
Linear progress bar: 3px olive fill on pearl-200 track, smooth easing on width changes. Used in the sticky form footer of multi-step forms. value is normalized 0..1 (clamped).
Interactive
interactive
Range live. Glisse le slider pour voir l'easing sur la largeur. Valeur clampée à [0, 1]
value = 0.40
Stops
stops
Six paliers de 0 à 100%. Référence visuelle pour calibrer la valeur dans un design
0%
20%
40%
60%
80%
100%