কিভাবে NuxtJS এ লোডিং প্রগ্রেস বার এবং স্পিনার ব্যবহার করবেন

3 min read

একটা ফ্রন্টএন্ড অ্যাপ্লিকেশানের জন্য লোডিং প্রগ্রেস বার এবং লোডিং ইনডিকেটর/স্পিনার খুবই গুরুত্বপূর্ণ। আপনি যদি আপনার প্রোজেক্ট এ ফ্রন্টএন্ড ফ্রেমওয়ার্ক হিসাবে Nuxt ব্যবহার করে থাকেন তাহলে আপনাকে লোডিং প্রগ্রেস বার অথবা স্পিনার এসব নিয়ে চিন্তার কিছু নেই। কারণ Nuxt আউট অফ দা বক্স এই ফিচার গুলো আমাদেরকে নিজেই দিয়ে থাকে, আমাদেরকে শুধু এগুলো কিভাবে ব্যবহার করতে হয় সেইটা জানতে হবে। চলুন তাহলে আর দেরি না করে এখনি শুরু করি কিভাবে আমরা NuxtJS ব্যবহার করে তৈরি করা ফ্রন্টএন্ড অ্যাপ্লিকেশানে লোডিং প্রগ্রেস বার এবং লোডিং স্পিনার ব্যবহার করতে পারি।

NuxtJS কিঃ

আমরা যারা NUXT লোডিং প্রগ্রেস বার এবং স্পিনার সম্পর্কে জানতে এসেছি তারা হয়তো ইতিমধ্যেই জেনে এসেছি NUXT সম্পর্কে। তারপরও আমি সংক্ষেপে NuxtJS সম্পর্কে আলোচনা করবো।

Nuxt হল একটি Intuitive ভিউ ফ্রেমওয়ার্ক। এটি একটি ওপেনসোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যেটি Vue.js, Node.js, Webpack এবং Babel.js এর ওপর ভিত্তি করে তৈরি হয়েছে। Nuxt মূলত Next.js থেকে অনুপ্রাণিত, যেটি একই পারপাস সমাধান করার জন্য তৈরি একটি ফ্রেমওয়ার্ক এবং যেটি React.js এর ওপর ভিত্তি করে তৈরি হয়েছে। Nuxt.js ফ্রেমওয়ার্কটিকে "সর্বজনীন অ্যাপ্লিকেশনের জন্য মেটা-ফ্রেমওয়ার্ক" হিসাবে বলা হয়।

Nuxt.js ফ্রেমওয়ার্ক ব্যবহার করে আমরা খুব সহজে সার্ভার সাইড রেন্ডারিং অ্যাপ্লিকেশান তৈরি করতে পারি এছাড়াও গ্লোবালি এবং লোকালি দুইভাবেই মেটাট্যাগ বসাতে পারি যা SEO (এস ই ও) এর জন্য খুবই দরকারি। এছাড়াও আরও অনেক অনেক ফিচার রয়েছে যা আপনি Nuxt.js ফ্রেমওয়ার্ক ব্যবহার করলে খুব সহজেই পেয়ে যাবেন। বলা যায় Nuxt.js আসলে Vue.js ডেভেলপারদের ডেভেলপমেন্ট প্রসেসকে অনেক অনেক গুন সহজ করে দিয়েছে।

NuxtJS লোডিং প্রগ্রেস বারঃ

লোডিং প্রগ্রেস বার মূলত রাউট পরিবর্তনের সময় দেখা যায়। Nuxt.js আউট অফ দা বক্স আমাদেরকে লোডিং প্রগ্রেস বার দিয়ে থাকে আমরা চাইলে এই লোডিং প্রগ্রেস বারকে কাস্টোমাইজ, ডিসএবল এমনকি নিজেদের পছন্দ মতো নতুন করে তৈরি করতে পারি।

লোডিং প্রগ্রেস বার একটিভ এবং কাস্টোমাইজ করাঃ

