ওয়েবসাইট লোডিং স্ক্রিন বানানো কি অনেক কঠিন?

না
সোজা কথায় উত্তর, না, মোটেই কঠিন না :)

তার আগে বলে নেই ছোটো করে, লোডিং স্ক্রিন কি?

ওয়েবসাইটের ওয়েবপেইজ ব্যাকগ্রাউন্ড ডাটা বেশি হলে লোড হতে সময় নেয়, এই সময় ক্লায়েন্ট বিরক্ত হতে পারে, এতে পেইজ লোড করা বন্ধ করে দিতে পারেন অথবা ওয়েবসাইটের মালিক, একজন ভিজিটর হারাতে পারেন, যা আমরা কখনোই চাই না। তাই একটি মনোরম অ্যানিমেশন দেখানোর মাধ্যমে ক্লায়েন্টকে বিনোদিত করা যেতে পারে। এই লোডিং-এর সময়ের অ্যানিমশনকে বলে লোডিং স্ক্রিন।


এই লোডিং স্ক্রিন্টি একটি সাধারন সিএসএস বা জিআইএফ ফাইল দিয়ে করা হয় এবং ওয়েবপেইজের মাঝে কোড আকারে ইম্বেড করা হয়। তারপর জাভাস্ক্রিপ্ট ডোম ব্যাবহার করে তাকে show বা hide করানো হয়।
আমি এই টিউটোরিয়ালের ক্ষেত্রে অনলোড ইভেন্ট লিসেনার ব্যাবহার করবো।

প্রথমে আমাদের একটা প্রোজেক্ট ফাইল তৈরি করতে হবে এইচটিএমএল ব্যাবহার করে। বলতে গেলে, একটা ওয়েবপেজ তৈরি করতে হবে। আমরা এই নিচের ওয়েবসাইট ব্যবহার করবো। আইফ্রেম দেয়ার কারন, এতে লোড টাইম বেশি লাগবে (যেহেতু টেস্ট ওয়েবসাইট লোকাল সার্ভারে, তাই রিমোট সার্ভার আইফ্রেম করতে হবে)



পেইজের কোডঃ
<html>
<head>
<title>Test Page</title>
<style>
body {
font-family: arial;
font-size: 35px;
}
</style>
</head>
<body>
<center>Simple Test Page
</br></br>
<iframe height="500px" width="500px" src="http://blog.grplusbd.net"><iframe>
</center>
</body>
</html>

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

এবার নাও সম্পুর্ন কোড, মাঝের বড় সিএসএসটি সিএসএস অ্যানিমেশনের কোড।

<html>
<head>
<title>Test Page</title>
<style>
body {
font-family: arial;
font-size: 35px;
}
div.loader {
font-family: roboto;
position: fixed;
top: 40%;
bottom: 0px;
left: 45%;
/* width: 100%; */
/* border: none; */
/* margin: 0; */
/* padding: 0; */
/* overflow: hidden; */
/* z-index: 999999; */
/* height: 100%; */
}
div.loading{
background-color: white;
font-family: roboto;
position: fixed;
top:0px;
bottom:0px;
right:0px;
width: 100%;
border: none;
margin:0;
padding:0;
overflow: hidden;
z-index:999999;
height: 100%;
}
</style>
<script>
function loaded(){
var doc = document.getElementById('loader');
var hide = ('display: none;');
doc.style= hide;
}
</script>
</head>
<body onload="loaded()">
<div id="loader" class="loading" style="display: inline;">
<div class="loader">
<style type='text/css'>@-webkit-keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }@keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }.uil-default-css > div:nth-of-type(1){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(2){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.4166666666666667s;animation-delay: -0.4166666666666667s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(3){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.33333333333333337s;animation-delay: -0.33333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(4){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.25s;animation-delay: -0.25s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(5){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.16666666666666669s;animation-delay: -0.16666666666666669s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(6){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.08333333333333331s;animation-delay: -0.08333333333333331s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(7){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0s;animation-delay: 0s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(8){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.08333333333333337s;animation-delay: 0.08333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(9){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.16666666666666663s;animation-delay: 0.16666666666666663s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(10){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(11){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.33333333333333337s;animation-delay: 0.33333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(12){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.41666666666666663s;animation-delay: 0.41666666666666663s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}</style><div class='uil-default-css' style='transform:scale(0.95);'><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(60deg) translate(0,-60px);transform:rotate(60deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(120deg) translate(0,-60px);transform:rotate(120deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(150deg) translate(0,-60px);transform:rotate(150deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(210deg) translate(0,-60px);transform:rotate(210deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(240deg) translate(0,-60px);transform:rotate(240deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(300deg) translate(0,-60px);transform:rotate(300deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(330deg) translate(0,-60px);transform:rotate(330deg) translate(0,-60px);border-radius:10px;position:absolute;'></div></div>
</div>
</div>
<center>Simple Test Page
</br></br>
<iframe height="500px" width="500px" src="http://blog.grplusbd.net"><iframe>
</center>
</body>
</html>

শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট