All Levels

11 Newest jQuery Progress Bar Plugins

Progress bars are ideal for letting end-users know that something is loading on a website, and they also help to provide a better user experience. In this post, find a compiled list of 11 newest jQuery progress bar plugins which are lightweight, eye catching, and easy to integrate.  You can use these plugins to integrate loading of content, show progress when user scrolls the page, display form completion status, and for many more functionalities.

1. ProgressBarWars (Star Wars Tribute)


ProgressBarWars is a simple (Star Wars tribute), light-weight jQuery plugin that allows you to display an animated horizontal progress meter. Just pass in the goal and amount raised or completed, and the rest is optional.

2. LoadGo


LoadGo is a JQuery plugin that allows you to create a progress bar by using your own images. It creates an overlay above your desire DOM element and simulates a loading process using width calculations.

3. Scroll indicator



Visualize reading progress with small and simple jQuery plugin. Adjust style with CSS or SCSS. Never worry about window resizing. Optional HTML5 progress element. Setup with one line of code.

4. asPieProgress


A jQuery plugin that animates the pie progress.

5. percircle


Percircle is a jquery plugin to make animated CSS percentage circles.

6. jQMeter


jQMeter is a simple, light-weight jQuery plugin that allows you to display an animated horizontal or vertical progress meter.

7. jQuery Progress Tracker

jQuery Progress Tracker

A small (2KB) jQuery plugin that creates a fixed progress indicator based on your content and allows linking between them.

8. Loadie.jsloadie


Loadie.js is a lightweight jQuery plugin to create a preloader that doesn’t suck and that is used by big firms.

9. jQuery Progress Bar

jQuery Progress Bar

A simple jQuery progress bar plugin for Bootstrap forms. Progress bar is collapsible and it can be positioned at top or bottom of screen.

10. Scrollgress


Scrollgress is a simple, lightweight jQuery plugin used to display a progress bar at the top of the page that fills up as the user scrolls.

11. MProgress.js


Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript, which doesn’t depend on any other libraries.

How to Validate Forms Using jQuery

Writing your own form validation code doesn't have to be a scary or time-consuming process. jQuery's Validation Plugin makes form validation easy and straightforward. validate To get started, all you need to do is link to the plugin files (files are also available for download if you'd prefer to host them locally) along with your standard jQuery library link.
  1. <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>

From there, you can start coding. Here's what the validation code might look like if you have a form with 4 different input fields (First Name, Last Name, Email, Password) you'd like to validate:
  1. //we're going to run form validation on the #validate-form element
  2. $("#validate-form").validate({
  3. //specify the validation rules
  4. rules: {
  5. firstname: "required",
  6. lastname: "required",
  7. email: {
  8. required: true,
  9. email: true //email is required AND must be in the form of a valid email address
  10. },
  11. password: {
  12. required: true,
  13. minlength: 6
  14. }
  15. },
  17. //specify validation error messages
  18. messages: {
  19. firstname: "First Name field cannot be blank!",
  20. lastname: "Last Name field cannot be blank!",
  21. password: {
  22. required: "Password field cannot be blank!",
  23. minlength: "Your password must be at least 6 characters long"
  24. },
  25. email: "Please enter a valid email address"
  26. },
  28. submitHandler: function(form){
  29. form.submit();
  30. }
  32. });

It's important to makes sure that the names of your input fields match your jQuery code, so for example, the HTML for the First Name input field should look something like this:
  1. <input type="text" name="firstname">

Additionally, the id of your form needs to match the id called to validate in the first line of the above jQuery code, so in this case, the form's id would need to be #validate-form in order for this code to work. That's all it takes to create some basic form validation in only a few minutes! Read through the jQuery Validation Plugin's documentation to learn even more about how to utilize this helpful plugin.

Build a Smooth Slide-Out Navigation Menu with jQuery

A smoothly-animated vertical navigation menu is a refreshing alternative to the standard horizontal navs, and can be created fairly easily with CSS and some simple jQuery.


Here's how it's done:

You'll need to start out with your basic <ul> navigation structure.
  1. <ul id="navigation">
  2. <li class="home"><a href="#">home</a></li>
  3. <li class="about"><a href="#">about</a></li>
  4. <li class="search"><a href="#">blog</a></li>
  5. <li class="photos"><a href="#">portfolio</a></li>
  6. <li class="contact"><a href="#">contact</a></li>
  7. </ul>

And you'll need to add a little bit of styling. This is the CSS that I used, but feel free to get creative and make it your own:
  1. ul#navigation {
  2. position: fixed;
  3. margin: 0px;
  4. padding: 0px;
  5. top: 10px;
  6. left: 0px;
  7. list-style: none;
  8. z-index:9999;
  9. }
  11. ul#navigation li {
  12. width: 100px;
  13. }
  15. ul#navigation li a {
  16. text-align: center;
  17. text-decoration: none;
  18. font-family: "Cabin";
  19. color: #555;
  20. font-weight: bold;
  21. font-size: 16px;
  22. display: block;
  23. margin-left: -2px;
  24. padding: 7px 0px;
  25. width: 100px;
  26. height: auto;
  27. background-color:rgba(255, 227, 220, .6);
  28. border:1px solid #AFAFAF;
  29. border-radius:0px 10px 10px 0px;
  30. box-shadow: 0px 2px 2px #333;
  31. }