লোডিং প্রগ্রেস বার একটিভ করার জন্য nuxt.config.js ফাইলের export default { //code here } অবজেক্ট এর মধ্যে loading প্রপার্টি লিখতে হবে।

সবুজ লোডিং প্রগ্রেস বার সাথে 5px হাইট এর জন্য নিম্নের কোডটি nuxt.config.js ফাইলে লিখতে হবে।

export default {
  loading: {
    color: 'green',
    height: '5px',
    throttle: 0
  }
}

আমরা অনেক কিছু কাস্টোমাইজ করতে পারি যেমনঃ কালার (কালার নাম অথবা হেক্স কোড) পরিবর্তন করা, হাইট (Height), সময়সীমা (Duration), rtl সাইটের জন্য ডাইরেকশন (Direction) এমনকি লোডিং টাইম যদি Duration এর বেশি হয় সেক্ষেত্রে লোডিং প্রগ্রেস বার আমরা এনিম্যাটিং দেখাতে পারি (এক্ষেত্রে continuous: true করতে হবে)।

export default {
  loading: {
    color: 'green',
    height: '5px',
    duration: 1000,
    rtl: true,
    continuous: true
  }
}

লোডিং প্রগ্রেস বার ডিসএবল করাঃ

আমরা খুব সহজে লোডিং প্রগ্রেস বার গ্লোবালি এবং লোকালি ডিসএবল করতে পারি। আমরা যদি গ্লোবালি লোডিং প্রগ্রেস বার ডিসএবল করতে চাই তাহলে nuxt.config.js ফাইলের export default { //code here } অবজেক্ট এর মধ্যে loading: false লিখতে হবে। নিম্নের কোডটি দেখলে আশা করি বুঝতে পারবেনঃ

export default {
  loading: false
}

এছাড়াও আমরা লোকালি মানে নির্দিষ্ট পেজ থেকেও লোডিং প্রগ্রেস বার ডিসএবল করতে পারি। এই জন্য আমাদেরকে নির্দিষ্ট পেজের স্ক্রিপ্ট সেকশনের export default { //code here } অবজেক্ট এর মধ্যে loading: false লিখতে হবে। নিম্নের কোডটি দেখলে আশা করি বুঝতে পারবেনঃ

<template>
  <h1>Contact Us Page</h1>
</template>

<script>
  export default {
    loading: false
  }
</script>

কাস্টম লোডিং প্রগ্রেস বারঃ

এছাড়াও আমরা চাইলে নিজেদের মত কাস্টম লোডিং প্রগ্রেস বার তৈরি করতে পারি। এই জন্য প্রথমেই আমরা components ডিরেক্টরির মধ্যে LoadingBar.vue নামে একটা ফাইল তৈরি করে নিবো এবং LoadingBar.vue ফাইলে এ নিম্নের কোড গুলো লিখবো।

<template>
  <div v-if="loading" class="loading-page">
    <p>Loading...</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      loading: false
    }),
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
  }
</script>

<style scoped>
  .loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 200px;
    font-size: 30px;
    font-family: sans-serif;
  }
</style>

এখন nuxt.config.js ফাইলে loading প্রপার্টিতে আমাদের তৈরি করা কাস্টম লোডিং প্রগ্রেস বারের জন্য তৈরি করা LoadingBar.vue ফাইলের পাথ লিখে দিবো। নিম্নের কোডটি দেখলে আশা করি বুঝতে পারবেনঃ

export default {
  loading: '~/components/LoadingBar.vue'
}

NuxtJS লোডিং ইনডিকেটর/স্পিনারঃ

Nuxt.js প্রোজেক্ট যখন সিঙ্গেল পেজ এপ্লিকেশন (SPA) মোডে চলে তখন প্রথম পেজ লোডের সময় সার্ভার থেকে কোন কন্টেন্ট থাকে না যার ফলে আমরা ফাঁকা পেজ দেখতে পারি যেটা মোটেও কাম্য না। আমরা যদি এমন ফাঁকা পেজ এর পরিবর্তে লোডিং ইনডিকেটর/স্পিনার দেখাতে চাই তাহলে Nuxt.js এর লোডিং স্পিনার ফিচারটি ব্যবহার করতে পারি। আমরা চাইলে Nuxt.js এর লোডিং স্পিনারটিকে ইচ্ছামত কাস্টোমাইজ করতে পারি এমনকি নিজেরদের মতো করে কাস্টম ডিজাইনও করতে পারি।

এই জন্য প্রথমেই আমাদেরকে nuxt.config.js ফাইল থেকে সার্ভার সাইড রেন্ডারিং (SSR) মোড ডিসএবল করে নিতে হবে। কোড নিম্নরুপঃ

export default {
 ssr: false
}

লোডিং ইনডিকেটর/স্পিনার একটিভ এবং কাস্টোমাইজ করাঃ

