@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

package/data/components/form-label-status-indicator.md

@@ -0,0 +1,1083 @@
+---
+component: fd-form-label
+title: Components/Status Indicator
+category: Components
+selector: fd-form-label
+cssFile: form-label.css
+sourcePath: packages/styles/stories/Components/status-indicator/status-indicator.stories.js
+tags: []
+dependencies: ["form-label","status-indicator"]
+relatedComponents: ["form-label","status-indicator"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.620Z
+---
+
+# Components/Status Indicator
+
+The status indicator displays a SVG images that indicate a pictorial representation of an object.
+It allows users to fill the content on a numeric scale, typically from 1 (lowest) to 100 (highest) as percentage.
+
+##Usage
+Use the status indicator in Grids, tables, or in a dialog box.
+
+## Usage Guidelines
+
+Use the status indicator in Grids, tables, or in a dialog box.
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `form-label.css`
+- `status-indicator.css`
+
+## Installation
+
+```bash
+npm install fundamental-styles
+```
+
+```html
+<!-- Include theme -->
+<link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
+
+<!-- Include component CSS -->
+<link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/status-indicator.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="example-container">
+    <span class="fd-form-label">Small size :</span>
+    <div class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--sm" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="35%" tabindex=0 aria-label=" Euro Status Indicator small size" focusable="true" title="35% with small size">
+        <svg id="__shape0__box1-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path1">
+                <defs>
+                    <linearGradient id="__path1-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.35" stop-color="white"></stop>
+                        <stop offset="0.35" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path1-mask">
+                        <path id="__path1-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path1-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path1-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path1-mask)">
+                </path>
+                <path id="__path1-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Medium size(Default) :</span>
+    <div class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--md" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="50%" tabindex=0 aria-label="Euro Status Indicator Medium default size" focusable="true" title="50% with default medium size">
+        <svg id="__shape0__box2-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path11">
+                <defs>
+                    <linearGradient id="__path11-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.5" stop-color="white"></stop>
+                        <stop offset="0.5" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path11-mask">
+                        <path id="__path11-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path11-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path11-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path11-mask)">
+                </path>
+                <path id="__path11-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Large Size :</span>
+    <div class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="80%" tabindex=0 aria-label="Euro Status Indicator large size" focusable="true" title="80% with large size">
+        <svg id="__shape0__box3-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path12">
+                <defs>
+                    <linearGradient id="__path12-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.80" stop-color="white"></stop>
+                        <stop offset="0.80" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path12-mask">
+                        <path id="__path12-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path12-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path12-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path12-mask)">
+                </path>
+                <path id="__path12-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Extra Large Size :</span>
+    <div class="fd-status-indicator fd-status-indicator--xl" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="0%" tabindex=0 aria-label="Euro Status Indicator Extra Large size" focusable="true" title="0% with size extra large">
+        <svg id="__shape0__box4-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path13">
+                <defs>
+                    <linearGradient id="__path13-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0" stop-color="white"></stop>
+                        <stop offset="0" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path13-mask">
+                        <path id="__path13-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path13-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path13-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path13-mask)">
+                </path>
+                <path id="__path13-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+```
+
+## Related Components
+
+This component works with or depends on:
+
+- `form-label`
+- `status-indicator`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--colon`
+- `--disabled`
+- `--inline-help`
+- `--required`
+- `--sapField_RequiredColor`
+- `--sapField_TextColor`
+- `--sapFontLargeSize`
+- `--sapFontSize`
+- `--stand-alone`
+- `--unit-description`
+- `--wrap`
+
+## Examples
+
+### Sizes
+
+| **Size**       | **rem**    | **Modifier class**        |
+| :----------    | :--------- | -----------------------:  |
+| Small          | 0.75rem    | \
+
+```html
+<div class="example-container">
+    <span class="fd-form-label">Small size :</span>
+    <div class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--sm" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="35%" tabindex=0 aria-label=" Euro Status Indicator small size" focusable="true" title="35% with small size">
+        <svg id="__shape0__box1-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path1">
+                <defs>
+                    <linearGradient id="__path1-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.35" stop-color="white"></stop>
+                        <stop offset="0.35" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path1-mask">
+                        <path id="__path1-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path1-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path1-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path1-mask)">
+                </path>
+                <path id="__path1-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Medium size(Default) :</span>
+    <div class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--md" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="50%" tabindex=0 aria-label="Euro Status Indicator Medium default size" focusable="true" title="50% with default medium size">
+        <svg id="__shape0__box2-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path11">
+                <defs>
+                    <linearGradient id="__path11-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.5" stop-color="white"></stop>
+                        <stop offset="0.5" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path11-mask">
+                        <path id="__path11-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path11-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path11-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path11-mask)">
+                </path>
+                <path id="__path11-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Large Size :</span>
+    <div class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="80%" tabindex=0 aria-label="Euro Status Indicator large size" focusable="true" title="80% with large size">
+        <svg id="__shape0__box3-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path12">
+                <defs>
+                    <linearGradient id="__path12-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.80" stop-color="white"></stop>
+                        <stop offset="0.80" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path12-mask">
+                        <path id="__path12-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path12-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path12-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path12-mask)">
+                </path>
+                <path id="__path12-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Extra Large Size :</span>
+    <div class="fd-status-indicator fd-status-indicator--xl" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="0%" tabindex=0 aria-label="Euro Status Indicator Extra Large size" focusable="true" title="0% with size extra large">
+        <svg id="__shape0__box4-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path13">
+                <defs>
+                    <linearGradient id="__path13-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0" stop-color="white"></stop>
+                        <stop offset="0" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path13-mask">
+                        <path id="__path13-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path13-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path13-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path13-mask)">
+                </path>
+                <path id="__path13-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+```
+
+### Fill values
+
+To display fill values with the status indicator i.e 'critical,negative,positive', add the \
+
+```html
+<div  class="example-container">
+    <span class="fd-form-label">Negative Filling :</span>
+    <div class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="35%" tabindex=0 aria-label="Euro Status Indicator With Negative Filling" focusable="true" title="35% fill with negative color">
+        <svg id="__shape0__box5-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path21">
+                <defs>
+                    <linearGradient id="__path21-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.35" stop-color="white"></stop>
+                        <stop offset="0.35" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path21-mask">
+                        <path id="__path21-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path21-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path21-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path21-mask)">
+                </path>
+                <path id="__path21-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Critical Filling :</span>
+    <div class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="60%" tabindex=0 aria-label="Euro Status Indicator With Critical Filling" focusable="true" title="60% with critical color filling">
+        <svg id="__shape0__box6-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path22">
+                <defs>
+                    <linearGradient id="__path22-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.6" stop-color="white"></stop>
+                        <stop offset="0.6" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path22-mask">
+                        <path id="__path22-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path22-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path22-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path22-mask)">
+                </path>
+                <path id="__path22-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Positive Filling :</span>
+    <div class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="100%" tabindex=0 aria-label="Euro Status Indicator With Positive Filling" focusable="true" title="100% with Positive color filling">
+        <svg id="__shape0__box7-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path23">
+                <defs>
+                    <linearGradient id="__path23-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="1" stop-color="white"></stop>
+                        <stop offset="1" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path23-mask">
+                        <path id="__path12-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path23-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path23-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path23-mask)">
+                </path>
+                <path id="__path23-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+```
+
+### Status Indicator With Label
+
+To display label values with the Status indicator i.e label and indicator image, add the \
+
+```html
+<div class="example-container">
+    <span class="fd-form-label">Top Label :</span>
+    <div class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--lg"  aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="100%" tabindex=0 aria-label="Euro Status Indicator With Labelled On Top" focusable="true" title="100% with label on top">
+        <span class="fd-status-indicator__label fd-status-indicator__label--lg fd-status-indicator__label--top">100%</span>
+        <svg id="__shape0__box9-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path25">
+                <defs>
+                    <linearGradient id="__path25-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="1" stop-color="white"></stop>
+                        <stop offset="1" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path25-mask">
+                        <path id="__path25-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path25-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path25-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path25-mask)">
+                </path>
+                <path id="__path25-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Bottom Label :</span>
+    <div class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="100%" tabindex=0 aria-label="Euro Status Indicator With Labelled On Bottom" focusable="true" title="100% with label on bottom">
+        <svg id="__shape0__box10-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path26">
+                <defs>
+                    <linearGradient id="__path26-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="1" stop-color="white"></stop>
+                        <stop offset="1" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path26-mask">
+                        <path id="__path26-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path26-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path26-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path26-mask)">
+                </path>
+                <path id="__path26-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+        <span class="fd-status-indicator__label fd-status-indicator__label--lg fd-status-indicator__label--bottom">100%</span>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Left Label :</span>
+    <div class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--horizontal-label fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="100%" tabindex=0 aria-label="Euro Status Indicator With Labelled On Left" focusable="true" title="100% with label on left">
+        <span class="fd-status-indicator__label fd-status-indicator__label--lg fd-status-indicator__label--left">100%</span>
+        <svg id="__shape0__box12-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 36 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path261">
+                <defs>
+                    <linearGradient id="__path261-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="1" stop-color="white"></stop>
+                        <stop offset="1" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path261-mask">
+                        <path id="__path261-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path261-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path261-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path261-mask)">
+                </path>
+                <path id="__path261-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Right Label :</span>
+    <div class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--horizontal-label fd-status-indicator--lg"  aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="100%" tabindex=0 aria-label="Euro Status Indicator With Labelled On Right" focusable="true" title="100% with label on right">
+        <svg id="__shape0__box101-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 16 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path262">
+                <defs>
+                    <linearGradient id="__path262-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="1" stop-color="white"></stop>
+                        <stop offset="1" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path262-mask">
+                        <path id="__path262-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path262-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path262-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path262-mask)">
+                </path>
+                <path id="__path262-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+        <span class="fd-status-indicator__label fd-status-indicator__label--lg fd-status-indicator__label--right">100%</span>
+    </div>
+</div>
+```
+
+### Status Indicator With Linear filling
+
+To display Linear filling from left to right instead default bottom to top approach type of the status indicator Object, The object can be filled based on changing the value of  \
+
+```html
+<div class="example-container">
+    <span class="fd-form-label">Left to Right fill :</span>
+    <div class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="80%" tabindex=0 aria-label="Euro status indicator animated left to right filling " focusable="true" title="80% fill from left to right">
+        <svg id="__shape0__box32a-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path32a">
+                <defs>
+                    <linearGradient id="__path32a-gradient" x1="0" y1="0" x2="1" y2="0">
+                        <stop offset="0.8" stop-color="white">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+
+                        <stop offset="0.8" stop-color="transparent">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+                    </linearGradient>
+                    <mask id="__path32a-mask">
+                        <path id="__path27-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path32a-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path32a-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path32a-mask)">
+                </path>
+                <path id="__path32a-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+<div class="example-container">
+    <span class="fd-form-label">Bottom to Top fill</span>
+    <div class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--lg" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="80%" tabindex=0 aria-label="Euro status indicator animated bottom up filling" focusable="true" title="80% fill from bottom to top">
+        <svg id="__shape0__box33-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path33">
+                <defs>
+                    <linearGradient id="__path33-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.8" stop-color="white">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+
+                        <stop offset="0.8" stop-color="transparent">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+                    </linearGradient>
+                    <mask id="__path33-mask">
+                        <path id="__path33-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path33-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path33-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path33-mask)">
+                </path>
+                <path id="__path33-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+```
+
+### Status Indicator With Coreographed filling
+
+Example to demonstrate the order dispatch from the manufacturing unit
+
+```html
+<div class="example-container">
+    <div class="fd-status-indicator fd-status-indicator--positive coreographed fd-status-indicator--md"
+        aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="70%" tabindex="0"
+        aria-label="Status Indicator example for order dispatching" focusable="true"
+        title="Fill object to form single filling pattern">
+        <svg id="__shape0__box32-24-cart" class="fd-status-indicator__svg"
+            version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet"
+            x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path32"
+                >
+                <defs>
+                    <linearGradient id="__path32-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="1" stop-color="white"></stop>
+                        <stop offset="1" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path32-mask">
+                        <path id="__path32-mask-shape" d="M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0
+                            l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8
+                            c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z" stroke-width="0"
+                            stroke="white" fill="url(#__path32-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path32-shape" d="M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0
+                    l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8
+                    c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z" stroke-width="0"
+                    stroke="#89919A " mask="url(#__path32-mask)">
+                </path>
+                <path id="__path32-shape-border" d="M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0
+                    l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8
+                    c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z" stroke-width="0.25"
+                    stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+        <svg id="__shape0__box28-24-euro"
+            class="fd-status-indicator__svg fd-status-indicator--negative" version="1.1"
+            xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0"
+            width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path28"
+                >
+                <defs>
+                    <linearGradient id="__path28-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="1" stop-color="white"></stop>
+                        <stop offset="1" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path28-mask">
+                        <path id="__path28-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z"
+                            stroke-width="0" stroke="white" fill="url(#__path28-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path28-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z"
+                    stroke-width="0" stroke="#89919A " mask="url(#__path28-mask)">
+                </path>
+                <path id="__path28-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z"
+                    stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+        <svg id="__shape0__box29-24-factory" version="1.1"
+            class="fd-status-indicator__svg fd-status-indicator--critical" xlmns="http://www.w3.org/2000/svg"
+            viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path29"
+                >
+                <defs>
+                    <linearGradient id="__path29-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="1" stop-color="white"></stop>
+                        <stop offset="1" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path29-mask">
+                        <path id="__path29-mask-shape" d="M19.6,12.9l0-3.7l-4.9,3.7V9.2l-5,3.9l-0.3,0l0-9.4H5.8v9.4H4.6V0.5H1l-0.3,24h23.6V9.3L19.6,12.9z M22.2,19.9H17v-2.4h5.2
+                            V19.9z" stroke-width="0" stroke="white" fill="url(#__path29-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path29-shape" d="M19.6,12.9l0-3.7l-4.9,3.7V9.2l-5,3.9l-0.3,0l0-9.4H5.8v9.4H4.6V0.5H1l-0.3,24h23.6V9.3L19.6,12.9z M22.2,19.9H17v-2.4h5.2
+                    V19.9z" stroke-width="0" stroke="#89919A" mask="url(#__path29-mask)">
+                </path>
+                <path id="__path29-shape-border" d="M19.6,12.9l0-3.7l-4.9,3.7V9.2l-5,3.9l-0.3,0l0-9.4H5.8v9.4H4.6V0.5H1l-0.3,24h23.6V9.3L19.6,12.9z M22.2,19.9H17v-2.4h5.2
+                    V19.9z" stroke-width="0.25" stroke="#89919A" fill="transparent">
+                </path>
+            </svg>
+        </svg>
+        <svg id="__shape0__box30-24-truck" version="1.1"
+            class="fd-status-indicator__svg" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 45 25"
+            preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path30"
+                >
+                <defs>
+                    <linearGradient id="__path30-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0.5" stop-color="white"></stop>
+                        <stop offset="0.5" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path30-mask">
+                        <path id="__path30-mask-shape" d="M44.2,13.1l-2.6-6.5c-0.1-0.2-0.6-1.9-2.2-1.9h-6V2.3c0-1-0.8-1.8-1.8-1.8H2.7c-1.1,0-1.9,0.9-1.9,1.9v18.4h3.3h0.5l0,0
+                            c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h0.5h0.6l0,0c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h9.1h2.9l0,0
+                            c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h4.5V13.1z" stroke-width="0" stroke="white"
+                            fill="url(#__path30-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path30-shape" d="M44.2,13.1l-2.6-6.5c-0.1-0.2-0.6-1.9-2.2-1.9h-6V2.3c0-1-0.8-1.8-1.8-1.8H2.7c-1.1,0-1.9,0.9-1.9,1.9v18.4h3.3h0.5l0,0
+                    c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h0.5h0.6l0,0c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h9.1h2.9l0,0
+                    c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h4.5V13.1z" stroke-width="0" stroke="#89919A"
+                    mask="url(#__path30-mask)">
+                </path>
+                <path id="__path30-shape-border" d="M44.2,13.1l-2.6-6.5c-0.1-0.2-0.6-1.9-2.2-1.9h-6V2.3c0-1-0.8-1.8-1.8-1.8H2.7c-1.1,0-1.9,0.9-1.9,1.9v18.4h3.3h0.5l0,0
+                    c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h0.5h0.6l0,0c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h9.1h2.9l0,0
+                    c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h4.5V13.1z" stroke-width="0.25" stroke="#89919A"
+                    fill="transparent">
+                </path>
+            </svg>
+        </svg>
+        <svg id="__shape0__box31-24-plane" version="1.1"
+            class="fd-status-indicator__svg" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25"
+            preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path31"
+                >
+                <defs>
+                    <linearGradient id="__path31-gradient" x1="0" y1="1" x2="0" y2="0">
+                        <stop offset="0" stop-color="white"></stop>
+                        <stop offset="0" stop-color="transparent"></stop>
+                    </linearGradient>
+                    <mask id="__path31-mask">
+                        <path id="__path31-mask-shape" d="M8.8,24.5C8.8,24.5,8.8,24.5,8.8,24.5c-0.1,0-0.2-0.1-0.2-0.1l-2.9-4.9l-0.2-0.2l-4.8-2.9
+                            c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0-0.1,0.1-0.2c0-0.1,0.9-1.2,1-1.4c0,0,0,0,0,0c0.1-0.1,0.2-0.1,0.2-0.1l4.7,1.6l5.5-6.7L2.3,2.8
+                            C2.2,2.7,2.2,2.6,2.2,2.5l0.6-1.1C2.9,1.3,3,1.2,3.1,1.3l12.4,4.8l3.5-3.4c0.9-0.8,1.8-1.4,2.7-1.8c0.2-0.1,0.4-0.1,0.5-0.2
+                            c0,0,1.1-0.4,1.8,0.3c0.7,0.7,0.3,1.7,0.3,1.8c-0.1,0.2-0.1,0.4-0.2,0.5c-0.4,0.9-1,1.8-1.8,2.7l-3.4,3.5l4.8,12.4
+                            c0,0.1,0,0.2-0.1,0.3l-1.1,0.6c-0.1,0.1-0.2,0-0.3-0.1l-6.7-9.8l-6.7,5.5l1.6,4.7c0,0.1,0,0.2-0.1,0.2c0,0,0,0,0,0
+                            c-0.1,0.1-1.3,1-1.4,1C8.9,24.5,8.8,24.5,8.8,24.5z" stroke-width="0" stroke="white"
+                            fill="url(#__path31-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path31-shape" d="M8.8,24.5C8.8,24.5,8.8,24.5,8.8,24.5c-0.1,0-0.2-0.1-0.2-0.1l-2.9-4.9l-0.2-0.2l-4.8-2.9
+                    c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0-0.1,0.1-0.2c0-0.1,0.9-1.2,1-1.4c0,0,0,0,0,0c0.1-0.1,0.2-0.1,0.2-0.1l4.7,1.6l5.5-6.7L2.3,2.8
+                    C2.2,2.7,2.2,2.6,2.2,2.5l0.6-1.1C2.9,1.3,3,1.2,3.1,1.3l12.4,4.8l3.5-3.4c0.9-0.8,1.8-1.4,2.7-1.8c0.2-0.1,0.4-0.1,0.5-0.2
+                    c0,0,1.1-0.4,1.8,0.3c0.7,0.7,0.3,1.7,0.3,1.8c-0.1,0.2-0.1,0.4-0.2,0.5c-0.4,0.9-1,1.8-1.8,2.7l-3.4,3.5l4.8,12.4
+                    c0,0.1,0,0.2-0.1,0.3l-1.1,0.6c-0.1,0.1-0.2,0-0.3-0.1l-6.7-9.8l-6.7,5.5l1.6,4.7c0,0.1,0,0.2-0.1,0.2c0,0,0,0,0,0
+                    c-0.1,0.1-1.3,1-1.4,1C8.9,24.5,8.8,24.5,8.8,24.5z" stroke-width="0" stroke="#89919A "
+                    mask="url(#__path31-mask)">
+                </path>
+                <path id="__path31-shape-border" d="M8.8,24.5C8.8,24.5,8.8,24.5,8.8,24.5c-0.1,0-0.2-0.1-0.2-0.1l-2.9-4.9l-0.2-0.2l-4.8-2.9
+                    c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0-0.1,0.1-0.2c0-0.1,0.9-1.2,1-1.4c0,0,0,0,0,0c0.1-0.1,0.2-0.1,0.2-0.1l4.7,1.6l5.5-6.7L2.3,2.8
+                    C2.2,2.7,2.2,2.6,2.2,2.5l0.6-1.1C2.9,1.3,3,1.2,3.1,1.3l12.4,4.8l3.5-3.4c0.9-0.8,1.8-1.4,2.7-1.8c0.2-0.1,0.4-0.1,0.5-0.2
+                    c0,0,1.1-0.4,1.8,0.3c0.7,0.7,0.3,1.7,0.3,1.8c-0.1,0.2-0.1,0.4-0.2,0.5c-0.4,0.9-1,1.8-1.8,2.7l-3.4,3.5l4.8,12.4
+                    c0,0.1,0,0.2-0.1,0.3l-1.1,0.6c-0.1,0.1-0.2,0-0.3-0.1l-6.7-9.8l-6.7,5.5l1.6,4.7c0,0.1,0,0.2-0.1,0.2c0,0,0,0,0,0
+                    c-0.1,0.1-1.3,1-1.4,1C8.9,24.5,8.8,24.5,8.8,24.5z" stroke-width="0.25" stroke="#89919A"
+                    fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+```
+
+### Status Indicator With Radial filling
+
+To display Radial filling instead of default bottom to top approach type of status indicator Object, The object can be filled based on changing the value of  \
+
+```html
+<div class="example-container">
+    <span class="fd-form-label">Radial Clock filling:</span>
+    <div class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--xl" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="30%" tabindex=0 aria-label="Euro Status Indicator Radial clockwise filling" focusable="true" title="30% radial filling with clockwise">
+        <svg id="__shape0__box34-24" class="fd-status-indicator__svg"  version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path34">
+                <defs>
+                    <radialGradient id="__path34-gradient" cx="43" cy="28" r="30" fx="50%" fy="50%">
+                        <stop offset="0.3" stop-color="white">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="5s" begin="0s"/>
+                        </stop>
+
+                        <stop offset="0.3" stop-color="transparent">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="5s" begin="0s"/>
+                        </stop>
+                    </radialGradient>
+                    <mask id="__path34-mask">
+                        <circle cx="13" cy="13" r="14" stroke="black" stroke-width="3" fill="url(#__path34-gradient)" />
+                    </mask>
+                </defs>
+                <path id="__path34-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path34-mask)">
+                </path>
+                <path id="__path34-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+
+<div class="example-container">
+    <span class="fd-form-label">Radial Counter Clock filling:</span>
+    <div class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--xl" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="30%" tabindex=0 aria-label="Euro Status Indicator Radial clockwise filling" focusable="true" title="30% radial filling with counterclockwise">
+        <svg id="__shape0__box35-24" version="1.1" class="fd-status-indicator__svg" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path35">
+                <defs>
+                    <radialGradient id="__path35-gradient" cx="30" cy="40" r="30" fx="50%" fy="50%">
+                        <stop offset="0.3" stop-color="white">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="5s" begin="0s"/>
+                        </stop>
+
+                        <stop offset="0.3" stop-color="transparent">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="5s" begin="0s"/>
+                        </stop>
+                    </radialGradient>
+                    <mask id="__path35-mask">
+                        <circle cx="13" cy="13" r="14" stroke="black" stroke-width="3" fill="url(#__path35-gradient)" />
+                    </mask>
+                </defs>
+                <path id="__path35-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path35-mask)">
+                </path>
+                <path id="__path35-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+```
+
+### Status Indicator With Angular filling
+
+To display Angular filling instead of default bottom to top approach type of status indicator Object, The object can be filled based on changing the value of  \
+
+```html
+<div class="example-container">
+    <span class="fd-form-label">Angular filling 270 degree:</span>
+    <div class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--xl" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="80%" tabindex=0 aria-label="Euro Status Indicator Angled filling at 270 degree" focusable="true"  title="80% angled filling in 270 degree">
+        <svg id="__shape0__box36-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path36">
+                <defs>
+                    <linearGradient id="__path36-gradient" x1="0" y1="1" x2="1" y2="0">
+                        <stop offset="0.8" stop-color="white">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+
+                        <stop offset="0.8" stop-color="transparent">
+                            <animate attributeName="offset" values="0;0.8" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+                    </linearGradient>
+                    <mask id="__path36-mask">
+                        <path id="__path36-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path36-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path36-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path36-mask)">
+                </path>
+                <path id="__path36-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+
+<div class="example-container">
+    <span class="fd-form-label">Angular filling 40 degree:</span>
+    <div class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--xl" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="50%" tabindex=0 aria-label="Euro Status Indicator Angled filling at 40 degree" focusable="true"  title="50% angled filling in 40 degree">
+        <svg id="__shape0__box37-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path37">
+                <defs>
+                    <linearGradient id="__path37-gradient" x1="1" y1="1" x2="0" y2="0">
+                        <stop offset="0.5" stop-color="white">
+                            <animate attributeName="offset" values="0;0.5" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+
+                        <stop offset="0.5" stop-color="transparent">
+                            <animate attributeName="offset" values="0;0.5" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+                    </linearGradient>
+                    <mask id="__path37-mask">
+                        <path id="__path37-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path37-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path37-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path37-mask)">
+                </path>
+                <path id="__path37-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+
+<div class="example-container">
+    <span class="fd-form-label">Angular filling 98 degree:</span>
+    <div class="fd-status-indicator fd-status-indicator--positive fd-status-indicator--xl" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="50%" tabindex=0 aria-label="Euro Status Indicator Angled filling at 98 degree" focusable="true"  title="50% angled filling in 98 degree">
+        <svg id="__shape0__box38-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path38">
+                <defs>
+                    <linearGradient id="__path38-gradient" x1="0" y1="0" x2="1" y2="1">
+                        <stop offset="0.5" stop-color="white">
+                            <animate attributeName="offset" values="0;0.5" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+
+                        <stop offset="0.5" stop-color="transparent">
+                            <animate attributeName="offset" values="0;0.5" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+                    </linearGradient>
+                    <mask id="__path38-mask">
+                        <path id="__path38-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path38-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path38-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path38-mask)">
+                </path>
+                <path id="__path38-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+
+<div class="example-container">
+    <span class="fd-form-label">Angular filling 140 degree:</span>
+    <div class="fd-status-indicator fd-status-indicator--negative fd-status-indicator--xl" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="40%" tabindex=0 aria-label="Euro Status Indicator Angled filling at 140 degree" focusable="true"  title="40% angled filling in 140 degree">
+        <svg id="__shape0__box39-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+            <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path39">
+                <defs>
+                    <linearGradient id="__path39-gradient" x1="1" y1="0" x2="0" y2="1">
+                        <stop offset="0.4" stop-color="white">
+                            <animate attributeName="offset" values="0;0.4" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+
+                        <stop offset="0.4" stop-color="transparent">
+                            <animate attributeName="offset" values="0;0.4" repeatCount="1" dur="3s" begin="0s"/>
+                        </stop>
+                    </linearGradient>
+                    <mask id="__path39-mask">
+                        <path id="__path39-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                            l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                            c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                            l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path39-gradient)">
+                        </path>
+                    </mask>
+                </defs>
+                <path id="__path39-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path39-mask)">
+                </path>
+                <path id="__path39-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                    l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                    c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                    l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                </path>
+            </svg>
+        </svg>
+    </div>
+</div>
+```
+
+## Accessibility
+
+- Use semantic HTML elements where appropriate
+- Include proper ARIA attributes for interactive elements
+- Ensure keyboard navigation support
+- Provide adequate color contrast
+
+## Source
+
+This documentation was automatically generated from: `packages/styles/stories/Components/status-indicator/status-indicator.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).