Labels

php (34) javascript (30) phpjavascript (29) jquery (23) html (19) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Monday, March 12, 2018

Progress Bar Using HTML CSS and Jquery

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:

No comments:

Post a Comment

More Posts

FOLLOW