DEV Community

Discussion on: Build a server updated async progress bar with Rails in 5 steps

View post
Collapse
 
darkrubyist profile image
darkrubyist • • Edited

Thank you very much @hopsoft for CableReady . I just tried the progress bar tutorial and I think it was the easiest ActionCable progress bar I ever did. I hope you will have more time in the future for more tutorials.

Added transition: .5s to get a smoother progress transition.

enter image description here

As I used Tachyons CSS on my project and I had to add the transition inside the ProgressBarJob as the html content was replaced by the CableReady real-time update.

# app/jobs/progress_bar_job.rb
class ProgressBarJob < ApplicationJob
  ...

  def perform
    status = 0
    while status < 100
      status += 10
      cable_ready["ProgressBarChannel"].set_attribute(
        selector: "#progress-bar>div",
        name: "style",
        value: "width:#{status}%; transition: .5s;"   # <-- this line was changed
      )
      cable_ready.broadcast
      sleep 1 # fake some latency # <-- this line was changed
    end
  end
end

However, the transition can be added directly to the application.scss .

// app/javascript/stylesheets/application.scss
#progress-bar>div {
  background-color: green;
  width: 0;
  height: 20px;
  border-radius: 10px;
  transition: .5s; # <-- this line was changed
}

Update

Progress Messages

After playing some time with CableReady, I wanted to extend the progress bar with a real-time feedback, to help the end user see the current step of the progress bar.

<!-- show.html.erb -->

<h3 id="message"></h3>
...


# app/jobs/progress_bar_job.rb

...

if status < 30
    cable_ready["ProgressBarChannel"].inner_html(
      selector: "#message",
      html: "We are preparing your stuff..."
    )
end

cable_ready.broadcast
sleep 0.1