Violin.css

Input Progress: Done 

<progress class="inv-input-progress inv-input-progress--done" max="100" value="100"></progress>
 
<progress
  class="inv-input-progress {{ inputProgress.modifier }}"
  max="100"
  value="{{inputProgress.value}}"
></progress>
 
{
  "inputProgress": {
    "modifier": "inv-input-progress--done",
    "value": 100
  }
}
  • 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

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>