نوار پیشرفت لود صفحه در spa

مثل یوتیوب که یه نوار پیشرفت داره

درود...
پیوند زیر:
https://www.vuescript.com/reading-progressbar-component-vue-progress-scroll/

@endworld
بنظر میاد این برای اسکروله
مطمئنین به درد لود صفحه هم میخوره؟
ولی بازم جالب بود ازش استفاده میکنم😃

سلام
یک دور منطق کار رو بررسی کنیم:
اصلا این جناب loading باید چه زمانی شروع بشه و در چه زمانی تمام بشه؟ باید یک زمان مشخص برایش مشخص کنیم یا ...؟ منطقی است که باید صبر کنیم تا محتوای هر صفحه load بشود. بعد از اتمام دریافت اطلاعات از سرور (مثلا اطلاعات یک post)، لودینگ باید حذف بشود و به جای آن محتوای مورد نظر ظاهر بشود.
طبیعی است که باید یک متغیر با نام loading تعریف کنیم. حال درخواست را به سرور ارسال می‌کنیم و پس از دریافت اطلاعات loading را برابر با false می‌کنیم و مثلا متغییر دیگری با نام article را برابر با محتوای دریافت شده قرار می‌دهیم. مثال در کد:

<template>
<div style="padding: 25px;" v-if="loading">
          <div style="margin-right: 5rem;" class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
      </div>
<div>
{{ article }}
</div>
</template>

<script>
import { ref } from "vue";
import axios from "axios";

export default {
  setup() {
    const article = ref([]);
    const loading = ref(true);

    function getArticles() {
      axios
        .get(`http://localhost:8000/api/v1/article/${route.params.slug}`)
        .then(function (response) {
            article.value = response.data.data;
            loading.value = false;
        });
    }
    getArticles();
    return { getArticles, article, loading };
  },
};
</script>

<style scoped>

</style>

پی‌نوشت: کد رو در همین محطی راکت نوشتم و امکان اینکه اشتباهات تایپی و غیر تایپی داخلش باشد زیاد است. سعی کنید مفهوم حرفم رو بفهمید. اگر هم خیلی غیرواضح توضیح دادم، عذر می‌خواهم.

@gomnam
درست میگین ولی من تاحالا از ajax برای دریافت اطلاعات استفاده نکردم من از vue cli استفاده میکنم و با استفاده از vue router ویو هارو نمایش میدم
ببخید شاید اطلاعات من خیلی کم باشه😅

@abdolrahman

دقیقا مثل یوتیوبه....
امتحان کن

@endworld
امتحان کردم
من منظورم اینه که وقتی صفحه داشت لود میشد یه چیزی مثل همین باشه که نشون بده چقدرش لود شده
اگر راهی دارین که همینو موقع لود شدن صفحه همونطور که گفتم نشون بده ، ممنون میشم بگین

بالاخره یه راه پیدا کردم!!
یه کتابخانه به اسم NProgress پیدا کردم که این میتونه پروگرس بار برامون درست کنه
و توی فایل روت کار هایی که اینجا گفته رو انجام دادم

@abdolrahman
یک کمی بیشتر کار کنی بهتره دوست عزیز ...!
از دوره درست و حسابی استفاده کنی هم خیلی بهتره
امیدوارم مفید بوده باشه ...!

@gomnam
منظورتونو نمیفهمم
یعنی چیزی باید میدونستم که نمیدونم؟
آخه تا الان نیازی به ای جکس نبوده ... مگر در آینده که بخوام با ای پی آی از بک اند اطلاعات بگیرم که در بخش بعدی دوره ای که دارم میبینم یاد داده . هنوز به اون بخش نرسیدم
من تازه کارم اگه بیشتر توضیح بدین ممنون میشم

@abdolrahman
خیلی مهم نیست، فکر کردم یک دوره رو کامل دیدید و هنوز کار با api رو یاد نگرفتید ...