title: Feedback modal with star rating
body: <p>I have a feedback modal in which I have ratings which simply using +,_ signs for various types of ratings - Poor, fair, good, very good, Excellent. Now I have to move this design into star rating. My modal is bootstrap modal.
  Is there a way I can move my code to star rating? I have no idea how to implement the star animation for star rating.</p>
  
  <p>My current code for feedback modal is below</p>
  
  <pre><code>      &lt;div class="modal fade" id="myModal1" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
  
    &lt;!-- Modal content--&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Feedback&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
      &lt;div id="message" style="text-align: center; color: green;"&gt;&lt;/div&gt;
                                      &lt;div class="form-group"&gt; 
                                      &lt;span id="updatecapacitymodalerrortext" style="color:red"&gt;&lt;/span&gt; 
                                        &lt;/div&gt;
                                          &lt;div class="form-group" &gt;
                                          &lt;/br&gt;
                                          &amp;nbsp;&lt;label&gt;Your Name : &lt;/label&gt;
                                          &lt;/br&gt;&lt;input type="text" class="form-control" size="10" style="width:50px;"  id="capacity_txt_modal" /&gt;
                                          &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                                          &lt;br/&gt;
  
  &lt;div class="feedback"&gt;
        &lt;div class="feedbackCl" &gt;
        &lt;input id="overall_0" name="overall" id="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l"&gt;
        &lt;label for="overall_0" class="labelClass"&gt;
          &lt;span class="sight"&gt;— —&lt;/span&gt;
          &lt;span class="screen_reader" id="o1-l"&gt;Poor&lt;/span&gt;
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="feedbackCl"&gt;
        &lt;input id="overall_1" name="overall"  id="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l"&gt;
        &lt;label for="overall_1" class="labelClass"&gt;
          &lt;span class="sight"&gt;—&lt;/span&gt;
          &lt;span class="screen_reader" id="o2-l"&gt;Fair&lt;/span&gt;
        &lt;/label&gt;
  
      &lt;/div&gt;
      &lt;div class="feedbackCl"&gt;
        &lt;input id="overall_2" name="overall" id="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l"&gt;
        &lt;label for="overall_2" class="labelClass"&gt;
          &lt;span class="sight"&gt;+ —&lt;/span&gt;
          &lt;span class="screen_reader" id="o3-l"&gt;Good&lt;/span&gt;
        &lt;/label&gt;
      &lt;/div&gt;
       &lt;div class="feedbackCl"&gt;
        &lt;input id="overall_3" name="overall" id="overall" type="radio" value="4" tabindex="0" aria-describedby="o4-l"&gt;
        &lt;label for="overall_3" class="labelClass"&gt;
          &lt;span class="sight"&gt;+&lt;/span&gt;
          &lt;span class="screen_reader" id="o4-l"&gt;Very Good&lt;/span&gt;
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="feedbackCl"&gt;
        &lt;input id="overall_4" name="overall" id="overall" type="radio" value="5" tabindex="0" aria-describedby="o5-l"&gt;
        &lt;label for="overall_4" class="labelClass"&gt;
          &lt;span class="sight"&gt;+ +&lt;/span&gt;
          &lt;span class="screen_reader" id="o5-l"&gt;Excellent&lt;/span&gt;
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;label for="input-1" class="control-label"&gt;Rate This&lt;/label&gt;
      &lt;input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="1"&gt;
      &lt;button type="button" id="updateCapacityBtn" class="btn btn-info "&gt;Save&lt;/button&gt;
      &lt;button type="button" id="capacityModalClose" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="modal-footer"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;  
  </code></pre>