HTML లో ప్రోగ్రెస్ బార్‌ను ఎలా సృష్టించాలి?

ఒక పని సమయంలో ఒక శాతానికి కొన్ని మైలురాళ్లను నిర్ణయించడానికి ప్రోగ్రెస్ బార్‌లు ఉపయోగించబడతాయి. మీరు ప్రోగ్రెస్ బార్‌ను సృష్టించవచ్చు ఇది ఒక పని యొక్క పూర్తి పురోగతిని నిర్దేశిస్తుంది. ప్రోగ్రెస్ బార్ యొక్క విలువను జావాస్క్రిప్ట్ ద్వారా మార్చవచ్చు. ఈ వ్యాసంలో, మీరు HTML, CSS మరియు జావాస్క్రిప్ట్ సహాయంతో ప్రోగ్రెస్ బార్‌ను ఈ క్రింది క్రమంలో ఎలా సృష్టించవచ్చో చూస్తాము:

• HTML లో ప్రోగ్రెస్ బార్‌ను ఎలా సృష్టించాలి?
• ప్రోగ్రెస్ బార్: ఉదాహరణ

ప్రారంభిద్దాం.

HTML లో ప్రోగ్రెస్ బార్‌ను ఎలా సృష్టించాలి?

ప్రోగ్రెస్ బార్ ఏ పని యొక్క పురోగతిని వర్ణిస్తుంది. సాధారణంగా, డౌన్‌లోడ్ మరియు అప్‌లోడ్ స్థితిని చూపించడానికి ఈ బార్‌లు ఉపయోగించబడతాయి. ప్రోగ్రెస్ బార్స్ పురోగతిలో ఉన్న ఏదైనా స్థితిని వర్ణించటానికి ఉపయోగపడతాయని మేము చెప్పగలం.

ఉపయోగించి ప్రాథమిక ప్రోగ్రెస్ బార్‌ను సృష్టించడానికి , కింది దశలను నిర్వహించాల్సిన అవసరం ఉంది:

• మీ పురోగతి పట్టీ కోసం HTML నిర్మాణాన్ని సృష్టించండి - HTML ట్యాగ్ ఒక పని యొక్క పూర్తి పురోగతిని నిర్దేశిస్తుంది.

• CSS కలుపుతోంది - తదుపరి దశ సహాయంతో పురోగతి పట్టీ యొక్క నేపథ్య రంగుతో పాటు బార్‌లోని పురోగతి స్థితిని జోడించడం CSS .

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• జావాస్క్రిప్ట్ కలుపుతోంది - తదుపరి దశ ఉపయోగించి డైనమిక్ యానిమేటెడ్ ప్రోజెస్ బార్‌ను సృష్టించడం జావాస్క్రిప్ట్ విధులు నవీకరణ మరియు దృశ్యం .

ఫంక్షన్ నవీకరణ () element var element = document.getElementById ('myprogressBar') var width = 1 var ident = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (గుర్తింపు)} else {width ++ element.style.width = వెడల్పు + '%'}}}

పురోగతి పట్టీని సృష్టించడానికి వివిధ దశలను ఇప్పుడు మీకు తెలుసు, ముందుకు సాగండి మరియు పురోగతి పట్టీ యొక్క పూర్తి ఉదాహరణను చూద్దాం.

ప్రోగ్రెస్ బార్: ఉదాహరణ

పురోగతి పట్టీని సృష్టించడానికి మీరు వేర్వేరు దశలను పూర్తి చేసిన తర్వాత, HTML, CSS మరియు జావాస్క్రిప్ట్ అంశాలు . కింది ఉదాహరణ పై లింక్ చేసే పూర్తి ప్రోగ్రెస్ బార్ కోడ్ చూపిస్తుంది HTML, CSS మరియు జావాస్క్రిప్ట్ సంకేతాలు:

సి ++ లో శ్రేణిని క్రమబద్ధీకరించండి

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
జావాస్క్రిప్ట్ ఉపయోగించి ప్రోగ్రెస్ బార్ యొక్క ఉదాహరణ
 
ఫైల్ యొక్క స్థితిని డౌన్‌లోడ్ చేయండి:
  
డౌన్‌లోడ్ ఫంక్షన్ నవీకరణను ప్రారంభించండి () element var element = document.getElementById ('myprogressBar') var width = 1 var ident = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (గుర్తింపు)} else {width ++ element.style.width = వెడల్పు + '%'}}}

అవుట్పుట్:

దీనితో, మేము మా వ్యాసం చివరికి వచ్చాము. పురోగతి పట్టీని సృష్టించడానికి అవసరమైన వివిధ దశలను మీరు అర్థం చేసుకున్నారని నేను ఆశిస్తున్నాను.

మా చూడండి ఇది బోధకుడు నేతృత్వంలోని ప్రత్యక్ష శిక్షణ మరియు నిజ జీవిత ప్రాజెక్ట్ అనుభవంతో వస్తుంది. ఈ శిక్షణ బ్యాక్ ఎండ్ మరియు ఫ్రంట్ ఎండ్ వెబ్ టెక్నాలజీలతో పనిచేయడానికి మీకు నైపుణ్యాలలో నైపుణ్యం కలిగిస్తుంది. ఇందులో వెబ్ డెవలప్‌మెంట్, j క్వెరీ, కోణీయ, నోడ్జెఎస్, ఎక్స్‌ప్రెస్‌జెఎస్ మరియు మొంగోడిబిపై శిక్షణ ఉంటుంది.

మాకు ప్రశ్న ఉందా? దయచేసి ఈ బ్లాగ్ యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.