লোডিং ইনডিকেটর/স্পিনার একটিভ করার জন্য nuxt.config.js ফাইলের export default { //code here } অবজেক্ট এর মধ্যে loadingIndicator প্রপার্টি লিখতে হবে।

সার্কেল টাইপ স্পিনার সাথে কাস্টম কালার এবং সাদা ব্যাকগ্রাউন্ড স্পিনার তৈরি করার জন্য নিম্নের কোডটি nuxt.config.js ফাইলে লিখতে হবে।

export default {
 loadingIndicator: {
   name: 'circle',
   color: '#3B8070',
   background: 'white'
 }
}

Nuxt.js ডিফল্ট যে স্পিনার ব্যবহার করে সেগুলো মূলত SpinKit প্রোজেক্ট থেকে নেয়া। আপনি চাইলে SpinKit থেকে ডেমো দেখে আসতে পারেন। Nuxt.js এ আমরা নিম্নের স্পিনার টাইপ গুলো ব্যবহার করতে পারি।

  • circle
  • cube-grid
  • fading-circle
  • folding-cube
  • chasing-dots
  • nuxt
  • pulse
  • rectangle-bounce
  • rotating-plane
  • three-bounce
  • wandering-cubes

যেমন আমরা এখন folding-cube টাইপের স্পিনার তৈরি করবো এই জন্য নিম্নের কোডটি লিখতে হবেঃ

export default {
	loadingIndicator: {
 		name: 'folding-cube',
 		color: 'blue',
 		background: 'white'
	}
}

কাস্টম লোডিং ইনডিকেটর/স্পিনারঃ

কাস্টম লোডিং ইনডিকেটর/স্পিনার তৈরি করার জন্য একটি এইচটিএমএল ফাইল তৈরি করতে হবে এবং তৈরিকৃত এইচটিএমএল ফাইলে কাস্টম স্পিনারের এইচটিএমএল সিএসএস কোড লিখতে হবে এবং nuxt.config.js ফাইলে কাস্টম ইনডিকেটর/স্পিনারের এইচটিএমএল ফাইলটিকে কল করে ব্যবহার করতে হবে। তবে কোড ফরম্যাটিং বোঝার জন্য Nuxt.js এর ডিফল্ট স্পিনার কিভাবে তৈরি হয়েছে সেগুলোর সোর্স কোড দেখে আসতে পারেন।

কাস্টম লোডিং ইনডিকেটর/স্পিনার তৈরি করার জন্য নিম্নের ধাপ গুলো অনুসরণ করতে হবেঃ

  • প্রথমেই Nuxt প্রোজেক্ট এর রুট ফোল্ডারে spinner নামে একটা ফোল্ডার তৈরি করবো।
  • spinner ফোল্ডারের এর মধ্যে কাস্টম স্পিনারের জন্য my-loading-spinner.html নামে একটি এইচটিএমএল ফাইল তৈরি করবো (এখানে আপনি আপনার পছন্দমতো স্পিনার তৈরি করবেন)।
  • কাস্টম স্পিনার এইচটিএমএল ফাইলটিকে nuxt.config.js ফাইলে ইম্পোর্ট করবো।

কাস্টম স্পিনারটিকে দুইভাবে ইম্পোর্ট করা যায় নিম্নরূপঃ

  • সরাসরি কাস্টম স্পিনার ইম্পোর্ট করার জন্য nuxt.config.js ফাইলে শুধুমাত্র কাস্টম স্পিনার পাথ লিখে দিলেই হয়ে যাবেঃ
export default {
	loadingIndicator: '~/spinner/my-loading-spinner.html',
}
  • আপনি যদি Nuxt এর ডিফল্ট স্পিনার গুলোর ফরম্যাট অনুসরণ করে কাস্টম স্পিনার তৈরি করে থাকেন তাহলে আপনি কাস্টোমাইজ অপশনও লিখে দিতে পারবেন কাস্টম স্পিনার ইম্পোর্ট করার সময়। নিম্নের কোডটি দেখলে আশা করি বুঝতে পারবেনঃ
export default {
	loadingIndicator: {
    	name: '~/spinner/my-loading-spinner.html',
    	color: '#00DC82',
    	background: '#001e26'
    }
}

এখানে আমি চেষ্টা করছি কিভাবে আমরা খুব সহজেই আমাদের Nuxt প্রোজেক্টে লোডিং প্রগ্রেস বার এবং স্পিনার ব্যবহার করতে পারি। আপনি যদি আরও বিস্তারিত জানতে চান তাহলে Nuxt এর লোডিং সম্প্রকৃত অফিসিয়াল ডকুমেন্টেশনটি দেখতে পারেন।

Lets work together

Need a successful project?

I’m available for freelance work.

Hire/Contact Me Now