How can I use progress bar from Bootstrap in my Rails App? - ruby-on-rails

Question

I'm looking for an example that use progres bar of twitter bootstrap in Rails App.
I'm new in web developer ror and I don't know do it.
I can use other progress bar, but in Rails APp...

Answer 1

Try using a gem that adds bootstrap to your asset pipeline, that will make your life easier like this one: https://github.com/thomas-mcdonald/bootstrap-sass
once you add the gem import the JS and Css to your asset pipeline like this:
create a css.scss file. in you assets>stylesheets folder
boot.css.scss:
$navbarBackground: #000;
$navbarText: #fff;
$navbarLinkColor: #888;
$navbarBrandColor: #FFF;
#import "bootstrap";
#import "bootstrap-responsive";
application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
after the gem is in your pipeline restart the app and you can add the progressbar like this:
<div class="span8 progress progress-striped active"><div id="bar" class="bar" style="width: 100%;"></div></div>

Answer 2

There exists a gem ;-)
https://github.com/yrgoldteeth/css3-progress-bar-rails
For animating the progress bar you have to use javaScript

Answer 3

I included this in the index.html.erb. It will put a progress bar based on the value in a database field using Twitter Bootstrap, and also show the % progress
<tbody>
<% #active_xfers.each do |active_xfer| %>
<tr>
<td><%= active_xfer.name %></td>
<td><%= active_xfer.status %></td>
<td><div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="<%= active_xfer.progress %>" aria-valuemin="0" aria-valuemax="100" style="width: <%= active_xfer.progress %>;">
<%= active_xfer.progress %>
</div>
</div></td>
<td><%= active_xfer.started %></td>
<td><%= active_xfer.finished %></td>
</tr>
<% end %>
</tbody>