Saturday, March 31, 2018

Skptricks html html5 jquery web development YouTube Like Ajax Progress Bar Plugin Using Jquery

YouTube Like Ajax Progress Bar Plugin Using Jquery

by on March 31, 2018 in , , ,
Today, In this post we are going to implement YouTube like ajax progress bar using jquery. if you are the user of YouTube, then you may have been seen YouTube red color progress bar which appears on top of a YouTube page while loading page and also you may have been this feature in some other website as well. I have found YouTube like ajax progress bar jquery plugin in below website.
Link to the GitHub project : 
https://github.com/peachananr/loading-bar

Page Loading Bar Using Jquery, Page Loading Bar Like Youtube, Simple jquery progress bar, Create Simple Progress bar using HTML, CSS with jquery, How to Make Loading Bar while Page Loads

So here we are going to use same plugin for our demo and we have tried our best to make this demo as simple as possible. Hope this example helpful for you.

Lets follow the below steps to display YouTube like ajax progress bar on top of the page.

Step -1 :
Include the latest jQuery javascript library and jQuery ytLoad plugin on the web page
<link href="ytLoad.jquery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="ytLoad.jquery.js"></script>

Step - 2 :
Include jquery.transit.js script for smooth CSS3 transitions
<script type="text/javascript" src="jquery.transit.js"></script>

Step - 3 :
Call the below jquery function to display ajax progress bar on top of the page.
$(document).ready(function() {
    $.ytLoad();
    // Perform ajax call...
    $('#displayAjaxContent').load('ajax.php');               
 });

Step-4 :
Display the data on complete page load in below container.
<div id="displayAjaxContent"> </div>

Now you are done with configuration part.Basically This plugin display the ajax progress bar, when you are trying to load page using ajax call.



Lets see the complete source below :
index.html
This page consists of jquery library file, ajax progress bar css and jquery file.
<!DOCTYPE html>
<html>
<head>
<title>jQuery ytLoad demo</title>
<link href="ytLoad.jquery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.transit.js"></script>
<script type="text/javascript" src="ytLoad.jquery.js"></script>
<script type="text/javascript">

 $(document).ready(function() {
    $.ytLoad();
    // Perform ajax call...
    $('#displayAjaxContent').load('ajax.html');               
 });
</script>
  
<style>
body {
margin: 0px;
padding: 0px;
background-color: #EBEBEB;
border-bottom: 1px solid #e8e8e8;
}
#displayAjaxContent {
width: 800px;
margin: auto;
margin-top: 15px;
}
</style>
</head>
<body>

<div id="displayAjaxContent"> </div>

</body>
</html>

ajax.html
We are going to load below page using ajax progress bar plugin.
<h2> <a href="http://www.skptricks.com/2018/03/display-online-offline-connection-status-using-javascript.html" > Display online/offline connection status in JavaScript using Offline.js </a> </h2>
<p> n this tutorial we are going to learn how to display offline/online connection status in Javascript using Offline.js. Offline.js is a library to automatically alert your users when they've lost internet connectivity, like Gmail,Facebook.
The best part is that it captures AJAX requests which were made while the connection was down, and remakes them when it's back up, so your app reacts perfectly.</p>


<h2> <a href="http://www.skptricks.com/2018/03/add-tinymce-editor-in-php-or-html.html" >  Add TinyMCE editor in PHP or HTML  </a>   </h2>
<p>Today, We are going to discuss how to Integrate TinyMCE editor with php or html. TinyMCE editor is web based WYSIWYG editor which enables you to convert HTML textarea field to an editor. The TinyMCE editor is converting the formatted text into HTML. Basically it helps to display formatted HTML code. Here we have given simple example how to add TinyMCE editot in php or html file.</p>


<h2> <a href="http://www.skptricks.com/2018/03/check-internet-connection-using-html-and-javascript.html" >  Check Internet Connection Using JavaScript And HTML </a>  </h2>
<p>Today, We are going to learn how to check internet connection using html and javascript. We have used pure javascript to check offline and online status of internet connection. Nowadays these two new events supported by most of the browser: "online" and "offline".These two events are fired on the <body> of each page when the browser switches between online and offline mode. Additionally, the events bubble up from document.body, to document, ending at window.</p>
 
<h2> <a href="http://www.skptricks.com/2018/03/facebook-style-chat-application-with-jquery-and-css.html" >  Facebook Style Chat Application With JQuery And CSS  </a>  </h2>
<p>Today we are going to discuss how to create Facebook Style Chat Application with jQuery and CSS. In our Earlier post we have provided simple demo and explanation about Facebook Like Chat Slider Layout Design and Facebook Style Chat Box Popup Layout Design Using JQUERY and CSS. Hoping this example helps you similarly for creating chat application.</p>
Demo Link : 
https://skptricks.github.io/learncoding/Youtube-Like-Ajax-Progress-Bar-Plugin-ytLoad/index.html

Download Link: 
https://github.com/skptricks/php-Tutorials/tree/master/YouTube%20Like%20Ajax%20Progress%20Bar%20Plugin%20Using%20Jquery

This is all about YouTube like ajax progress bar loading animation effect using jquery. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
By at
Tags: , , ,

2 comments:

  1. Fatih YILDIRIMNovember 9, 2018 at 4:26 PM

    $('#displayAjaxContent').load('ajax.html');

    Why is ajax.html written

    ReplyDelete
    Replies
    1. Sumit Kumar PradhanNovember 9, 2018 at 11:42 PM

      We are loading ajax.html file using Jquery load function. Please check below we have created ajax.html file, that we are trying to load with ajax call.

      Delete

Subscribe to: Post Comments (Atom)