48 lines
874 B
Svelte
48 lines
874 B
Svelte
<script>
|
|
import { t } from '../lib/i18n'
|
|
|
|
export let progress = 0
|
|
export let loaded = 0
|
|
export let total = 0
|
|
export let refreshKey = 0
|
|
</script>
|
|
|
|
{#key refreshKey}
|
|
<div class="progress-container">
|
|
<div class="progress-text">
|
|
{t('loading')} {Math.round(progress)}% ({loaded}/{total})
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: {progress}%"></div>
|
|
</div>
|
|
</div>
|
|
{/key}
|
|
|
|
<style>
|
|
.progress-container {
|
|
max-width: 400px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.progress-text {
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background-color: #e9ecef;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: #007bff;
|
|
border-radius: 4px;
|
|
transition: width 0.2s ease;
|
|
}
|
|
</style>
|