Published by Dan on Sep 8, 2015

Progress Bars

How to create a progress bar using Ruby on Rails, AJAX, and Twitter Bootstrap.

Filed under Features


Progress Bars are essential for long-running tasks that require communication to the user their request was received and is being processed. For example, many applications allow importing spreadsheets or CSV files which could take several minutes to process. These applications save the uploaded file, start a background worker, and allow the client to track its progress.

Two approaches handle this problem: pinging and websockets. Here, I'll tackle the simpler pinging approach.


Click to the following button to see the progress bar go Start

Not Running...

This webpage is not hosted by Rails, so the above UX is just a simulation.

How it Works

  1. When start is clicked, jquery_ujs.js recognizes its data-remote and data-type attributes and requests javascript from Rails via AJAX.
  2. Rails receives the request, passes a new progress_bar into ActiveJob and returns javascript that starts asking Rails for updates.
  3. The ActiveJob updates progress_bar.message and progress_bar.percent as it processes the data until it finishes.
  4. When progress_bar.percent == 100 the javascript stops asking Rails for updates.

The Code

# app/models/progress_bar.rb
class ProgressBar < ActiveRecord::Base
  belongs_to :user

  validates_presence_of :user_id, :message

  validates_numericality_of :percent,
    greater_than_or_equal_to: 0,
    less_than_or_equal_to: 100

# rails g migration create_progress_bars
class CreateProgressBars < ActiveRecord::Migration[5.0]
  def change
    create_table :progress_bars do |t|
      t.text    :message
      t.integer :percent
      t.integer :user_id
      t.timestamps null: false
    add_index :progress_bars, :user_id

# config/routes.rb
resources :progress_bars, only: 'show'
resources :demos, only: %w(new create)

# app/controllers/demos_controller.rb
class DemosController < ApplicationController

  def create
    @progress_bar = current_user.progress_bars.create!(message: 'Queued', percent: 0)


<!-- app/views/demos/new.html.erb -->
<div id="demo" data-ping-time="1000">
  <%= link_to 'Start', url_for(action: 'create'), 'data-remote' => true, 'data-type' => 'script' %> 

  <div class="progress">
    <div class="progress-bar" style="width: 0%;"></div>

  <div class="message">Not Running...</div>

// app/views/demos/create.js.erb
(function() {
  var progressBar = new ProgressBar("#demo", "<%= progress_bar_path @progress_bar %>");

# app/javascripts/
class @ProgressBar
  constructor: (elem, url) ->
    @elem = $(elem)
    @url = url

    @message = @elem.find('.message')
    @bar = @elem.find('.progress-bar')
    @pingTime = parseInt('ping-time'))

  start: =>
      url: @url,
      dataType: 'json',
      success: (data) =>

        percent = "#{data.percent}%"
        @bar.css('width', percent).html(percent)

        if data.percent < 100
          setTimeout(@start, @pingTime)

# app/controllers/progress_bars_controller.rb
class ProgressBarsController < ApplicationController

  def show
    @progress_bar = current_user.progress_bars.find(params[:id])
    render json: @progress_bar


# app/workers/demo_worker.rb
class DemoWorker < ActiveJob::Base

  def perform(progress_bar)
      message: 'Working ...',
      percent: 0

    10.times do |i|
      @progress_bar.update_attributes!(percent: i * 10)

      message: 'Finished!',
      percent: 0



Get all that? The button inside demos#new invokes #create via AJAX, starting a client-side pinging of progress_bars#show while demo_worker#perform runs in the background.

Of course it's just a demo. A real worker would do something useful like import a data file. Here are a few more thoughts:

  • Should you use Redis for ephemeral data like progress bars?
  • How do you notify the user of errors that may occur inside your worker?
  • Do you want the progress bar to popup in a modal?
  • Would you allow multiple progress bars on the same screen?
  • Can the user cancel the background process?

All easily built on top of this initial implementation, but I'll leave them to you. Feel free to contact me with any questions or comments at


© 2012-2018 Dan Cunning. All rights reserved.