stdf/doc/components/progressLoop/guide_en.md

Progress loop size and width

The size of the progress loop, ProgressLoop, is determined by the width of the outer container. The component uses an SVG rendering with a canvas size of 24*24, which fills the parent container. The width, strokeWidth, theoretically supports any value between 0 to 12, but when the width is too large, the circular ring may not be aesthetically pleasing.

useSlot

When useSlot is true, the default percentage text is no longer used for the percentage content, and instead, the slot passed in is used for rendering.

CSS injection

The injClass and trackInjClass parameters can be used to inject CSS names (not limited to Tailwind CSS) into the activating progress ring and track ring elements inside the component. This will provide more possibilities for customizing the component style. In the example, custom progress loop colors are achieved using injClass and trackInjClass.

If the injected class is not effective, add "!" before the class name. For the reference, please see the Tailwind Important modifier.