<svg width='100%' height='65px' viewBox='0 0 1132 65'>
  <g class='bars'>
    <rect class='bg' fill='#ccc' width='100%' height='25'></rect>
    <rect class='data' fill='#0074d9' width='45%' height='25'></rect>
  </g>
  <g class='markers'>
    <rect fill='#001f3f' x='0%' y='0' width='2px' height='35'></rect>
    <rect fill='#001f3f' x='25%' y='0' width='2px' height='35'></rect>
    <rect fill='#001f3f' x='50%' y='0' width='2px' height='35'></rect>
    <rect fill='#001f3f' x='75%' y='0' width='2px' height='35'></rect>
    <rect text-anchor='' fill='#001f3f' x='1130' y='0' width='2px' height='35'></rect>
  </g>
  <g text-anchor='middle'>
    <text text-anchor='start' fill='#0074d9' x='0' y='60'>0%</text>
    <text fill='#0074d9' x='25%' y='60'>25%</text>
    <text fill='#0074d9' x='50%' y='60'>50%</text>
    <text fill='#0074d9' x='75%' y='60'>75%</text>
    <text text-anchor='end' fill='#0074d9' x='100%' y='60'>100%</text>
  </g>
</svg>

html, body {
  height: 100%;
}

body {
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica";
  cursor: pointer;
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.