Now you should have a good-looking vertical menu. Time to animate with jQuery.

This first  function will give the menu a margin-left of -90px as soon as the page loads. This allows users to see the menu before it smoothly disappears outside of the browser window so that they know it's there for them to use. The jQuery for this function is very straightforward:
  1. $(function() {
  3. $('#navigation a').stop().animate({'marginLeft':'-90px'},1000);
  5. $('#navigation> li').hover(
  6. function () {
  7. $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  8. },
  9. function () {
  10. $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  11. }
  12. );
  13. });

All that's left to do is add a function that will reveal a menu item when it's hovered upon. This should do the trick:
  1. $(function() {
  2. $('#navigation> li').hover(
  3. function () {
  4. $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  5. },
  6. function () {
  7. $('a',$(this)).stop().animate({'marginLeft':'-90px'},200);
  8. }
  9. );
  10. });

Now you've got a fun vertical nav that can be used to add some useful animation to any web page.  

Create a Responsive Navigation Menu Using jQuery

With more and more people accessing the web from mobile devices and tablets every day, it's becoming increasingly important for websites to be responsive, and one of the most important aspects of a mobile friendly website is a responsive navigation. Creating a mobile-friendly navigation menu without the use of a plugin might seem like a daunting task, but one can actually be created fairly easily with some media queries and a few lines of jQuery. Start with your standard navigation menu, which can be styled however you like, and probably looks something like this:
  1. <div id="menu">
  3. <ul>
  4. <li><a href="#">Link One</a></li>
  5. <li><a href="#">Link Two</a></li>
  6. <li><a href="#">Link Three</a></li>
  7. <li><a href="#">Link Four</a></li>
  8. </ul>
  9. </div>

Next, you're going to need to add some jQuery to your code.
  1. $("#menu").addClass("responsive").before('<div id="three-lines">&#9776;</div>');

This line of jQuery adds the CSS class responsive to the #menu div. and adds the div #three-lines before #menu.responsive. The #three-lines div is what creates the ☰ character that will replace the navigation menu when the screen gets to a certain width. This line of jQuery won't work properly unless we add some styling. We're going to need a media query to make sure that #menu.responsive becomes hidden when the screen gets to a certain width, and one that allows #three-lines to show up at that same point.
  1. @media screen and (max-width: 700px){
  2. #menu.responsive{
  3. display: none;
  4. }
  5. }
  7. @media screen and (min-width: 700px){
  8. #three-lines{
  9. display: none;
  10. }
  11. }

Now the default navigation menu will display when the browser window is above 700px, but when the window becomes smaller than 700px, it will disappear and the #three-lines icon will become visible. All that's left to do is add one more jQuery function that toggles the navigation menu when the #three-lines div is clicked.
  1. $("#three-lines").click(function(){
  2. $("#menu").toggle();
  3. })

Now when the ☰ icon is clicked, the #menu div will appear. It will disappear if the ☰ icon is clicked a second time. Customize the responsive menu by adding your own styling or effects.

Using jQuery’s .pushStack() for reusable DOM traversing methods

The .pushStack() method has been in jQuery since before version 1.0, but it hasn't received a whole lot of attention outside of core developers and plugin authors. While its usefulness may not be immediately apparent, it can come in really handy in some situations, so I'd like to take a quick look at what it does, how it works, and how we can use it.

pushStack Basics

At its most basic level, the .pushStack() method accepts an array of DOM elements and "pushes" it onto a "stack" so that later calls to methods like .end() and .andSelf() behave correctly. (Side note: As of jQuery 1.4.2, you can pass in a jQuery object instead of an array, but that isn't documented and jQuery itself always uses an array, so that's what we'll stick to here.)

Internally, jQuery uses .pushStack() to keep track of the previous jQuery collections as you chain traversing methods such as .parents() and .filter(). This lets us traverse through the DOM, do some stuff, "back up" to previous collections within the same chain using .end(), and then do something else. Here is a somewhat contrived example:

Read the rest of this entry »

Using jQuery’s Data APIs

In the beginning (well, beginning with jQuery 1.2.3 in early 2008) there was the jQuery.data() API. It offers a way to associate JavaScript data — strings, numbers, or any object — with a DOM element. As long as you manipulate the DOM element with jQuery, the library ensures that when the DOM element goes away, the associated data goes away as well. This is especially important for older versions of IE that tend to leak memory when JavaScript data is mixed with DOM data.

Most jQuery code sets data values using the higher-level .data() API; for example, $("div").data("imaDiv", true) sets a boolean value on every div in the document. This API, in turn, calls down to jQuery.data() with each element to set the value. For completeness, there are also jQuery.removeData() and .removeData() to remove data elements, and jQuery.hasData() to determine if any data is currently set for an element.

Read the rest of this entry »

Advertise on our network
See our other websites