HTML और CSS के साथ प्रगति बार

82

मैं नीचे दी गई छवि की तरह एक प्रगति बार बनाना चाहता हूं:

प्रगति बार उदाहरण

इसे बनाने के बारे में मेरा कोई विचार नहीं है। क्या मुझे HTML5 तकनीकों का उपयोग करना चाहिए?

क्या आप मुझे इस प्रगति बार को बनाने में कुछ मदद देंगे?

html  css  progress-bar 
— शाहीन
स्रोत

जवाबों:

211 

#progressbar {
  background-color: black;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar>div {
  background-color: orange;
  width: 40%;
  /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>
स्निपेट का विस्तार करें

बेला

(संपादित करें: सिंटैक्स हाइलाइट बदल गया; बच्चे के चयनकर्ता के वंशज बदल गए)

— RoToRa
स्रोत
3
कुछ केंद्रित प्रतिशत संकेतक के साथ प्रगति पट्टी को और भी अधिक उपयोगी पाते हैं ।
— टॉम ज़ातो -
20

http://jsfiddle.net/cwZSW/1406/

#progress {
    background: #333;
    border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}
<div id="progress"></div>
स्निपेट का विस्तार करें

— मदारा का भूत
स्रोत
3
आपके ब्राउज़र के आधार पर आपको उपयोग करने की आवश्यकता है border-radius, -webkit-border-radiusया-moz-border-radius
— वीगर
यह करने के लिए केवल 3 मिनट लेने के लिए यश, आपको एक सुपर प्रतिभाशाली प्रगति बार व्यक्ति होना चाहिए! वाह!
— डेनियल टुलप
@ डैनियल आपको धन्यवाद क्यों! यह अच्छा है जब लोग नोटिस करते हैं!
— का घोस्ट
6
इस समाधान के साथ एकमात्र समस्या यह है कि जावास्क्रिप्ट कोड को संशोधित करने के लिए जावास्क्रिप्ट कोड के लिए वास्तव में कठिन है: छद्म तत्व के बाद, क्योंकि यह डोम का हिस्सा नहीं है। जब तक मैं कुछ याद कर रहा हूँ।
— फ्रंटियरपीशिको
17

2014 का उत्तर : 2014 से अब<progress> element तक HTML में 5 को जावास्क्रिप्ट की आवश्यकता नहीं है। इनलाइन सामग्री का उपयोग करके प्रगति के साथ प्रतिशत मान चलता है। केवल वेबकिट में परीक्षण किया गया। आशा है कि इससे सहायता मिलेगी:

jsFiddle

सीएसएस:

progress {
	display:inline-block;
	width:190px;
	height:20px;
	padding:15px 0 0 0;
	margin:0;
	background:none;
	border: 0;
	border-radius: 15px;
	text-align: left;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
progress::-webkit-progress-bar {
	height:11px;
	width:150px;
	margin:0 auto;
	background-color: #CCC;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress::-webkit-progress-value {
	display:inline-block;
	float:left;
	height:11px;
	margin:0px -10px 0 0;
	background: #F70;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress:after {
	margin:-26px 0 0 -7px;
	padding:0;
	display:inline-block;
	float:left;
	content: attr(value) '%';
}
<progress id="progressBar" max="100" value="77"></progress>
स्निपेट का विस्तार करें

— आंद्रेलो
स्रोत
2020 तक, सभी ब्राउज़र में बहुत अच्छी तरह से समर्थित: caniuse.com/#feat=progress
— frackham
क्या यह कहना कुछ अवास्तविक है कि इसे "जावास्क्रिप्ट की आवश्यकता नहीं है"? मेरा मतलब है, तत्व स्वयं एक बहुत ही सरल दृश्य घटक है, लेकिन यदि आप कभी भी इसका कोई मूल्य प्राप्त करने जा रहे हैं, तो आपको गतिशील रूप से "मूल्य" संपत्ति को किसी तरह सेट करने की आवश्यकता है। यह कैसे होने जा रहा है? मैं जावास्क्रिप्ट अनुमान लगाना चाहूँगा। तो फिर सवाल यह हो जाता है कि क्या यह तत्व वास्तव में इतनी सुविधा या लाभ प्रदान करता है, जब यह वास्तव में बहुत कुछ नहीं करता है, लेकिन कुछ को बहुत नियंत्रित तरीके से पेश करता है।
— लेव
4

मैं यह पसंद है:

केवल HTML और शेष CSS3 के रूप में यह बहुत पीछे की ओर संगत है (हालांकि इसमें आईकैंडी कम होगी)

नीचे जोड़े गए कोड को संपादित करें , लेकिन ऊपर दिए गए पृष्ठ से सीधे उस लेखक को सारा श्रेय दिया जाता है

.meter {
  height: 20px;
  /* Can be anything */
  position: relative;
  background: #555;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.meter>span {
  display: block;
  height: 100%;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #f1a165;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
  background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
  -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
<div class="meter">
  <span style="width: 33%"></span>
  <!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor -->
</div>
स्निपेट का विस्तार करें

— दानील तुल्प
स्रोत
2
ध्यान दें कि लिंक-केवल उत्तर हतोत्साहित किए जाते हैं, एसओ उत्तर एक समाधान के लिए खोज का अंतिम बिंदु होना चाहिए (बनाम संदर्भों का एक और ठहराव, जो समय के साथ बासी हो जाते हैं)। लिंक को संदर्भ के रूप में रखते हुए कृपया यहां एक स्टैंड-अलोन सिनोप्सिस जोड़ने पर विचार करें।
— क्लेओपेट्रा
@kleopatra, वेबसाइट को उपयोगी बनाए रखने के लिए धन्यवाद। मुझे केवल लिंक पता है (निश्चित रूप से jsfiddle जैसी साइटों को) हतोत्साहित किया जाता है। मैं उपयोग किए गए कोड को जोड़ दूंगा।
— डेनियल टुलप
4

कुछ मामूली समायोजन (सही रंग और आयाम) के साथ @ RoooRa के उत्तर के रूप में समान:

body {
  background-color: #636363;
  padding: 1em;
}

#progressbar {
  background-color: #20201F;
  border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */
  padding: 4px;
}

#progressbar>div {
  background-color: #F7901E;
  width: 48%;
  /* Adjust with JavaScript */
  height: 16px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>
स्निपेट का विस्तार करें

यहाँ फिडेल है : jsFiddle

और यहाँ यह कैसा दिखता है: jsField-स्क्रीनशॉट

— DaJF
स्रोत
4

आधुनिक ब्राउज़रों में आप CSS3 और HTML5 प्रगति तत्व का उपयोग कर सकते हैं!

progress {
  width: 40%;
  display: block; /* default: inline-block */
  margin: 2em auto;
  padding: 3px;
  border: 0 none;
  background: #444;
  border-radius: 14px;
}
progress::-moz-progress-bar {
  border-radius: 12px;
  background: orange;

}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  border-radius: 12px;
  background: orange;
} 
<progress max="100" value="40"></progress>
स्निपेट का विस्तार करें

