← All elements
<div class="pw2"><div class="bars"><i></i><i></i><i></i><i></i></div><span>Strong password</span></div>About this layout
A four-segment strength bar that fills and changes colour from weak to strong, using a native progress-like pattern.
How it works
Four short bars grow from the left using transform scaleX with staggered delays, which shows the meter filling. The label below states the strength in words.
Ways to customise it
- Change the colours for weak and medium states.
- Show fewer bars for weaker strength.
- Update the label text.
Good to know
Text such as Strong password is essential because colour alone is not enough. Real strength checks need script or the pattern attribute.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.