## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) # Progress Bar Category: feedback Description: Linear Progress ## Small Variant ### SenangStart CSS Code ```html <div space="w:[100%] h:tiny-2x m-b:medium" visual="bg:neutral-200 rounded:round"> <div space="h:tiny-2x w:[45%]" visual="bg:blue-600 rounded:round"></div> </div> ``` ### Tailwind CSS Code ```html <div class="w-full bg-neutral-200 rounded-full h-1.5 mb-4"> <div class="bg-blue-600 h-1.5 rounded-full" style="width: 45%"></div> </div> ``` ## Medium Variant ### SenangStart CSS Code ```html <div space="w:[100%] h:small-2x m-b:medium" visual="bg:neutral-200 rounded:round"> <div space="h:small-2x w:[45%]" visual="bg:blue-600 rounded:round"></div> </div> ``` ### Tailwind CSS Code ```html <div class="w-full bg-neutral-200 rounded-full h-2.5 mb-4"> <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> </div> ``` ## Large Variant ### SenangStart CSS Code ```html <div space="w:[100%] h:medium m-b:medium" visual="bg:neutral-200 rounded:round"> <div space="h:medium w:[45%]" visual="bg:blue-600 rounded:round"></div> </div> ``` ### Tailwind CSS Code ```html <div class="w-full bg-neutral-200 rounded-full h-4 mb-4"> <div class="bg-blue-600 h-4 rounded-full" style="width: 45%"></div> </div> ```