title: I'd like to create a progress bar
body: <p>I need to show the progress for my <code>todo list</code></p>
  
  <p>Here is the code for my progress bar</p>
  
   
  
  
  
  
  
  
  <pre><code>&lt;!-- todo list --&gt;
  &lt;div class="col-md-5"&gt;
      &lt;div class="panel panel-default panel-hovered mb20 todo" id="todoApp"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;span&gt;Todo List&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;ul class="list-unstyled todo-list"&gt;
  
              &lt;/ul&gt;
  
              &lt;!-- Add todo input --&gt;
              &lt;form id="input-todo" class="input-todo"&gt;
                      &lt;input placeholder="Write some todo task here..." type="text"&gt;
              &lt;/form&gt;
          &lt;/div&gt; &lt;!-- #end panel-body --&gt;
          &lt;div class="panel-footer todo-foot clearfix" id="todo-filters"&gt;
              &lt;div class="left"&gt;
                      &lt;button class="btn btn-pink btn-xs right toggle-all"&gt;Toggle All&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="right"&gt;
                      &lt;span class="remaining btn btn-xs btn-default"&gt;left&lt;/span&gt;
                      &lt;button class="btn btn-pink btn-xs clear-completed"&gt;Clear Completed&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- #end panel --&gt;
  </code></pre>
  
  <p>Here is my <code>todo</code> code</p>
  
  <pre><code>    jQuery(function(){{
  function addTodoHtml(todo,index)
  {
  var html='&lt;li data-index="'+index+'" class="'+(todo.completed?"completed":"")+'"&gt;
      &lt;div class="ui-checkbox ui-checkbox-pink"&gt;
                          &lt;label&gt;&lt;input type="checkbox" class="toggle" '+ todo.completed?"checked":"")+'/&gt;
                          &lt;span&gt;&lt;/span&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="todo-title"&gt;&lt;p&gt;'+todo.title+'&lt;/p&gt;&lt;form class="todo-edit"&gt;
                          &lt;input type="text"/&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;span class="destroy ion ion-close right"&gt;&lt;/span&gt;
                  &lt;/li&gt;';$todoApp.find(".todo-list").append(html)}function reArrangeIndex(){$todoApp.find(".todo-list &gt; li").each(function(i){$(this).data("index",i)})}function removeTodo(){var todo=$(this).parent(),isCompleted=todo.find("input.toggle")[0].checked,todoNo=todo.index();todo.remove(),scope.remainingCount-=isCompleted?0:1,todos.splice(todoNo,1),todoStore.put(todos),reArrangeIndex(),$todoApp.find(".todo-foot .remaining").html(scope.remainingCount+" left")}function toggleCompleted(){var todo=$(this).parents("li"),todoNo=todo.index(),isCompleted=this.checked;console.log(todoNo),scope.remainingCount+=isCompleted?-1:1,todos[todoNo].completed=isCompleted,todoStore.put(todos),todo.toggleClass("completed"),$todoApp.find(".todo-foot .remaining").html(scope.remainingCount+" left")}function markAll(){var $todos=$todoApp.find(".todo-list li"),rc=0,allChecked=!1;todos.forEach(function(todo){todo.completed||++rc}),0==rc&amp;&amp;(allChecked=!0),todos.forEach(function(todo){todo.completed=!allChecked}),scope.remainingCount=allChecked?0:todos.length,todoStore.put(todos),$todos.each(function(i,todo){var $t=$(todo),input=$t.find("input.toggle")[0];allChecked?($(todo).removeClass("completed"),input.checked=!1):($(todo).addClass("completed"),input.checked=!0)}),$todoApp.find(".todo-foot .remaining").html(scope.remainingCount+" left")}function addTodo(e){e.preventDefault();var todoTitle=$(this).children().val();scope.newTodo=todoTitle;var newTodo={title:scope.newTodo.trim(),completed:!1};0!=scope.newTodo.length&amp;&amp;(todos.push(newTodo),todoStore.put(todos),scope.newTodo="",scope.remainingCount++,addTodoHtml(newTodo,todos.length-1),setTimeout(function(){$todoApp.find(".todo-list li:last-child .destroy").on("click touchstart",removeTodo)}),$(this).children().val(""),$todoApp.find(".todo-foot .remaining").html(scope.remainingCount+" left"))}function doneEditing(todo,todoTitle,isCompleted,todoNo){todo.removeClass("editing"),todoTitle=todoTitle.trim(),todos[todoNo].title=todoTitle,todoTitle||scope.removeTodo(todo,isCompleted,todoNo),todoStore.put(todos),todo.find(".todo-title p").html(todoTitle)}function editTodo(){var todo=$(this).parent(),todoNo=todo.index(),stodo=todos[todoNo],isCompleted=stodo.completed;todo.addClass("editing"),$(this).find("input").val(stodo.title.trim()),$todoApp.find(".todo-title .todo-edit").on("submit",function(e){e.preventDefault();var todoTitle=$(this).find("input").val();doneEditing(todo,todoTitle,isCompleted,todoNo)})}function clearCompleted(){todos=todos.filter(function(val){return!val.completed}),todoStore.put(todos);var $todos=$todoApp.find(".todo-list li").filter(function(i,todo){return $(todo).hasClass("completed")});$todos.remove()}var $todoApp=$("#todoApp"),STORAGE_ID="_todo-task",todoStore={todos:[],get:function(){return JSON.parse(localStorage.getItem(STORAGE_ID))},put:function(todos){localStorage.setItem(STORAGE_ID,JSON.stringify(todos))
  }},demoTodos=[{title:"Eat healthy, Eat fresh",completed:!1},{title:"Donate some money",completed:!0},{title:"Wake up at 5:00 A.M",completed:!1},{title:"Hangout with friends at 12:00",completed:!1},{title:"Another todo on the list. Add as many you want.",completed:!1},{title:"The last but not the least.",completed:!0}],todos=todoStore.get()||demoTodos,scope={newTodo:"",remainingCount:todos.filter(function(val){return 0==val.completed}).length,editedTodo:null,originalTodo:"",statusFilter:null,edited:!1,todoshow:"all",allChecked:!1};todos.forEach(function(todo,index){addTodoHtml(todo,index)}),$todoApp.find(".todo-foot .remaining").html(scope.remainingCount+" left"),$todoApp.find(".destroy").on("click touchstart",removeTodo),$todoApp.find("li input.toggle").on("change",toggleCompleted),$todoApp.find("#input-todo").on("submit",addTodo),$todoApp.find(".todo-title").on("dblclick",editTodo),$todoApp.find(".todo-foot .toggle-all").on("click touchstart",markAll),$todoApp.find(".todo-foot .clear-completed").on("click touchstart",clearCompleted)}function
      _init(){initSparklines(),initC3Chart(),initEasyPieChart(),initRating(),TodoApp()}var $dash=$(".page-dashboard");_init()}); 
  </code></pre>