Violin.css

Input Progress 

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


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


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


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


<!-- Disabled -->
<progress class="inv-input-progress inv-input-progress--disabled" max="100" value="60"></progress>


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


/* Invalid */
{
  "inputProgress": {
    "modifier": "inv-input-progress--invalid",
    "value": 15
  }
}


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


/* Done */
{
  "inputProgress": {
    "modifier": "inv-input-progress--done",
    "value": 100
  }
}


/* Disabled */
{
  "inputProgress": {
    "modifier": "inv-input-progress--disabled",
    "value": 60
  }
}
  • 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>