noph-ui 0.34.4 → 0.35.0

package/dist/progress/CircularProgress.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity'
 	import type { CircularProgressProps } from './types.ts'
 
 	let {
@@ -6,33 +7,108 @@
 		max = 1,
 		indeterminate = false,
 		fourColor = false,
+		track = true,
+		wavy = false,
 		...attributes
 	}: CircularProgressProps = $props()
+
+	const WAVE_AMPLITUDE_DP = 1.6
+	const WAVE_WAVELENGTH_DP = 15
+
+	const VIEWBOX = 4800
+	const DEFAULT_STROKE_PERCENT = 8.3333
+	const BOX_DP = 48
+	const unitsPerDp = VIEWBOX / BOX_DP
+	const ampUnits = WAVE_AMPLITUDE_DP * unitsPerDp
+	const ringRadius = (strokePercent: number) =>
+		VIEWBOX / 2 - ((strokePercent / 100) * VIEWBOX) / 2 - ampUnits
+	const ringWaveCount = (radius: number) =>
+		Math.max(1, Math.round((2 * Math.PI * radius) / (WAVE_WAVELENGTH_DP * unitsPerDp)))
+
+	const buildWavePath = (phase: number, strokePercent: number) => {
+		const radius = ringRadius(strokePercent)
+		const count = ringWaveCount(radius)
+		const c = VIEWBOX / 2
+		const steps = count * 24
+		let d = ''
+		for (let i = 0; i <= steps; i++) {
+			const t = (i / steps) * Math.PI * 2
+			const r = radius + ampUnits * Math.cos(count * t - phase)
+			const x = (c + r * Math.cos(t)).toFixed(2)
+			const y = (c + r * Math.sin(t)).toFixed(2)
+			d += (i === 0 ? 'M' : 'L') + x + ',' + y
+		}
+		return d + 'Z'
+	}
+
+	let waveEl = $state<SVGPathElement>()
+	const wavePath = buildWavePath(0, DEFAULT_STROKE_PERCENT)
+
+	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
+	let wave = $derived(wavy && !reducedMotion.current)
+
+	$effect(() => {
+		if (!wave || !waveEl) return
+		const path = waveEl
+		const strokePercent =
+			parseFloat(
+				getComputedStyle(path).getPropertyValue('--np-circular-progress-active-indicator-width'),
+			) || DEFAULT_STROKE_PERCENT
+		let raf = 0
+		const frame = (now: number) => {
+			raf = requestAnimationFrame(frame)
+			path.setAttribute('d', buildWavePath(((now / 1000) % 1) * Math.PI * 2, strokePercent))
+		}
+		raf = requestAnimationFrame(frame)
+		return () => cancelAnimationFrame(raf)
+	})
+
+	const clamp = (n: number) => Math.min(100, Math.max(0, n))
+	let activeLength = $derived(clamp((value / max) * 100))
+	let activeStyle = $derived(`--_active:${activeLength}`)
 </script>
 
 <div class="np-container">
 	<div
 		{...attributes}
