हाल में उपयोग किए गए

    कोई टूल खोलें, वह यहाँ दिखाई देगा।

    प्रगति बार निर्माता

    एनिमेटेड प्रगति बार डिज़ाइन करें

    इस टूल को शेयर करें

    समस्या की रिपोर्ट करें

    निजी इनपुट या फ़ाइलें शामिल किए बिना समस्या का वर्णन करें।

    यह टूल कितना उपयोगी था?

    यह टूल कितना उपयोगी था?

    अपना प्रोग्रेस बार डिज़ाइन करें

    आकार और थीम चुनें, फिर विवरण ठीक करें।

    त्वरित थीम
    अधिक सेटिंग
    आयाम और आकार
    रंग और ग्रेडिएंट
    बॉर्डर सेटिंग
    लेबल
    एनिमेशन और इफ़ेक्ट

    प्रीव्यू और कोड

    प्रीव्यू की पृष्ठभूमि

    प्रीव्यू इस पैनल में समा जाता है। एक्सपोर्ट के आयाम और कोड आपके चुने आकार में ही रहते हैं।

    प्रीव्यू अपडेट हो गया। अपने प्रोजेक्ट के लिए HTML और CSS दोनों कॉपी करें।

    PNG एक्सपोर्ट प्रीव्यू

    PNG एक स्थिर, सफ़ेद पृष्ठभूमि वाला रेंडर है। यह मूल कैनवास शैली का उपयोग करता है: ग्रेडिएंट और बॉर्डर केवल रैखिक बार पर लागू होते हैं; CSS ग्लो, स्ट्राइप, पल्स और ट्रांज़िशन लाइव प्रीव्यू और कोड में उपलब्ध हैं।

    HTML मार्कअप
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    लोड हो रहा है... 65%
  </div>
</div>
    CSS स्टाइल
    .progress-container {
  width: 400px;
  max-width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  
  
}

.progress-bar {
  height: 100%;
  width: 65%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
  
  
  
}





.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1f2937;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    HTML और CSS साथ-साथ उपयोग होते हैं। ये इस तय मान का वर्णन करते हैं; प्रगति के अपडेट और एक्सेसिबिलिटी सिमेंटिक्स अपने ऐप में जोड़ें।

    त्वरित सुझाव
    • रैखिक: लोडिंग संकेतक और फ़ाइल अपलोड।
    • वृत्ताकार: गेज और कौशल दर्शाने के लिए।
    • अर्धवृत्ताकार: डैशबोर्ड मेट्रिक और कोटा उपयोग।
    • खड़ा: बैटरी और स्टोरेज संकेतक।
    • बिंदु: पेजिनेशन और किसी क्रम में प्रगति।
    • चरणबद्ध: कई चरणों वाली प्रक्रियाओं के मील के पत्थर।

    प्रगति बार निर्माता के बारे में: मुफ़्त CSS प्रगति बार जनरेटर

    कॉन्फ़िगर करने योग्य रंगों, लेबल और प्रभावों के साथ सुंदर, एनिमेटेड प्रगति बार डिज़ाइन करें। HTML और CSS एक साथ कॉपी करें, या चुने गए आयामों में स्थिर PNG एक्सपोर्ट करें। छह आकार, छह थीम और तीन ट्रांज़िशन कर्व उपलब्ध हैं। PNG अलग कैनवास रेंडरर से बनता है: ग्रेडिएंट और बॉर्डर केवल रेखीय बार पर लागू होते हैं, और CSS एनिमेशन, धारियाँ तथा ग्लो शामिल नहीं होते। ऑनलाइन उपलब्ध इस प्रगति बार जनरेटर के आउटपुट को अपने लेआउट में जोड़ने से पहले अपने लक्षित लेआउट में जाँच लें।

    प्रगति संकेतक आधुनिक वेब और मोबाइल डिज़ाइन का एक मूल UI पैटर्न हैं। वे उपयोगकर्ताओं को लोडिंग की स्थिति, कार्य पूरा होने, कौशल दक्षता और लक्ष्य प्राप्ति की जानकारी देते हैं। CSS को शुरू से हाथ से लिखने के बजाय हमारे विज़ुअल एडिटर से हर विवरण कॉन्फ़िगर करें: रंग, बॉर्डर रेडियस, धारियाँ, ग्रेडिएंट और लेबल, फिर बना हुआ कोड सीधे अपने प्रोजेक्ट में कॉपी करें।

    यह टूल कैनवास एक्सपोर्ट पूर्वावलोकन के साथ रीयल-टाइम लाइव पूर्वावलोकन देता है, ताकि फ़ाइनल करने से पहले आप ठीक-ठीक देख सकें कि आपका प्रगति बार कैसा दिखेगा। चाहे आप डैशबोर्ड गेज, फ़ाइल-अपलोड संकेतक, मल्टी-स्टेप विज़ार्ड या डॉट-आधारित पेजिनेशन ट्रैकर बना रहे हों, प्रगति बार निर्माता में उसके लिए सही शैली और साफ़ कोड मौजूद है।

    डिज़ाइन

    हाल ही में जोड़े गए

    सभी टूल

    गोपनीयता सेटिंग

    एनालिटिक्स, विज्ञापन और वैयक्तिकरण के लिए अपनी प्राथमिकताएँ चुनें। ज़रूरी स्टोरेज आपकी थीम और सहेजे गए टूल जैसी सुविधाओं को चालू रखता है।

    ज़रूरी स्टोरेज हमेशा चालू रहता है।