mirror of
https://github.com/modrinth/code.git
synced 2026-08-26 17:44:50 +00:00
Adrian O.VandJai A
71cf2c53f5
* Implement loading * LoadingBar * Run linter * Update App.vue * Loading bar all the things * Update SplashScreen.vue * Update SplashScreen.vue * Update App.vue * initial revert * Update Instance.vue * revert css * Fix instance * More reverting * Run lint * Finalize changes * Revert "Merge branch 'master' into loading" This reverts commit3014e765fb, reversing changes made tob780e859d2. * Fix loading issues * fix lint * Revert "Revert "Merge branch 'master' into loading"" This reverts commit971ef84666. --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me>
34 lines
591 B
Vue
34 lines
591 B
Vue
<template>
|
|
<div class="progress-bar">
|
|
<div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
progress: {
|
|
type: Number,
|
|
required: true,
|
|
validator(value) {
|
|
return value >= 0 && value <= 100
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 0.5rem;
|
|
background-color: var(--color-button-bg);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar__fill {
|
|
height: 100%;
|
|
background-color: var(--color-brand);
|
|
transition: width 0.3s;
|
|
}
|
|
</style>
|