PHP JavaScript: Progress Bar Using HTML CSS and Jquery

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format. The concept can also be regarded to include "playback bars" in media players that keep track of the current location in the duration of a media file.

Here is the simple code showing a progress bar from 1 to 100.



<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Progressbar</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
        .ui-progressbar {
            position: relative;
        }
        .progress-label {
            position: absolute;
            left: 50%;
            top: 4px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
        }
        .ui-widget-header {
            border: 1px solid #a03232;
            background: green;
            color: #333333;
            font-weight: bold;
        }
    </style>
<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>
</head>
<body>

<div id="progressbar"><div class="progress-label">Loading...</div></div>


</body>
</html>

Result:

PHP JavaScript

Progress Bar Using HTML CSS and Jquery

No comments:

Post a Comment

Labels

Popular Posts