Violin.css

# Input Progress: Alert

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <progress class="inv-input-progress inv-input-progress--alert" max="100" value="66"></progress>

`
`

    <progress
      class="inv-input-progress {{ inputProgress.modifier }}"
      max="100"
      value="{{inputProgress.value}}"
    ></progress>

`
`

    {
      "inputProgress": {
        "modifier": "inv-input-progress--alert",
        "value": 66
      }
    }

`
File:

- Content:
  `

      .inv-input-progress {
        height: 4px;
        width: calc(100% - 2px);
        border-radius: 2px;
        overflow: hidden;
        border: none;
        appearance: none;
      }

      .inv-input-progress--disabled {
        color: var(--color-system--light);
        cursor: not-allowed;
      }

      .inv-input-progress::-webkit-progress-bar {
        background-color: var(--color-default--light);
      }

      .inv-input-progress--disabled::-webkit-progress-bar {
        background-color: var(--color-system--light);
      }

      .inv-input-progress::-webkit-progress-value {
        background-color: var(--color-default--regular);
      }

      .inv-input-progress::-moz-progress-bar {
        background-color: var(--color-default--regular);
      }

      .inv-input-progress::-ms-fill {
        background-color: var(--color-default--regular);
      }

      /* INVALID STATE */
      .inv-input-progress--invalid::-webkit-progress-value {
        background-color: var(--color-error--regular);
      }

      .inv-input-progress--invalid::-moz-progress-bar {
        background-color: var(--color-error--regular);
      }

      .inv-input-progress--invalid::-ms-fill {
        background-color: var(--color-error--regular);
      }

      /* ALERT STATE */
      .inv-input-progress--alert::-webkit-progress-value {
        background-color: var(--color-alert--regular);
      }

      .inv-input-progress--alert::-moz-progress-bar {
        background-color: var(--color-alert--regular);
      }

      .inv-input-progress--alert::-ms-fill {
        background-color: var(--color-alert--regular);
      }

      /* DONE STATE */
      .inv-input-progress--done::-webkit-progress-value {
        background-color: var(--color-done--regular);
      }

      .inv-input-progress--done::-moz-progress-bar {
        background-color: var(--color-done--regular);
      }

      .inv-input-progress--done::-ms-fill {
        background-color: var(--color-done--regular);
      }

      /* DISABLED STATE */
      .inv-input-progress--disabled::-webkit-progress-value {
        background-color: var(--color-system--light);
      }

      .inv-input-progress--disabled::-moz-progress-bar {
        background-color: var(--color-system--light);
      }

      .inv-input-progress--disabled::-ms-fill {
        background-color: var(--color-system--light);
      }

  `
- URL: /components/raw/input-progress/input-progress.css
- Filesystem Path: src/components/input-progress/input-progress.css
- Size: 2 KB

- Handle: @input-progress--alert
- Variants (5): Default , Invalid , Alert , Done , Disabled
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/input-progress/input-progress.hbs

## Input Progress

Utilizadas nos campos de input para indicar o progresso

Tendo a classe base `.inv-input-progress`

### Default Input Progress

Forma padrão da barra de progresso

`

    <progress class="inv-input-progress" max="100" value=""></progress>

`

Modificadores | Uso
--- | ---
`.inv-input-progress--invalid` | Modifica a barra de progresso do input com estilização de inválidação
`.inv-input-progress--alert` | Modifica a barra de progresso do input com estilização de alerta
`.inv-input-progress--done` | Modifica a barra de progresso do input com estilização de concluído
`.inv-input-progress--disabled` | Modifica a barra de progresso do input com estilização de desabilitado

### Invalid Input Icon

Variação de progresso com estado inválido.

`

    <progress
      class="inv-input-progress inv-input-progress--invalid"
      max="100"
      value="15"
    ></progress>

`

### Alert Input Icon

Variação de progresso com estado de alerta.

`

    <progress
      class="inv-input-progress inv-input-progress--alert"
      max="100"
      value="55"
    ></progress>

`

### Done Input Icon

Variação de progresso com estado de conclusão.

`

    <progress
      class="inv-input-progress inv-input-progress--done"
      max="100"
      value="95"
    ></progress>

`

### Disabled Input Icon

Variação de progresso desabilitado.

`

    <progress
      class="inv-input-progress inv-input-progress--disabled"
      max="100"
      value="55"
    ></progress>

`