<template>
	<view class="progress-bar-wrapper">
		<view class="progress" :style="{ width: progress + '%' }"></view>
	</view>
</template>

<script setup lang="ts">
defineProps<{ progress: number }>();
</script>

<script lang="ts">
export default {
	name: "ProgressBar"
};
</script>

<style lang="scss" scoped>
$progress-bar-height-def: 30rpx;
.progress-bar-wrapper {
	width: 100%;
	height: var(--progress-bar-height, $progress-bar-height-def);
	background: var(--progress-bar-background, #f9f9f9);
	border-radius: var(--progress-bar-height, $progress-bar-height-def);

	// @include box-shadow($y: 2rpx);
	box-shadow: 0 0 10rpx rgb(0 0 0 / 8%);
	.progress {
		height: 100%;
		background: var(--progress-bar-active-background, cornflowerblue);
		background-image: linear-gradient(
			45deg,
			rgb(255 255 255 / 15%) 25%,
			transparent 25%,
			transparent 50%,
			rgb(255 255 255 / 15%) 50%,
			rgb(255 255 255 / 15%) 75%,
			transparent 75%,
			transparent
		);
		background-size: var(--progress-bar-height, $progress-bar-height-def);
		border-radius: var(--progress-bar-height, $progress-bar-height-def);
	}
}
</style>
