Skip to main content
Microsoft
Fabric-JS
Fabric-JS
  • Home
  • Get Started
    • Basic Inputs
      • Button
      • CheckBox
      • ChioceFieldGroup
      • CommandButton
      • ContextualMenu
      • Dropdown
      • Label
      • Link
      • TextField
      • Toggle
    • Content
      • FacePile
      • List
      • ListItem
      • OrgChart
      • Persona
      • Table
    • Navigation
      • Breadcrumb
      • CommandBar
      • Pivot
      • SearchBox
    • Pickers
      • DatePicker
      • PeoplePicker
    • Progress & Validation
      • MessageBar
      • MessageBanner
      • ProgressIndicator
      • Spinner
    • Surfaces
      • Callout
      • Dialog
      • Overlay
      • Panel
      • PersonaCard
      • Microsoft 365
      • Azure
      • Office 365
      • Dynamics 365
      • Power Platform
      • Windows 10
    • Products & Services
      • Windows Server
      • Enterprise Mobility + Security
      • Power BI
      • Teams
      • Visual Studio
      • Microsoft Advertising
    • Emerging Technologies
      • AI
      • Internet of Things
      • Azure Cognitive Services
      • Quantum
      • Microsoft HoloLens
      • Mixed Reality
    • Developer & IT
      • Docs
      • Developer Center
      • Windows Dev Center
      • Windows IT Pro Center
      • FastTrack
      • Power Platform
    • Partner
      • Partner Network
      • Solution Providers
      • Partner Center
      • Cloud Hosting
    • Industries
      • Education
      • Financial services
      • Government
      • Health
      • Manufacturing & resources
      • Retail
    • Other
      • Security
      • Licensing
      • AppSource
      • Azure Marketplace
      • Events
      • Research
    • View Sitemap
Sign in
Office UI Fabric JS
Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UI Fabric React as your front-end framework.
  • Breadcrumb
  • Button
  • Callout
  • CheckBox
  • ChoiceFieldGroup
  • CommandBar
  • CommandButton
  • ContextualMenu
  • DatePicker
  • Dialog
  • Dropdown
  • FacePile
  • Label
  • Link
  • List
  • ListItem
  • MessageBanner
  • MessageBar
  • OrgChart
  • Overlay
  • Panel
  • PeoplePicker
  • Persona
  • PersonaCard
  • Pivot
  • ProgressIndicator
  • SearchBox
  • Spinner
  • Table
  • TextField
  • Toggle

ProgressIndicator

  • Overview
  • Using this Component
  • Variants
  • Methods

Overview

Progress Indicators are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, use a Spinner instead. Progress Indicators can appear in a new panel, a flyout, under the UI initiating the operation, or even replacing the initiating UI, as long as the UI can return if the operation is canceled or is stopped.

Progress Indicators feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears below. The description should tell someone exactly what the operation is doing. Examples of formatting include:

[Object] is being [operation name], or
[Object] is being [operation name] to [destination name] or
[Object] is being [operation name] from [source name] to [destination name]

Status text is generally in units elapsed and total units. If the operation can be canceled, an “X” glyph is used and should be placed in the upper right, aligned with the baseline of the operation name. When an error occurs, replace the status text with the error description using ms-fontColor-redDark.

Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they arerarely accurate enough to be trustworthy. Also combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the operation description to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

Also available in Fabric React

Using this Component

  1. Confirm that you have references to Fabric's CSS and JavaScript on your page:

    			<link rel="stylesheet" href="fabric.min.css" />
    <link rel="stylesheet" href="fabric.components.min.css" />
    <script src="fabric.min.js"></script>
    		
  2. Copy the HTML from one of the samples below into your page. For example:

    <div class="ms-ProgressIndicator">
      <div class="ms-ProgressIndicator-itemName">Example.jpg</div>
      <div class="ms-ProgressIndicator-itemProgress">
        <div class="ms-ProgressIndicator-progressTrack"></div>
        <div class="ms-ProgressIndicator-progressBar"></div>
      </div>
      <div class="ms-ProgressIndicator-itemDescription">Example.jpg</div>
    </div>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all ProgressIndicator components on the page:

    <script type="text/javascript">
      var ProgressIndicatorElements = document.querySelectorAll(".ms-ProgressIndicator");
      for (var i = 0; i < ProgressIndicatorElements.length; i++) {
        let ProgressIndicator = new fabric['ProgressIndicator'](ProgressIndicatorElements[i]);
        setTimeout(function() {
          ProgressIndicator.setProgressPercent(1);
        }, 2000);
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default ProgressIndicator
<div class="ms-ProgressIndicator">
  <div class="ms-ProgressIndicator-itemName">Example.jpg</div>
  <div class="ms-ProgressIndicator-itemProgress">
    <div class="ms-ProgressIndicator-progressTrack"></div>
    <div class="ms-ProgressIndicator-progressBar"></div>
  </div>
  <div class="ms-ProgressIndicator-itemDescription">Example.jpg</div>
</div>
<script type="text/javascript">
  var ProgressIndicatorElements = document.querySelectorAll(".ms-ProgressIndicator");
  for (var i = 0; i < ProgressIndicatorElements.length; i++) {
    let ProgressIndicator = new fabric['ProgressIndicator'](ProgressIndicatorElements[i]);
    setTimeout(function() {
      ProgressIndicator.setProgressPercent(1);
    }, 2000);
  }
</script>
Example.jpg
Example.jpg

Methods

Name Parameters Description
setProgressPercent(percent)

percent: {Number} Floating point number from 0 to 1

Starts or restarts the animation sequence.
setProgress(progress)

progress: {Number} Sets the progress, must be between 0 and total

Sets the progress for a determinate operation. Use this in combination with setTotal.
setTotal(total)

total: {Number} Total size of component progress

Sets the total file size, etc. for a determinate operation. Use this in combination with setProgress.
setName(name)

name: {String} Name of title or label

Sets the text for the title or label.
setDescription(description)

description: {String} Text for description

Sets the text for the description.
cacheDOM()

None

Caches elements and values of the component.
Follow us
Share this page
What's new
  • Surface Laptop 4
  • Surface Laptop Go
  • Surface Go 2
  • Surface Pro X
  • Surface Duo
  • Microsoft 365
  • Windows 10 apps
  • HoloLens 2
Microsoft Store
  • Account profile
  • Download Center
  • Microsoft Store support
  • Returns
  • Order tracking
  • Virtual workshops and training
  • Microsoft Store Promise
  • Financing
Education
  • Microsoft in education
  • Office for students
  • Office 365 for schools
  • Deals for students & parents
  • Microsoft Azure in education
Enterprise
  • Azure
  • AppSource
  • Automotive
  • Government
  • Healthcare
  • Manufacturing
  • Financial services
  • Retail
Developer
  • Microsoft Visual Studio
  • Windows Dev Center
  • Developer Center
  • Microsoft developer program
  • Channel 9
  • Office Dev Center
  • Microsoft Garage
Company
  • Careers
  • About Microsoft
  • Company news
  • Privacy at Microsoft
  • Investors
  • Diversity and inclusion
  • Accessibility
  • Security
English (United States)
  • Sitemap
  • Contact Microsoft
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Safety & eco
  • About our ads
  • © Microsoft 2021

Sign in required


Your session has expired. Please sign-in again to continue. Unfortunately any unsaved changes will be lost.

Sign in