-		class={['progress', indeterminate && 'indeterminate', fourColor && 'four-color']}
+		class={[
+			'progress',
+			indeterminate && 'indeterminate',
+			fourColor && 'four-color',
+			wave && 'wavy',
+		]}
+		style={activeStyle}
 		role="progressbar"
 		aria-valuemin="0"
 		aria-valuemax={max}
 		aria-valuenow={indeterminate ? undefined : value}
 	>
 		{#if indeterminate}
-			<div class="spinner">
-				<div class="left">
-					<div class="circle"></div>
-				</div>
-				<div class="right">
-					<div class="circle"></div>
-				</div>
-			</div>
+			<svg class="spinner" viewBox="0 0 4800 4800">
+				{#if track}
+					<circle class="track spinner-track" pathLength="100"></circle>
+				{/if}
+				{#if wave}
+					<path
+						bind:this={waveEl}
+						class="active-track spinner-arc wave"
+						d={wavePath}
+						pathLength="100"
+					></path>
+				{:else}
+					<circle class="active-track spinner-arc" pathLength="100"></circle>
+				{/if}
+			</svg>
 		{:else}
 			<svg viewBox="0 0 4800 4800">
-				<circle class="track" pathLength="100"></circle>
-				<circle class="active-track" pathLength="100" stroke-dashoffset={(1 - value / max) * 100}
-				></circle>
+				{#if track}
+					<circle class="track" pathLength="100"></circle>
+				{/if}
+				{#if wave}
+					<path bind:this={waveEl} class="active-track wave" d={wavePath} pathLength="100"></path>
+				{:else}
+					<circle class="active-track" pathLength="100"></circle>
+				{/if}
 			</svg>
 		{/if}
 	</div>
@@ -57,11 +133,12 @@
 		align-self: stretch;
 		margin: 0.25rem;
 	}
+
+	.progress.wavy {
+		margin: 0;
+	}
 	.progress,
 	.spinner,
-	.left,
-	.right,
-	.circle,
 	svg,
 	.track,
 	.active-track {
@@ -71,164 +148,184 @@
 
 	svg {
 		transform: rotate(-90deg);
+		transform-origin: 50% 50%;
 	}
-	circle {
-		cx: 50%;
-		cy: 50%;
-		r: calc(50% * (1 - var(--np-circular-progress-active-indicator-width, 8.3333) / 100));
+	circle,
+	.wave {
 		stroke-width: calc(var(--np-circular-progress-active-indicator-width, 8.3333) * 1%);
 		stroke-dasharray: 100;
 		fill: transparent;
 	}
 
-	.active-track {
-		transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
-		stroke: var(--np-circular-progress-color, var(--np-color-primary));
+	circle {
+		cx: 50%;
+		cy: 50%;
+		r: calc(50% * (1 - var(--np-circular-progress-active-indicator-width, 8.3333) / 100));
+		transform-box: view-box;
+		transform-origin: 50% 50%;
 	}
 
-	.track {
-		stroke: transparent;
+	.progress {
+		--_stroke: var(--np-circular-progress-active-indicator-width, 8.3333);
+		--_gap: calc((0.1 + var(--_stroke) / 100) / (3.14159265 * (1 - var(--_stroke) / 100)) * 100);
 	}
 
-	.progress.indeterminate {
-		animation: linear infinite linear-rotate;
-		animation-duration: calc(1333ms * 360 / 306);
+	.wavy .track {
+		r: calc(50% * (1 - var(--_stroke) / 100 - 0.0666667));
 	}
 
-	.spinner {
-		animation: infinite both rotate-arc;
-		animation-duration: calc(4 * 1333ms);
-		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	.progress.wavy {
+		--_gap: calc(
+			(0.0833333 + var(--_stroke) / 100) / (3.14159265 * (1 - var(--_stroke) / 100 - 0.0666667)) *
+				100
+		);
 	}
 
-	.left {
-		overflow: hidden;
-		inset: 0 50% 0 0;
+	.progress:not(.indeterminate) .active-track {
+		stroke-dashoffset: calc((100 - var(--_active)) * 1px);
 	}
 
-	.right {
-		overflow: hidden;
-		inset: 0 0 0 50%;
+	.progress:not(.indeterminate) .track {
+		--_g: min(var(--_active), var(--_gap));
+		stroke-dasharray: calc(max(0, 100 - var(--_active) - 2 * var(--_g)) * 1px) 100px;
+		stroke-dashoffset: calc((var(--_active) + var(--_g)) * -1px);
 	}
 
-	.circle {
-		box-sizing: border-box;
-		border-radius: 50%;
-		border: solid
-			calc(
-				calc(var(--np-circular-progress-active-indicator-width, 8.3333) / 100) *
-					calc(var(--np-circular-progress-size, 3rem) - 2 * 0.25rem)
-			);
-		border-color: var(--np-circular-progress-color, var(--np-color-primary))
-			var(--np-circular-progress-color, var(--np-color-primary)) transparent transparent;
-		animation: expand-arc;
-		animation-iteration-count: infinite;
-		animation-fill-mode: both;
-		animation-duration: 1333ms, calc(4 * 1333ms);
-		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	.active-track,
+	.track {
+		stroke-linecap: round;
 	}
 
-	.four-color .circle {
-		animation-name: expand-arc, four-color;
+	.active-track {
+		transition: stroke-dashoffset var(--np-motion-expressive-slow-effects);
+		stroke: var(--np-circular-progress-color, var(--np-color-primary));
 	}
 
-	.left .circle {
-		rotate: 135deg;
-		inset: 0 -100% 0 0;
+	.track {
+		stroke: var(--np-circular-progress-track-color, var(--np-color-secondary-container));
+		transition:
+			stroke-dasharray var(--np-motion-expressive-slow-effects),
+			stroke-dashoffset var(--np-motion-expressive-slow-effects);
 	}
-	.right .circle {
-		rotate: 100deg;
-		inset: 0 0 0 -100%;
-		animation-delay: calc(-0.5 * 1333ms), 0ms;
+
+	.progress.indeterminate {
+		animation: cp-global-rotation 6000ms linear infinite;
 	}
 
-	@media (forced-colors: active) {
-		.active-track {
-			stroke: CanvasText;
+	@keyframes cp-global-rotation {
+		to {
+			rotate: 1080deg;
 		}
+	}
 
-		.circle {
-			border-color: CanvasText CanvasText Canvas Canvas;
-		}
+	.spinner {
+		animation: cp-step-rotation 6000ms linear infinite;
 	}
-	@keyframes expand-arc {
+
+	@keyframes cp-step-rotation {
 		0% {
-			transform: rotate(265deg);
+			rotate: 0deg;
 		}
-		50% {
-			transform: rotate(130deg);
-		}
-		100% {
-			transform: rotate(265deg);
-		}
-	}
-	@keyframes rotate-arc {
-		12.5% {
-			transform: rotate(135deg);
+		5% {
+			rotate: 90deg;
 		}
 		25% {
-			transform: rotate(270deg);
+			rotate: 90deg;
 		}
-		37.5% {
-			transform: rotate(405deg);
+		30% {
+			rotate: 180deg;
 		}
 		50% {
-			transform: rotate(540deg);
+			rotate: 180deg;
 		}
-		62.5% {
-			transform: rotate(675deg);
+		55% {
+			rotate: 270deg;
 		}
 		75% {
-			transform: rotate(810deg);
+			rotate: 270deg;
 		}
-		87.5% {
-			transform: rotate(945deg);
+		80% {
+			rotate: 360deg;
 		}
 		100% {
-			transform: rotate(1080deg);
+			rotate: 360deg;
 		}
 	}
-	@keyframes linear-rotate {
-		to {
-			transform: rotate(360deg);
-		}
+
+	.spinner-arc {
+		transition: none;
+		animation: cp-arc-sweep 6000ms infinite;
 	}
-	@keyframes four-color {
+
+	@keyframes cp-arc-sweep {
 		0% {
-			border-top-color: var(--np-color-primary);
-			border-right-color: var(--np-color-primary);
+			stroke-dasharray: 10px 100px;
+			animation-timing-function: linear;
 		}
-		15% {
-			border-top-color: var(--np-color-primary);
-			border-right-color: var(--np-color-primary);
+		50% {
+			stroke-dasharray: calc((100 - 2 * var(--_gap)) * 1px) 100px;
+			animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
 		}
-		25% {
-			border-top-color: var(--np-color-primary-container);
-			border-right-color: var(--np-color-primary-container);
+		100% {
+			stroke-dasharray: 10px 100px;
 		}
-		40% {
-			border-top-color: var(--np-color-primary-container);
-			border-right-color: var(--np-color-primary-container);
+	}
+
+	.spinner-track {
+		transition: none;
+		animation: cp-track-sweep 6000ms infinite;
+	}
+
+	@keyframes cp-track-sweep {
+		0% {
+			stroke-dasharray: calc((90 - 2 * var(--_gap)) * 1px) 100px;
+			rotate: calc((10 + var(--_gap)) * 3.6deg);
+			animation-timing-function: linear;
 		}
 		50% {
-			border-top-color: var(--np-color-tertiary);
-			border-right-color: var(--np-color-tertiary);
+			stroke-dasharray: 0px 100px;
+			rotate: calc((100 - var(--_gap)) * 3.6deg);
+			animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
 		}
-		65% {
-			border-top-color: var(--np-color-tertiary);
-			border-right-color: var(--np-color-tertiary);
+		100% {
+			stroke-dasharray: calc((90 - 2 * var(--_gap)) * 1px) 100px;
+			rotate: calc((10 + var(--_gap)) * 3.6deg);
 		}
-		75% {
-			border-top-color: var(--np-color-tertiary-container);
-			border-right-color: var(--np-color-tertiary-container);
+	}
+
+	.four-color .spinner-arc {
+		animation-name: cp-arc-sweep, four-color;
+		animation-duration: 6000ms, calc(4 * 1333ms);
+	}
+
+	@media (forced-colors: active) {
+		.active-track {
+			stroke: CanvasText;
+		}
+
+		.spinner-arc {
+			stroke: CanvasText;
+		}
+	}
+	@keyframes four-color {
+		0%,
+		15% {
+			stroke: var(--np-color-primary);
+		}
+		25%,
+		40% {
+			stroke: var(--np-color-primary-container);
+		}
+		50%,
+		65% {
+			stroke: var(--np-color-tertiary);
 		}
+		75%,
 		90% {
-			border-top-color: var(--np-color-tertiary-container);
-			border-right-color: var(--np-color-tertiary-container);
+			stroke: var(--np-color-tertiary-container);
 		}
 		100% {
-			border-top-color: var(--np-color-primary);
-			border-right-color: var(--np-color-primary);
+			stroke: var(--np-color-primary);
 		}
 	}
 </style>