| <!DOCTYPE html> |
| <section> |
| <div class="progress"><div class="track"><div class="fill"></div></div></div> |
| |
| <div class="progress indeterminate"><div class="track"><div class="fill"></div></div></div> |
| </section> |
| |
| <style> |
| body { |
| font-family: monospace; |
| background-color: black; |
| color: green; |
| } |
| |
| section { |
| display: flex; |
| flex-direction: column; |
| gap: 2em; |
| } |
| |
| .progress { |
| box-sizing: border-box; |
| background-color: transparent; |
| width: 100%; |
| } |
| |
| .track { |
| background-color: transparent; |
| border: 1px solid green; |
| height: 1em; |
| } |
| |
| .fill { |
| height: 100%; |
| background-color: green; |
| width: 50%; |
| } |
| |
| .indeterminate .fill { |
| width: 0; |
| } |
| </style> |
