Creating a jQuery Django Progressbar Widget Tutorial

Creating a jQuery Django Progressbar Widget Tutorial

Django Progressbar Widget - Title
Complete Tutorial - 14 Minute Read

Why use a jQuery Django Progressbar Widget?

The jQuery Django Progressbar Widget is one of my favorite ones to integrate into websites. Although sometimes it may be hard to put one of these on your site, they are pretty cool little features. They have the ability to make your site from something bland and boring to something that’s visually appealing. 

One of the most frustrating times for a computer user is whenever they have to wait to be delivered content, or wait on an application to load. You can mitigate this frustration by telling the user that you’re actively working on a solution to their request. 

This is sometime best achieved by creating a jQuery Django progressbar widget. They add the visual touch and let your user know that you’re still working on loading their request. 

jQuery Django Progressbar Widget - Example
Example of a jQuery Django Progressbar Widget

See an Example of a jQuery Django Progressbar Widget

With all my widget tutorials, I think it’s important to know what you’re building before you spend your time creating it on your website. The above shows an example of the widget we’ll be creating in this tutorial. It’s just a screenshot, but if you want to see and use the working example of this widget, you can find it on my Heroku hosted Django website. You can find it at this link.

How to start with jQuery Widgets

jQuery is just a tool to make it easier to impliment Javascript into your django websites (or any type of website that supports Javascript for that matter). 

If you want to use Javascript to begin creating dynami content on your website, jQuery makes the process much easier to get started.

Source Code for jQuery Django Widgets - Transition slide
First, we need the source code for the jQuery Django Progressbar Widget

To get the source code for the Progressbar widget, we’ll need to head to jQuery’s website. You can either google search it or just follow this link. Or you can just grab the source code from below.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
These two are just the styling jQuery uses by default.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
<script>
$( function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 2 );
if ( val < 99 ) {
setTimeout( progress, 80 );
}
}
setTimeout( progress, 2000 );
} );
</script>
If this is your first tutorial with jQuery widgets – This is probably the hardest one to understand at this step. Most of the other tutorials have very little whenever it comes to actually writing down the Javascript functions. These are long because there’s a lot of upfront work whenever you use progressbars and very little on the html side. 
But lucky for you jQuery has already done this work for you!
 
To modify your progress bar to operate how you want, you’ll need to change the progress labels above. Additionally, you can modify the val variable to change the time in which your progress bar loads. 
Using the Progressbar JavaScript to create a Django Progressbar Widget

Depending on the size of your project, I would most likely encourage you to create a base.html file and extend it to other templates in your Django project. This is how I’ve created the working live example website for all the tutorials on jQuery widgets.

In this scenario, play the above styling and scripts into your base.html file. If you’re only working off one file, then go ahead and place it into that file. 

To start using the jQuery Django Progressbar Widget, you’ll need to write one line of HTML code. That’s it!

<div id=“progressbar”><div class=“progress-label”>Loading…</div></div>

I told you it was heavy on the Javascript side and not the html side.

 

I didn’t alter the code from jQuery this time to suit my own purposes. They pretty much have the example working for what I envision it being used for on any site. None the less, here’s the full code which makes the progress bar on the Example site work:

{% extends “base.html” %}
{% load staticfiles %}

{% block content %}
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$( function() {
var progressbar = $( “#progressbar” ),
progressLabel = $( “.progress-label” );

progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( “value” ) + “%” );
},
complete: function() {
progressLabel.text( “Complete!” );
}
});
function progress() {
var val = progressbar.progressbar( “value” ) || 0;

progressbar.progressbar( “value”, val + 2 );

if ( val < 99 ) {
setTimeout( progress, 80 );
}
}

setTimeout( progress, 2000 );
} );
</script>

<div id=”progressbar”><div class=”progress-label”>Loading…</div></div>


{% endblock %}

Quick Review:

  • You can alter the times of the loading bar to suit your needs. This is probably one of the only things you’ll need to alter.
  • You can hook this progressbar to other variables in your django views.py file to make it coordinate with one of your processes.

That’s pretty much it whenever it comes to creating your own jQuery Django Menu Widget in your Django project. If this was your first jQuery tutorial, I totally recommend checking out some of my other tutorials. There’s some awesome widgets that you can create with simple jQuery applications. 

Additionally, jQuery is a great stepping stone to learning full JavaScript. One of the most profitable and useful coding languages to learn. 

 

Enjoy this content? Subscribe to the newsletter! 

Other jQuery Django Widget Tutorials:

One thought on “Creating a jQuery Django Progressbar Widget Tutorial

  1. Bryce

    Think this is good content. The jQuery site leaves me with some questions sometimes, so I appreciate you typing this all out for the beginners.

Leave a Reply

Your email address will not be published. Required fields are marked *