Build

Streaming Updates to Real-time Progress Bars with JavaScript

2 min read Anmol Agrawal on Aug 17, 2017
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

How to build a dynamically-updating progress bar in JavaScript that updates in real time as status updates are streamed to it.

This tutorial is a quick and easy example of Real-time Updates using PubNub to stream status updates and display the progress in a real-time progress bar.

There are more than a fair share of tutorials out there that show you how to build a progress bar in JavaScript. But what good is a static progress bar?

In this tutorial, we’ll show you how to connect your progress bar to the internet and stream updates to it in real time. This could be inventory from an IoT sensor, capacity in a chatroom, or uploading files – an infinite amount of other use cases.

 

You can find the source code for our real-time JavaScript progress bar here.

script.js

This Node.js script replicates the effect of the file upload. Ideally, we will get the percentage uploaded as bytes uploaded divided by total byte size of the file. Once we have the percentage, we are sending that data to ‘progress-bar’ channel every 5 sec to give an effect of file uploading taking time.

var pubnub = require("pubnub")({
   subscribe_key: 'demo', // always required
   publish_key: 'demo' // only required if publishing
});
var percentages = [0,20,40,60,80,100]
function send_percentage(percentage){
   pubnub.publish({
       channel: "progress-bar",
       message: {"value": percentage},
       callback: function(m){console.log(m)}
   });
}
var interval_id = setInterval(function(){
   send_percentage(percentages.shift());
}, 5000)

index.html

This is a simple HTML template with couple of CDNs (jQuery and PubNub) and placeholder for circular progress bar.

<!DOCTYPE html>
<html >
 <head>
   <meta charset="UTF-8">
   <title>Circular Progress Bar</title>
   <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
<div id="page">
 <div class="progress-bar">
     <canvas id="inactiveProgress" class="progress-inactive" height="275px" width="275px"></canvas>
   <canvas id="activeProgress" class="progress-active"  height="275px" width="275px"></canvas>
   <p>0%</p>
 </div>
</div>
   <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   <script src="https://cdn.pubnub.com/pubnub-3.7.13.min.js"></script>
   <script src="js/index.js"></script>
 </body>
</html>

index.js

Most of this JavaScript is responsible for animation effect of circular progress bar. But apart from that, we are just subscribing to that particular PubNub channel, and passing the received percentage to drawProgress method.

$(document).ready(function(){
            var pubnub = PUBNUB({
                subscribe_key : 'demo'
            });
            var $pCaption = $('.progress-bar p');
            var iProgress = document.getElementById('inactiveProgress');
            var aProgress = document.getElementById('activeProgress');
            var iProgressCTX = iProgress.getContext('2d');
            
            drawInactive(iProgressCTX);
            pubnub.subscribe({
                channel: "progress-bar",
                message: function(message){
                    var percentage = message.value / 100;
                    console.log(percentage + '%');
                    drawProgress(aProgress, percentage, $pCaption);
                }
            })
            function drawInactive(iProgressCTX){
                iProgressCTX.lineCap = 'square';
                //outer ring
                iProgressCTX.beginPath();
                iProgressCTX.lineWidth = 15;
                iProgressCTX.strokeStyle = '#e1e1e1';
                iProgressCTX.arc(137.5,137.5,129,0,2*Math.PI);
                iProgressCTX.stroke();
                //progress bar
                iProgressCTX.beginPath();
                iProgressCTX.lineWidth = 0;
                iProgressCTX.fillStyle = '#e6e6e6';
                iProgressCTX.arc(137.5,137.5,121,0,2*Math.PI);
                iProgressCTX.fill();
                //progressbar caption
                iProgressCTX.beginPath();
                iProgressCTX.lineWidth = 0;
                iProgressCTX.fillStyle = '#fff';
                iProgressCTX.arc(137.5,137.5,100,0,2*Math.PI);
                iProgressCTX.fill();
            }
            function drawProgress(bar, percentage, $pCaption){
                var barCTX = bar.getContext("2d");
                var quarterTurn = Math.PI / 2;
                var endingAngle = ((2*percentage) * Math.PI) - quarterTurn;
                var startingAngle = 0 - quarterTurn;
                bar.width = bar.width;
                barCTX.lineCap = 'square';
                barCTX.beginPath();
                barCTX.lineWidth = 20;
                barCTX.strokeStyle = '#76e1e5';
                barCTX.arc(137.5,137.5,111,startingAngle, endingAngle);
                barCTX.stroke();
                $pCaption.text( (parseInt(percentage * 100, 10)) + '%');
            }
        });

And that’s it! This is just scratching the surface of real-time updates using PubNub. Check out some of our other use cases, and as always, you can contact us with any questions you have.

More from PubNub

NPP and HIPAA: Notice of Privacy Practices Definition
Healthcare CategoryJan 6, 20235 min read

NPP and HIPAA: Notice of Privacy Practices Definition

A Notice of Privacy Practices (NPP) is one of the requirements of HIPAA and helps patients understand their personal data rights.

Michael Carroll

Michael Carroll

HIPAA Violation Examples
Healthcare CategoryJan 5, 20236 min read

HIPAA Violation Examples

HIPAA violations can be financially expensive and devastating to a brand. Examine some examples of HIPAA violations, and learn...

Michael Carroll

Michael Carroll

HIPAA Technical Safeguards: How To Protect Sensitive Data
Healthcare CategoryJan 5, 20236 min read

HIPAA Technical Safeguards: How To Protect Sensitive Data

HIPAA covered entities must follow the five technical safeguards to achieve HIPAA compliance and prevent data corruption.

Michael Carroll

Michael Carroll