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: 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;
}
About
This is a progress bar I developed for the markdown translation/website building tool i18n.site.
Top comments (0)