How To Add Preloader In Website – दोस्तों preloader जिसको loading screen भी कहा जाता है | Preloaders किसी भी प्रकार से बनाए जा सकते हैं आप चाहे तो GIF image भी लगा सकते हैं | कुछ preloader ऐनिमेशन से भरे हो सकते हैं जो देखनें में काफ़ी अच्छे लगते हैं और इन्हें बनाना भी आसान है |
दोस्तों वेबसाइट में preloader लगाने से पहले कुछ पॉइंट हैं जो आपको समझनें चाहिए, ताकि preloader को लगाने में कोई परेशानी ना हो |
Preloader क्या है ?
दोस्तों जब भी हम कोई वेबसाइट पर 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 क्रैश नहीं हुई है, बस ब्राउज़र थोड़ा व्यस्त है content लोड करने में |
इसी कारण website में preloader लगाना चाहिए और उस preloader की डिजाईन भी अच्छी करनीं चाहिए |
आज के आर्टिकल में आप सीखोगे How To Add Preloader In Website
How To Add Preloader In Website
इसके लिए आपको HTML तैयार करना है कुछ इस तरह
<div class="outer-loader">
<div class="wrap">
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
<div class="main-loader"></div>
</div>
</div>
अब HTML की CSS करनीं है कुछ इस प्रकार से
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.outer-loader{
background: #000;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrap{
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.main-loader{
height: 100px;
width: 5px;
margin: 0 2px;
border-radius: 5px;
background-image: linear-gradient(
180deg,
orange 10%,
white 50%,
green 90%
);
transform-origin: bottom;
animation: preloader 1s linear infinite;
}
.main-loader:nth-child(2){
animation-delay: .1s;
}
.main-loader:nth-child(3){
animation-delay: .2s;
}
.main-loader:nth-child(4){
animation-delay: .3s;
}
.main-loader:nth-child(5){
animation-delay: .4s;
}
.main-loader:nth-child(6){
animation-delay: .5s;
}
.main-loader:nth-child(7){
animation-delay: .6s;
}
.main-loader:nth-child(8){
animation-delay: .7s;
}
.main-loader:nth-child(9){
animation-delay: .8s;
}
.main-loader:nth-child(10){
animation-delay: .9s;
}
.main-loader:nth-child(11){
animation-delay: 1s;
}
.main-loader:nth-child(12){
animation-delay: 1.1s;
}
.main-loader:nth-child(13){
animation-delay: 1.2s;
}
.main-loader:nth-child(14){
animation-delay: 1.3s;
}
.main-loader:nth-child(15){
animation-delay: 1.4s;
}
@keyframes preloader{
0%,
100%{
transform: scale(1);
}
50%{
transform: scale(.3);
}
}
इसके आलावा और भी HTML और CSS से related आर्टिकल है जो आपको पढनें चाहिए |
दोस्तों जरूरी नहीं की आप CSS की मदद से ही preloader add करें या preloader की डिजाईन करें आप इसमें gif image की सहायता ले सकते हैं या फिर आप javascript या jQuery की सहायता भी ले सकते हैं |
आप jQuery की सहायता से भी preloader लगा सकते हैं जिसका Live Demo आप देख सकते हैं |
Preloader से जुड़े सवाल और जवाब
दोस्तों कोई भी काम हो उसे करने से पहले सभी के मन में कुछ सवाल होते हैं तो इसी बात को ध्यान में रखते हुए कुछ सवाल और जवाब लिखें हैं जो आप नीचे देख सकते हैं |
Q – Preloader की शक्ति ?
A – दोस्तों Preloader शानदार दिखने के साथ आपकी वेबसाइट की कार्यक्षमता में भी महत्वपूर्ण भूमिका निभाते हैं | एक अच्छे preloader की सहायता से आप अपनें consumers के साथ एक विस्वास से भरपूर रिस्ता बना सकते हैं |
Preloader की सहायता से आप ख़राब कनेक्शन से होनें वाली कमी को ढक सकते हैं इसलिए जहाँ preloader की ज़रूरत हो वहाँ preloader लगा देना चाहिए |
Q – Website पर Preloader लगाने के फ़ायदे ?
A – दोस्तों website पर ज़रूरत हो या ना हो, अगर preloader लगाया हुवा है तो इससे आपके यूज़र को एक सकारात्मक ओर बेहतर user experience मिलेगा जिससे यूज़र का website के प्रति जुड़ाव बढ़ेगा और website की रैंक पर यह सबसे ज़्यादा प्रभाव डालता है |
इसके अलावा अगर आपकी website पर preloader add किया हुवा है तो इससे website अधिक professional लगेगी और user का विस्वास बढ़ेगा |
How To Add Preloader In Website Conclusion
आज के आर्टिकल में आपने सिखा की preloader क्या है और कैसे हम CSS की सहायता से एक अच्छा लोडर बना सकते हैं | उमीद है दोस्तों How To Add Preloader In Website के इस आर्टिकल से आपनें कुछ नया सिखा होगा |
अगर कुछ नया सिखा है तो आप website को follow कर सकते हैं और ताज़ा अपडेट पानें के लिए आप मेरे सोशल मीडिया से जुड़ सकते हैं | इसके अलावा अगर आपके कोई और सवाल हैं तो आप नीचे कॉमेंट कर सकते हैं या फिर email भी कर सकते हैं |
धन्यवाद