A single progress uses pure css to achieve animation effects

see in https://codepen.io/i18n-site/pen/WNqWevp

pug

p
  input#rangeInput(type="range", min="0", max="100", value="50")
  progress#progressBar(value="50", max="100")
p
  progress(max="100", value="10")
  progress(max="100", value="40")
  progress(max="100", value="80")
  progress(max="100", value="100")

css

progress[value],
progress[value]::-webkit-progress-bar {
  border-radius: 10px;
  box-shadow: 0 0 3px inset #ccc;
  background-size: 400% 400%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23fff"/><stop offset="50%" stop-color="%23eee"/><stop offset="100%" stop-color="%23fff"/><animateTransform attributeName="gradientTransform" type="translate" from="-1 0" to="1 0" dur="2s" repeatCount="indefinite" additive="sum"/></linearGradient></defs><rect width="100%" height="100%" fill="url(%23a)"/></svg>');
}

progress[value] {
  width: 200px;
  border: 2px solid #eee;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
  height: 20px;
  --pbarbg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" preserveAspectRatio="xMidYMid"><defs><pattern id="a" patternUnits="userSpaceOnUse" width="100" height="100"><g transform="translate(7.8)"><path fill="%23ddd" d="M-40-10h10v120h-10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23eee" d="M-30-10h10v120h-10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23ddd" d="M-20-10h10v120h-10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23eee" d="M-10-10H0v120h-10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23ddd" d="M0-10h10v120H0z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23eee" d="M10-10h10v120H10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23ddd" d="M20-10h10v120H20z" transform="rotate(20 50 50) scale(1.2)"/><animateTransform attributeName="transform" type="translate" values="0 0;26 0" keyTimes="0;1" repeatCount="indefinite" dur="2s"/></g></pattern></defs><path fill="url(%23a)" d="M0 0h26v20H0z"/></svg>');
}

progress[value]::-webkit-progress-value {
  box-shadow: 0 0 3px inset #999;
  border-radius: 10px;
  background: var(--pbarbg);
  transition: all 0.5s;
}

progress::-moz-progress-bar {
  box-shadow: 0 0 3px inset #999;
  border-radius: 10px;
  background: var(--pbarbg);
  transition: all 0.5s;
}

The above is the detailed content of A single progress uses pure css to achieve animation effects. For more information, please follow other related articles on the PHP Chinese website!