title: How to use bootstrap progress bars
body: <p>This is a foolish question But I have no idea where to begin. 
  I want to use Bootstrap's <a href="http://getbootstrap.com/components/#progress" rel="nofollow">Progress Bars</a>.
  I have a simple todo list app. I want to be able to visually show that 70% of a todo list is complete. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>_todo_item.html.erb</p>
  
  <pre><code>&lt;div class="row clearfix"&gt;
      &lt;% if todo_item.completed? %&gt;
          &lt;div class="complete"&gt;
              &lt;%= link_to complete_todo_list_todo_item_path(@todo_list, todo_item.id), method: :patch do %&gt;
                  &lt;i style="opacity: 0.4;" class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;
              &lt;% end %&gt;
          &lt;/div&gt;
          &lt;div class="todo_item"&gt;
              &lt;p style="opacity: 0.4;"&gt;&lt;strike&gt;&lt;%= todo_item.content %&gt;&lt;/strike&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="trash"&gt;
              &lt;%= link_to todo_list_todo_item_path(@todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } do %&gt;
                  &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;
              &lt;% end %&gt;
          &lt;/div&gt;
      &lt;% else %&gt;
          &lt;div class="complete"&gt;
              &lt;%= link_to complete_todo_list_todo_item_path(@todo_list, todo_item.id), method: :patch do %&gt;
                  &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
              &lt;% end %&gt;
          &lt;/div&gt;
          &lt;div class="todo_item"&gt;
              &lt;p&gt;&lt;%= todo_item.content %&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="trash"&gt;
              &lt;%= link_to todo_list_todo_item_path(@todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } do %&gt;
                  &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;
              &lt;% end %&gt;
          &lt;/div&gt;
      &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>todo_items_controller.rb</p>
  
  <pre><code>class TodoItemsController &lt; 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
  </code></pre>
  
  <p>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.</p>