JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="form-group">
  <progress value="0" max="100"></progress>
  <progress value="50" max="100"></progress>
  <progress value="100" max="100"></progress>
</div>

SCSS

.form-group {
  margin: 20px;
}

progress {
  margin: 10px 0;
  
}
progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  
  /* Get rid of default border in Firefox. */
  border: none;
  
  /* Dimensions */
  width: 100%;
  height: 20px;
  &::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 2px;
  }
  &::-webkit-progress-value {
    background: #000000;
  }
  &::-moz-progress-bar {
    background: #000000;
    border-radius: 2px;
  }
}