How To Add Preloader In Website

दोस्तों pre-loader जिसको loading screen भी कहा जाता है | pre-loader किसी भी प्रकार से बनाए जा सकते हैं आप चाहे तो GIF image भी लगा सकते हैं | कुछ pre-loader ऐनिमेशन से भरे हो सकते हैं जो देखनें में काफ़ी अच्छे लगते हैं और इन्हें बनाना भी आसान है |

दोस्तों वेबसाइट में pre-loader लगाने से पहले कुछ पॉइंट हैं जो आपको समझनें चाहिए, ताकि pre-loader को लगाने में कोई परेशानी ना हो |

Pre-loader क्या है?

जब भी हम कोई वेबसाइट पर visit करते हैं तो सबसे पहले हमें लोडर देखनें को मिलता है और कुछ सेकंड wait करनें के बाद उस वेबसाइट का content दिखाई देता है | दोस्तों जितने टाइम में loader पूरे तरीक़े से लोड होता है उतने टाइम में वेबसाइट का content background में लोड हो जाता है |

Preloader एक static image या फिर CSS से बनाया गया animation होता है जो की सबसे पहले screen पर डिस्प्ले होता है जबकि वेबसाइट background में लोड हो रही होती है | प्रीलोडर एनीमेशन तब समाप्त होता है जब साइट पूरी तरह से लोड हो जाती है और दिखाए जाने के लिए तैयार हो जाती है, और यूज़र loaded वेबसाइट को देख सकते हैं |

प्रीलोडर एक तरह की लोडिंग स्क्रीन हैं जो visitor को उस समय ingage करती हैं जब तक सर्वर वेबसाइट के कंटेंट को processes करता है | UX design research की study में पाया गया कि preloader एक website’s experience के लिए जरूरी चीज है |

सही तरीक़े से और एक अच्छे preloader से website के visitor को यह विस्वास हो जाता है की website क्रैश नहीं हुई है, बस ब्राउज़र थोड़ा busy है content लोड करने में या हो सकता है कि इंटरनेट कमजोर है |

इसी कारण website में preloader लगाना चाहिए और उस preloader की डिजाईन भी अच्छी करनीं चाहिए |

आज के आर्टिकल में आप सीखोगे How To Add Preloader In Website

How To Add Preloader In Website

इसके लिए आपको HTML, CSS और JS का इस्तेमाल करना है नीचे बताए गए steps के अनुसार |

STEP 1: पहले स्टेप में आपको body tag के अंदर ये HTML set करना है,

<div id="pageLoader">
		<div class="bubble"></div>
</div>

STEP 2: अब दूसरे स्टेप पर आप इसको स्टाइल कर सकते हैं और ध्यान रहे की यह style पूरे प्रोजेक्ट में apply हो या फिर जिस भी पेज पर आप करना चाहे कर सकते हैं, CSS आप अपने अनुसार लिख सकते हैं |

/* Page Load animation */
#pageLoader > div {
	-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
	animation: sk-scaleout 1.0s infinite ease-in-out;
	background-color: #5c5757;
	border-radius: 100%;
	height: 6em;
	width: 6em;
}
#pageLoader {
	align-items: center;
	background-color: #020101;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
@keyframes sk-scaleout {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1.0);
		opacity: 0;
		transform: scale(1.0);
	}
}

STEP 3: तीसरे स्टेप में आप JavaScript या jQuery की सहायता से timeout लगा सकते हैं अपने अनुसार, यह आप पर निर्भर करता है कि आप कितनी देर बाद यूजर को रियल कंटेंट दिखाना चाहते हैं लेकिन जितना कम टाइम हो उतना बेहतर माना जाता है एक यूजर के नजरिये से |

आज के आर्टिकल में jQuery का कोड लिखा गया है जिसको नीचे आप देख सकते हैं |

$(window).on('load', function() {
  setTimeout(function() {
    $("#pageLoader").fadeOut("fast");
  }, 3000);
});

अगर आप तीनों step follow करते हैं तो जब भी आपकी वेबसाइट लोड होती है तो सबसे पहले यूजर को यह लोडिंग स्क्रीन दिखाई देगी और उसके 3 second के बाद यह लोडर स्क्रीन गायब हो जाएगी और तब तक आपका कंटेंट अच्छे तरीक़े से लोड हो जाएगा और visitor वेबसाइट पर ही बनें रहेंगे |

यह नीचे आप एक और उदाहरण देख सकते है |

दोस्तों जरूरी नहीं की आप CSS की मदद से ही preloader add करें या preloader की डिजाईन करें आप इसमें gif image की सहायता ले सकते हैं या फिर आप javascript या jQuery की सहायता भी ले सकते हैं |

आप jQuery की सहायता से भी preloader लगा सकते हैं जिसका Live Demo आप देख सकते हैं |

Preloader से जुड़े सवाल और जवाब

दोस्तों कोई भी काम हो उसे करने से पहले सभी के मन में कुछ सवाल होते हैं तो इसी बात को ध्यान में रखते हुए कुछ सवाल और जवाब लिखें हैं जो आप नीचे देख सकते हैं |

How To Add pre-loader In Website Conclusion

आज के आर्टिकल में आपने सिखा की preloader क्या है और कैसे हम CSS की सहायता से एक अच्छा लोडर बना सकते हैं | उमीद है दोस्तों How To Add Preloader In Website के इस आर्टिकल से आपनें कुछ नया सिखा होगा |

अगर कुछ नया सिखा है तो आप website को follow कर सकते हैं और ताज़ा अपडेट पानें के लिए आप मेरे सोशल मीडिया से जुड़ सकते हैं | इसके अलावा अगर आपके कोई और सवाल हैं तो आप नीचे कॉमेंट कर सकते हैं या फिर email भी कर सकते हैं |

धन्यवाद