ProgressIndicator

Progress Indicator

Displays the progress of an operation when the percentage complete can be determined. Unable to determine how much of the operation is complete? Use a Spinner instead.

Variants

Default

Example.jpg
My Progress Description

Using this component

  1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
     <head>
         <link rel="stylesheet" href="fabric.min.css">
         <link rel="stylesheet" href="fabric.components.min.css">
         <script src="jquery-2.2.1.min.js"></script>
         <script src="jquery.fabric.min.js"></script>
     </head>
    
  2. Copy the HTML from the sample above into your page.
  3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all ProgressIndicators on the page:
     <script>
         $(document).ready(function() {
             if (typeof fabric !== "undefined") {
                 if ('ProgressIndicator' in fabric) {
                     var elements = document.querySelectorAll('.ms-ProgressIndicator');
                     var i = elements.length;
                     var component;
                     while(i--) {
                         component = new fabric['ProgressIndicator'](elements[i]);
                     }
                 }
             }
         });
     </script>
    
  4. Verify that the component is working the same as in the sample above.

Dependencies

This component has no dependency on other components.