How To Add Preloader In Website

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 आर्टिकल है जो आपको पढनें चाहिए |

1. WordPress Dashboard Tutorial In Hindi
2. HTML में Font Family कैसे add करें

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

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

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

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

How To Add Preloader In Website Conclusion

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

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

धन्यवाद