Progress Button     

Show user a process is happening in the background when clicking/tapping on a Progress Button. There are two outcomes that this component can show the user: success or error. Also, there are two ways you can display the progress: determined and indetermined.

Basic Usage

Two examples below. Read about Vue properties in the next section.

<!-- Determined Progress Button -->
<q-progress-button
  class="primary"
  :percentage="model"
  @click.native="startWorking()"
>
  Work it!
</q-progress-button>
<!-- Indetermined Progress Button -->
<q-progress-button
  indeterminate
  class="yellow"
  dark-filler
  :percentage="model"
  @click.native="startWorking()"
>
  Work it!
</q-progress-button>

Vue Properties

Handling Outcome

The outcome is determined by the percentage property value. Changing the property will make the Progress Button change its state accordingly.