Variable name	Default value	Description
`--cb-bar`	`rgba(0, 0, 0, 0.3)`	Background color for the bar component.
`--cl-bar`	`purple`	Background color for the after pseudo-element in the bar component.
`--w-bar`	`0%`	Width for the after pseudo-element in the bar component.
`--bt-bar`	`purple`	Background color for the before pseudo-element in the bar component.
`--ct-bar`	`#fff`	Text color for the before pseudo-element in the bar component.
`--p-bar`	`-50%`	TranslateX value for the before pseudo-element in the bar component.

CSS Class	Description
`bar`	Base class for the bar component. Establishes background, display, height, position, and width.
`bar::after`	After pseudo-element for the bar class. Includes animation, background, position, and width.
`bar-linear`	Variation of the bar class with different animation on the after pseudo-element.
`bar-s`	Modified bar class with specific styles and animation for the after pseudo-element.
`bar-s::before`	Before pseudo-element for the bar-s class. Defines background, border-radius, content, color, font-size, and positioning.