एक कार्य के दौरान प्रतिशत तक कुछ मील के पत्थर निर्धारित करने के लिए प्रगति सलाखों का उपयोग किया जाता है। आप एक प्रगति बार बना सकते हैं जो किसी कार्य की पूर्ण प्रगति को निर्दिष्ट करता है। जावास्क्रिप्ट द्वारा प्रगति पट्टी के मूल्य में हेरफेर किया जा सकता है। इस लेख में, हम देखेंगे कि आप निम्न क्रम में HTML, CSS और जावास्क्रिप्ट की सहायता से प्रगति पट्टी कैसे बना सकते हैं:
चलो शुरू करें।
HTML में प्रोग्रेस बार कैसे बनाएं?
एक प्रगति पट्टी किसी भी कार्य की प्रगति को दर्शाती है जिसे किया जा रहा है। आमतौर पर, इन पट्टियों का उपयोग डाउनलोड और अपलोड स्थिति दिखाने के लिए किया जाता है। हम कह सकते हैं कि प्रगति बार्स का उपयोग किसी भी चीज़ की स्थिति का चित्रण करने के लिए किया जा सकता है।
का उपयोग कर एक बुनियादी प्रगति पट्टी बनाने के लिए निम्नलिखित चरणों को पूरा करने की आवश्यकता है:
c ++ सरणी सॉर्ट
- अपनी प्रगति पट्टी के लिए HTML संरचना बनाएं - HTML टैग किसी कार्य की पूर्ण प्रगति को निर्दिष्ट करता है।
- सीएसएस जोड़ना - अगला कदम प्रगति पट्टी की पृष्ठभूमि का रंग और साथ ही साथ पट्टी में प्रगति की स्थिति को जोड़ना है सीएसएस ।
#Progress_Status {चौड़ाई: 50% पृष्ठभूमि-रंग: #ddd} #myprogressBar {चौड़ाई: 1% ऊंचाई: 35px पृष्ठभूमि-रंग: # 4CAF50 पाठ-संरेखण: केंद्र रेखा-ऊंचाई: 32px रंग: काला}- जावास्क्रिप्ट जोड़ना - अगला कदम एक गतिशील एनिमेटेड प्रोजेस बार का उपयोग करके बनाना है जावास्क्रिप्ट कार्य अपडेट करें तथा दृश्य ।
फंक्शन अपडेट () {var element = document.getElementById (gress myprogressBar ’) var width = 1 var आइडेंटिटी = setInterval (सीन, 10) फंक्शन सीन () {if (चौड़ाई> = 100) {क्लीयर वेवलटर (आइडेंटी)} और {चौड़ाई ++ element.style. उपलब्धता = चौड़ाई + '%'}}}अब जब आप एक प्रगति बार बनाने के विभिन्न चरणों को जानते हैं, तो चलिए आगे बढ़ते हैं और प्रगति पट्टी के पूर्ण उदाहरण पर एक नज़र डालते हैं।
प्रगति बार: उदाहरण
एक बार प्रगति पट्टी बनाने के लिए विभिन्न चरणों को पूरा करने के बाद, यह HTML, CSS और लिंक करने का समय है जावास्क्रिप्ट तत्व । निम्न उदाहरण उपरोक्त लिंक को पूरा करते हुए प्रगति बार का पूरा कोड दिखाता है HTML, CSS और JavaScript कोड:
#Progress_Status {चौड़ाई: 50% पृष्ठभूमि-रंग: #ddd} #myprogressBar {चौड़ाई: 2% ऊँचाई: 20px पृष्ठभूमि-रंग: # 4CAF50}जावास्क्रिप्ट का उपयोग कर प्रगति पट्टी का उदाहरण
एक फ़ाइल की स्थिति डाउनलोड करें:
स्टार्ट डाउनलोड फंक्शन अपडेट () {var element = document.getElementById (gress myprogressBar ’) var width = 1 var आइडेंटिटी = setInterval (सीन, 10) फंक्शन सीन () {if (चौड़ाई> = 100) / क्लियरइंटरवल (पहचान)} {चौड़ाई ++ तत्व.स्टाइल.आवेशन = चौड़ाई + '%'}}}आउटपुट:
इसके साथ, हम अपने लेख के अंत में आ गए हैं। मुझे आशा है कि आपने प्रगति बार बनाने के लिए आवश्यक विभिन्न चरणों को समझ लिया है।
हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।
क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया इस ब्लॉग के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।