title: Progress bar based on start and end date
body: <p>I have been trying to create a progress bar that is made based on the start date and the end date.
  I have a list of 100 projects, some projects started in mid 2017, some in 2018 and some will start in future. My goal is to create a progress bar and reflect it between 2018, 2019, 2020.
  If the project started in 2017 or starts from 2018 January 1st then it should start from beginning else it should start with a relative margin from the start.<a href="https://i.stack.imgur.com/22ihS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/22ihS.png" alt="here is the picture"></a>
  I made this bar with html <code>progress</code> tag. But the problem is that I don't know how to start the bar from mid 2018 if the project date is in future and how to start it from starting of 2018 if the date is in the 2017 or starting of 2018?</p>
  
  <p>Any suggestions and alternatives are welcome.
  thanks!</p>
  
  <pre><code>&lt;progress value="100" min="{{item.End_x0020_Date -item.Start_x0020_Date}}" 
  max="100" style="height: 2rem; margin-top:13px; margin-left: 
  {{item.End_x0020_Date -item.Start_x0020_Date +'px'}};margin-right: 
  {{item.Start_x0020_Date +'px'}}; width: {{item.End_x0020_Date / 10+'%'}}; 
  max-width:100%;"&gt;&lt;/progress&gt;
  </code></pre>