Open In App

Semantic-UI | Progress

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.

A progress bar shows the progress of a task. Let’s see some examples.
Example: jQuery Code.




$('.ui.button').on('click', function() {
var
  $progress       = $('.ui.progress'),
  $button         = $(this),
  updateEvent
  ;
  clearInterval(window.fakeProgress)
  $progress.progress('reset');
  window.fakeProgress = setInterval(function() {
  $progress.progress('increment');
  $button.text( $progress.progress('get value') );
  if($progress.progress('is complete')) {
  clearInterval(window.fakeProgress)
  }
  }, 10);
   });
$('.ui.progress').progress({
  duration : 100,
  total    : 100,
  text     : {
   active: '{value} of {total} done'
 }
});


Complete Code:




<!DOCTYPE html>
  <html>
      <head>
          <title>Semantic UI</title>
          <link href=
                rel="stylesheet" />         
      </head>
      <body>
          <div style="margin-top: 20px"
               class="ui container">  
            <div class="ui indicating progress" 
                 data-value="1" 
                 data-total="100"
                 id="example5">
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui button">click me</div>
           </div
          <script src="https://code.jquery.com/jquery-3.1.1.min.js"
                  integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
                  crossorigin="anonymous">
          </script>
          <script src=
          </script
          <script>
           $('.ui.button').on('click', function() {
        var
          $progress       = $('.ui.progress'),
          $button         = $(this),
          updateEvent
        ;
        clearInterval(window.fakeProgress)
        $progress.progress('reset');
        window.fakeProgress = setInterval(function() {
          $progress.progress('increment');
          $button.text( $progress.progress('get value') );
          if($progress.progress('is complete')) {
            clearInterval(window.fakeProgress)
          }
        }, 10);
      });
    $('.ui.progress').progress({
        duration : 100,
        total    : 100,
        text     : {
          active: '{value} of {total} done'
        }
      });
          </script>
      </body>
  </html>


Output:

Example:




<!DOCTYPE html>
  <html>
      <head>
          <title>Semantic UI</title>
          <link href=
                rel="stylesheet" />         
      </head>
      <body>
          <div style="margin-top: 100px" 
               class="ui container">  
            <div class="ui indicating progress" 
                 data-value="1" 
                 data-total="10">
  
              <div class="bar">
                <div class="progress"></div>
              </div>
              <div class="label">Adding Data</div>
            </div>
            <div class="ui button">click me</div>
           </div
          <script src="https://code.jquery.com/jquery-3.1.1.min.js" 
                  integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
                  crossorigin="anonymous">
          </script>
  
          <script src=
          </script
          <script>
           $('.ui.button').on('click', function() {
            $('.progress').progress('increment');
           });
          </script>
      </body>
  </html>


Output:

Example:

States




<!DOCTYPE html>
  <html>
      <head>
          <title>Semantic UI</title>
          <link href=
                rel="stylesheet" />         
      </head>
      <body>
          <div style="margin-top: 100px" 
               class="ui container"
            <h2>Active</h2
  
            <div class="ui active progress" 
                 data-percent="74">
  
              <div class="bar">
                <div class="progress"></div>
              </div>
              <div class="label">Downloading</div>
            </div>
            <h2>Success</h2>
            <div class="ui progress success" 
                 data-value="20" 
                 data-total="20"
                 id="finish">
  
              <div class="bar">
                <div class="progress"></div>
              </div>
              <div class="label">Download Finish</div>
            </div>
            <h2>Warning</h2>
            <div class="ui progress warning">
              <div class="bar">
                <div class="progress"></div>
              </div>
              <div class="label">
Sorry You don't have enough space to download this.
             </div>
            </div>
            <h2>Error</h2>
            <div class="ui progress error">
              <div class="bar">
                <div class="progress"></div>
              </div>
              <div class="label">Sorry, There was some error</div>
            </div>
           </div
          <script src="https://code.jquery.com/jquery-3.1.1.min.js" 
                  integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
                  crossorigin="anonymous">
          </script>
          <script src=
           </script
          <script>
            $('#finish').progress('increment')
          </script>
      </body>
  </html>


Output:



Last Updated : 08 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads