How to use bootstrap progress bars - ruby-on-rails

Question

This is a foolish question But I have no idea where to begin.
I want to use Bootstrap's Progress Bars.
I have a simple todo list app. I want to be able to visually show that 70% of a todo list is complete.
How would I go about this, or what resources do I need to look at. I can only find information on using the progress bars to display a websites loading progress.
I want to set these up to be dynamic of course. So when a user marks an object as complete, then the progress bar should change as well.
_todo_item.html.erb
<div class="row clearfix">
<% if todo_item.completed? %>
<div class="complete">
<%= link_to complete_todo_list_todo_item_path(#todo_list, todo_item.id), method: :patch do %>
<i style="opacity: 0.4;" class="glyphicon glyphicon-ok"></i>
<% end %>
</div>
<div class="todo_item">
<p style="opacity: 0.4;"><strike><%= todo_item.content %></strike></p>
</div>
<div class="trash">
<%= link_to todo_list_todo_item_path(#todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } do %>
<span class="glyphicon glyphicon-trash"></span>
<% end %>
</div>
<% else %>
<div class="complete">
<%= link_to complete_todo_list_todo_item_path(#todo_list, todo_item.id), method: :patch do %>
<span class="glyphicon glyphicon-ok"></span>
<% end %>
</div>
<div class="todo_item">
<p><%= todo_item.content %></p>
</div>
<div class="trash">
<%= link_to todo_list_todo_item_path(#todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } do %>
<span class="glyphicon glyphicon-trash"></span>
<% end %>
</div>
<% end %>
</div>
todo_items_controller.rb
class TodoItemsController < ApplicationController
before_action :set_todo_list
before_action :set_todo_item, except: [:create]
def create
#todo_item = #todo_list.todo_items.create(todo_item_params)
redirect_to #todo_list
end
def destroy
if #todo_item.destroy
flash[:success] = "Todo List item was deleted"
else
flash[:error] = "Todo List item could not be deleted."
end
redirect_to #todo_list
end
def complete
#todo_item.update_attribute(:completed_at, Time.now)
redirect_to #todo_list, notice: "Todo item completed"
end
private
def set_todo_list
#todo_list = TodoList.find(params[:todo_list_id])
end
def set_todo_item
#todo_item = #todo_list.todo_items.find(params[:id])
end
def todo_item_params
params[:todo_item].permit(:content)
end
end
A users has a todo_list and a todo list has a todo_item. I want to use a progress bar so that I can show a percentage of tasks that have been completed.

Answer 1

If you look at this example, taken from the Bootstrap Docs, you can see the width is set on the .progress-bar element. That width is what sets the 'completeness' of the bar. So for 70% done, set its width to 70%.
Relevant code from Bootstrap:
<div class="progress">
<div class="progress-bar" style="width: 60%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>
</div>

Answer 2

Bootstrap Progress Bar implementation for HTML Forms:
-This scripts creates an event handler.
-When the user switches input element (form-group in this case), it increments the progress bar status by 20% (there are 5 inputs in my form).
let progressBar = document.getElementsByClassName("progress-bar")[0];
$('.form-group').focusout(function() {
let currentValue = parseInt(progressBar.style['width']);
progressBar.style['width']=currentValue+20+"%";
});
You can find some examples here