improve progress bar handle styling

Hunter
Tuesday, October 28th, 2025 at 2:17 PM


script.js+3-4


styles.css+3-3
script.js
229  }
230  
231  function resetProgressBar() {
    -	progressBar.style.setProperty('--progress', '0%');
232 +	progressBar.style.setProperty('--progress', '0');
233  }
234  
235  function updateProgressBar() {

238  		const duration = audio.duration;
239  		const progressPercentage = (currentTime / duration) * 100;
240  		const displayPercentage = isNaN(progressPercentage) ? 0 : progressPercentage;
    -
    -		progressBar.style.setProperty('--progress', `${displayPercentage}%`);
241 +		progressBar.style.setProperty('--progress', displayPercentage);
242  	}
243  }
244  

255  	const clickPosition = clientX - rect.left;
256  	const clickPercentage = Math.max(0, Math.min(1, clickPosition / rect.width));
257  
    -	progressBar.style.setProperty('--progress', `${clickPercentage * 100}%`);
258 +	progressBar.style.setProperty('--progress', clickPercentage * 100);
259  	return clickPercentage;
260  }
261
styles.css
230  	background-color: var(--text);
231  	position: relative;
232  	border-radius: 1px;
    -	--progress: 0%;
233 +	--progress: 0;
234  	--circle-size: 16px;
235  }
236  

240  	left: 0;
241  	top: 0;
242  	height: 100%;
    -	width: var(--progress);
243 +	width: calc((100% - var(--circle-size) + 2px) * var(--progress) / 100 + var(--circle-size) / 2);
244  	background-color: var(--accent);
245  	border-radius: 1px;
246  	transition: none;

249  .progress-bar::after {
250  	content: '';
251  	position: absolute;
    -	left: calc(var(--progress) - var(--circle-size) / 2);
252 +	left: calc((100% - var(--circle-size) + 2px) * var(--progress) / 100 - 1px);
253  	top: 50%;
254  	transform: translateY(-50%);
255  	width: var(--circle-size);