CSS :indeterminate Pseudo Class - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Target the checkbox when in an indeterminate state */
input[type="checkbox"]:indeterminate {
  outline: 3px solid #ff9800;
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
}

/* Target the progress bar when it has no value */
progress:indeterminate {
  filter: hue-rotate(290deg); /* Changes the default blue/green to purple */
  border: 1px solid #9c27b0;
}

/* General styling for clarity */
.container {
  font-family: sans-serif;
  padding: 20px;
  line-height: 2;
}</style></head><body><div class="container">
  <h3>Checkbox Example</h3>
  <label>
    <input type="checkbox" id="mixed-checkbox"> 
    Indeterminate Checkbox
  </label>

  <h3>Progress Bar Example</h3>
  <label for="loading">Status:</label>
  <progress id="loading"></progress>
</div>
<script>
// Select the checkbox and force the indeterminate state
const checkbox = document.getElementById('mixed-checkbox');
checkbox.indeterminate = true;
</script></body></html>