— सैन्क्सफ़ॉन
स्रोत
3

नेस्टेड डिव के बिना प्रगति बार ... हर तत्व के लिए जहां सीएसएस रैखिक-ढाल काम करता है।

यहाँ JSFiddle http://jsfiddle.net/oj1L3y6t/2/

function show_progress(i) {
  var progress1 = i;
  var progress2 = progress1 + 1;
  var progress3 = progress1 + 2;

  var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-0").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";
  document.getElementById("progress-1").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";
  document.getElementById("progress-2").style.background = magic;

  var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-3").style.background = magic;
}

function timeout() {
  t = setTimeout(function() {
    show_progress(t)
    timeout();
  }, 50);
  if (t == 78) {
    clearTimeout(t);
  }
  console.log(t);
}

timeout();
#progress-0 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
}

#progress-1 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
  border-radius: 10px;
}

#progress-2 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
}

#progress-3 {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  background: #999;
  line-height: 100px;
  text-align: center;
  margin-top: 10px;
  border-radius: 200px;
}
<div id="progress-0">Loading</div>
<input id="progress-1" value="Loading"></input>
<button id="progress-2">Loading</button>
<p id="progress-3">Loading</p>
स्निपेट का विस्तार करें

— जेम्स
स्रोत
2

एक तत्व बनाएं जो बार के बाएं हिस्से (गोल भाग) को दर्शाता है, दाएं भाग के लिए भी एक तत्व बनाएं। वास्तविक प्रगति पट्टी के लिए, दोहराई जाने वाली पृष्ठभूमि और चौड़ाई के साथ एक तीसरा तत्व बनाएं जो वास्तविक प्रगति पर निर्भर करता है। यह सब पृष्ठभूमि छवि के ऊपर रखें (खाली प्रगति पट्टी वाले)।

लेकिन मुझे लगता है कि आप पहले से ही जानते थे कि ...

संपादित करें : एक प्रगति पट्टी बनाते समय जो पाठकीय पृष्ठभूमि का उपयोग नहीं करते हैं। आप border-radiusगोल प्रभाव को प्राप्त करने के लिए उपयोग कर सकते हैं , जैसा कि रिकूडो सेनिन और रूटोरा द्वारा दिखाया गया है !

— वीर
स्रोत
1 

.loading {
  position: relative;
  width: 50%;
  height: 200px;
  border: 1px solid rgba(160, 160, 164, 0.2);
  background-color: rgba(160, 160, 164, 0.2);
  border-radius: 3px;
}

span.loader {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 250px;
  height: 20px;
  border-radius: 8px;
  border: 2px solid rgba(160, 160, 164, 0.8);
  padding: 0;
}

