वेबसाइट में प्रीलोडर को कैसे सेट करे | How to Create and Add Preloader in Website in Hindi

हेलो , आपका स्वागत है Technovichar.com में। यह पोस्ट जावास्क्रिप्ट के उपयोग से अपनी वेबसाइट में प्रीलोडर को कैसे सेट किया जाए इसके बारे में है। 


Preloader क्या है ??


Preloader एक Element है जो आपकी वेबसाइट के बॉडी कंटेंट के लोड होने पर दिखाता है। Loading के बाद बॉडी कंटेंट से पहले Preloader शो होता है । Preloader आपकी वेबसाइट में कुछ प्रभावशीलता जोड़ते हैं। Preloader इमेज, एनिमेशन, एनी एनिमेशन इफेक्ट, टेक्स्ट आदि जैसी कोई भी चीज हो सकती है 



कैसे काम करता है Preloader ???



Preloader Execute करने के लिए कुछ कदम है:


1) कुछ एनीमेशन या डिज़ाइन प्रीलोडर डिज़ाइन करें या किसी ऑनलाइन GIF या एनीमेशन का उपयोग करें।


2) शो लोडर जबकि Website Body लोड हो रहा है।


3) Website Body को पूरी तरह से लोड होने पर प्रीलोडर छिपाएं।


अब यह जावास्क्रिप्ट का उपयोग करके अपनी वेबसाइट में प्रीलोडर सेट करने का स्पष्टीकरण है। 


वेबसाइट में प्रीलोडर को कैसे सेट करे??


इसके लिए हमें दो एलिमेंट की आवश्यकता है पहला है HTML फ़ाइल और दूसरा है जावास्क्रिप्ट


1) HTML फ़ाइल (index.html)


2) जावास्क्रिप्ट फ़ाइल (index.js)




पहले HTML स्क्रिप्ट लिखें :




<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How to Add Preloder In Your Website</title> <style> body{ margin:0px; padding:0px; } #loading{ background-image:url("https://cdn.dribbble.com/users/1144/screenshots/1947331/loader-animation.gif") ; background-repeat: no-repeat; position: fixed; top:0px; background-attachment: cover; width:100%; height:100%; background-size: 100% 100% } </style> </head> <body onload="myloader()"> <div id="loading"></div> <h1>Hello This is My Website Page</h1> <script src="index.js"></script> </body> </html>



Preloader Link : 

https://cdn.dribbble.com/users/1144/screenshots/1947331/loader-animation.gif



Preloader Look Like :


Website_Preloader_Preview


अब दूसरा चरण कुछ जावास्क्रिप्ट कोड लिखें:


फ़ाइल का नाम है: index.js



जावास्क्रिप्ट में हम सेटटाइमआउट () फ़ंक्सन का उपयोग करते हैं


यदि आप setTimeout फ़ंक्शन के बारे में नहीं जानते हैं तो इस लिंक की जाँच करें:

https://www.w3schools.com/jsref/met_win_settimeout.asp





function myloader(){ var loader = document.getElementById("loading"); setTimeout(function(){ loader.style.display = "none" },5000) }


GetElementById का उपयोग करके हम लोडिंग तत्व प्राप्त करते हैं। प्रीलोडर गायब होने के बाद 5000 प्रतिनिधियों की संख्या। अब साइट को ताज़ा करें और जादू देखें !!!!!!!!



यहाँ अपनी वेबसाइट के लिए कुछ बहुत बढ़िया प्रीलोडर है .....

1)


Preview Of Preloader: 


Technovichar_preloader_design


HTML FILE : 




<div class="technovichar-spinner"></div>




CSS FILE : 




.technovichar-spinner{
height: 115px;

width: 115px;
border: 6px solid transparent;
border-top-color: black;
border-bottom-color: black;
border-radius: 50%;
position: relative;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.technovichar-spinner::before{
content: "";
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
border: 6px solid transparent;
border-top-color: blue;
border-bottom-color: blue;
border-radius: 50%;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
} }
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);

transform: rotate(360deg);
}
}

2) 

Preview Of Preloader: 

Preloader of Website Design


HTML FILE : 



<div class="technovichar-spinner"></div>


CSS FILE : 




.technovichar-spinner {
width: 55px;
display: block;
background-color: black;
height: 55px;
-webkit-animation: 3s rotate2 ease-in-out infinite;
animation: 3s flip ease-in-out infinite;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
25% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
75% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
} }
@keyframes flip {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
25% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
75% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-360deg);

transform: perspective(120px) rotateX(0deg) rotateY(-360deg); }
}


3) 

Preview Of Preloader: 



HTML FILE : 







<div class="technovichar">
        
       <div class="color-box">

        </div>
      

 </div>


CSS FILE : 



<style>
body{
background-color:#ceb502;
}
.technovichar{
position: absolute;
width:240px;
border:2px solid #03A9F4;
height:50px;
box-shadow: 2px 2px 5px 5px #03A9F4;
overflow: hidden;
background-color:darkblue;
animation: techrotate 0.3s ease-in 0s infinite;
transition: 0.4s; }
@keyframes techrotate{
from{
transform:rotate(0deg); }
to{
transform:rotate(-700deg) } }
.color-box{ position: absolute;
background-color:#03A9F4;
left:40%;
padding:10px 0px;
width:50px;
height:50px;

}
@keyframes tech{
from{
margin:0px;
padding:0px;
left:0%; }
to{ margin:0px 1000px; } }


यह जावास्क्रिप्ट और HTML का उपयोग करके वेबसाइट में प्रीलोडर सेट करने के तरीके के बारे में है। यदि आप इस लेख को पसंद करते हैं तो अपने दोस्तों के साथ Share करे। 

Post a Comment

0 Comments