span.loader span.innerLoad {
  text-align: center;
  width: 140px;
  font-size: 15px;
  font-stretch: extra-expanded;
  color: #2A00FF;
  padding: 1px 18px 3px 80px;
  border-radius: 8px;
  background: rgb(250, 198, 149);
  background: -moz-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 198, 149, 1)), color-stop(47%, rgba(245, 171, 102, 1)), color-stop(100%, rgba(239, 141, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -o-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -ms-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: linear-gradient(to right, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=1);
}
<div class="loading">
  <span class="loader">
     	<span class="innerLoad">Loading...</span>
  </span>
</div>
स्निपेट का विस्तार करें

— user2579594
स्रोत
1 
    .black-strip
{   width:100%;
    height: 30px;       
    background-color:black; 
}

.green-strip
{   width:0%;           
    height: 30px;       
    background-color:lime;
    animation-name: progress-bar;           
    animation-duration: 4s;  
    animation-iteration-count: infinite; 
}

@keyframes progress-bar { 
    from{width:0%} 
    to{width:100%} 
}

    <div class="black-strip">
        <div class="green-strip">
        </div>
   </div>
— मुजाहिद हुसैन
स्रोत
0

यदि आप कुछ कोड को जोड़े बिना प्रगति पट्टी रखना चाहते हैं तो PACE आपके लिए एक भयानक उपकरण हो सकता है।

बस अपनी पसंद का speed.js और CSS विषय शामिल करें, और आपको अपने पेज लोड और AJAX नेविगेशन के लिए एक सुंदर प्रगति संकेतक मिलता है। PACE के साथ सबसे अच्छी बात प्रगति की ऑटो पहचान है।

इसमें विभिन्न थीम और रंग योजनाएं शामिल हैं।

एक कोशिश के काबिल है।

— अनुराग वर्मा
स्रोत
0 
.bar {
background - color: blue;
height: 40 px;
width: 40 px;
border - style: solid;
border - right - width: 1300 px;
border - radius: 40 px;
animation - name: Load;
animation - duration: 11 s;
position: relative;
animation - iteration - count: 1;
animation - fill - mode: forwards;
}

@keyframes Load {
100 % {
    width: 1300 px;border - right - width: 5;
}
— टायलर डोनाथ
स्रोत
यह वही है जो मैंने इस्तेमाल किया है ... एक मिडिल स्कूल कोडिंग प्रोजेक्ट के लिए, यह सबसे सुंदर नहीं है, लेकिन यह काम करता है
— टायलर डोनाथ
1
इतना ही नहीं यह सबसे सुंदर नहीं है, यह भी मान्य नहीं है और काम नहीं करेगा। CSS संपत्तियों में रिक्त स्थान नहीं हैं। उदाहरण के लिए होने की background - color: blue;जरूरत हैbackground-color: blue;
— Matijs
0

का उपयोग कर setInterval।

var totalelem = document.getElementById("total");
var progresselem = document.getElementById("progress");
var interval = setInterval(function(){
    if(progresselem.clientWidth>=totalelem.clientWidth)
    {
        clearInterval(interval);
        return;
    }
    progresselem.style.width = progresselem.offsetWidth+1+"px";
},10)
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
स्निपेट का विस्तार करें

का उपयोग कर CSS Transtitions।

function loading()
{
    document.getElementById("progress").style.width="200px";
}
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
    -webkit-transition:width 3s linear;
    transition: width 3s linear;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
<button id="load" onclick="loading()">Load</button>
स्निपेट का विस्तार करें

— विग्नेश राजा
स्रोत
0

यहां HTML5 प्रगति पट्टी बनाने के लिए एक ट्यूटोरियल है । यदि आप HTML5 विधियों का उपयोग नहीं करना चाहते हैं या आप एक सभी-ब्राउज़र समाधान की तलाश कर रहे हैं, तो इस कोड को आज़माएं:

<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
  <div style="height: 25px; width:87%; background-color: gold">&nbsp;</div>
</div>
स्निपेट का विस्तार करें

आप अपनी प्रगति पट्टी की पृष्ठभूमि-रंग में रंग स्वर्ण को किसी भी प्रगति बार रंग और #dbdbdb में बदल सकते हैं।

— कैनिनाइड
स्रोत
-3

आप केवल स्थिति बार के प्रत्येक भाग के लिए एकाधिक चित्र क्यों नहीं बना सकते? यदि यह एक तिहाई है तो बस स्टेटस बार का एक तिहाई दिखाएं ... यह बहुत सरल है। आप शायद यह पता लगा सकते हैं कि फॉर्म टैग के साथ इनपुट के आधार पर इसे अगली तस्वीर में कैसे बदलना है। यहां कोड का मेरा हिस्सा है, आपको बाद में फॉर्म सामान का पता लगाना होगा

<form> <!--(extra code)-->
<!--first progress bar:-->
<img src="directory"></img>
<!--second progress bar:-->
<img src="directory"></img>
<!--et caetera...-->
</form>

अब यह आसान लगता है, है ना?

— user4093060
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.