जब यह लोड हो रहा हो तो बटन को स्पिनर आइकन कैसे जोड़ें?

Question

ट्विटर बूटस्ट्रैप के बटन में एक अच्छी Loading...स्थिति उपलब्ध है।

बात यह है कि यह इस तरह Loading...से data-loading-textविशेषता के माध्यम से पारित की तरह एक संदेश दिखाता है :

<button type="button" class="btn btn-primary start" id="btnStartUploads"
        data-loading-text="@Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

Font Awesome को देखते हुए, आप देखते हैं कि अब एक एनिमेटेड स्पिनर आइकन है ।

मैंने उस स्पिनर आइकन को एकीकृत करने की कोशिश की जब Uploadइस तरह से एक ऑपरेशन फायरिंग :

$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');

लेकिन इसका कोई प्रभाव नहीं पड़ा, यानी मैं सिर्फ Uploading...बटन पर पाठ देखता हूं ।

क्या बटन लोड होने की स्थिति में आइकन जोड़ना संभव है? किसी भी तरह दिखता है बूटस्ट्रैप सिर्फ <i class="icon-upload icon-large"></i>लोड स्थिति में जबकि बटन के अंदर आइकन को हटाता है ।

---

यहाँ एक सरल डेमो है जो मेरे द्वारा वर्णित व्यवहार को दर्शाता है। जैसा कि आप देखते हैं कि जब यह लोड हो रहा है, तो आइकन गायब हो जाता है। यह समय अंतराल के बाद फिर से प्रकट होता है।

Comments

आप मेरे समाधान को देख सकते हैं चेतन स्पिनर उपस्थिति: stackoverflow.com/questions/15982233/…

— एंड्रयू ड्रिगा

मैं इस दृष्टिकोण का उपयोग करने की सलाह देता हूं stackoverflow.com/a/15988830/437690

— limit

Answer 1

यदि आप बूटस्ट्रैप-बटन.जेएस स्रोत को देखते हैं, तो आप देखेंगे कि बूटस्ट्रैप प्लगइन कॉल करते समय डेटा-लोडिंग-टेक्स्ट में जो कुछ भी है, उसके साथ बटन आंतरिक HTML की जगह लेता है $(myElem).button('loading')।

आपके मामले के लिए, मुझे लगता है कि आपको ऐसा करने में सक्षम होना चाहिए:

<button type="button"
        class="btn btn-primary start"
        id="btnStartUploads"
        data-loading-text="<i class='icon-spinner icon-spin icon-large'></i> @Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

Comments

महान gurr101 काम करता है! मैं भूल जाता हूं कि HTMLएक टैग प्रॉपर्टी में टेक्स्ट के साथ मिलाया जा सकता है। :-)

— लेनियल मैकाफेर्री

फीफ़ 6.0.5 (7536.30.1) के लिए काम नहीं कर रहा है, मैक ओएस एक्स पर क्रोम 31.0.1604.0 कनारी

— बुरक

फिक्स्ड: jsfiddle.net/6U5q2/270 यह नोट v2.3.2 के लिए है। पता नहीं अगर यह 3.x के लिए काम करता है

— एरिक फ्रीज़

data-loading-textv3.3.5 के बाद से हटा दिया गया है और v4 में हटा दिया जाएगा।

— जोनाथन

@ जोनाथन यदि इसे v3.3.5 में पदावनत किया जाए तो v3.3.5 और v4 के बाद दोनों के लिए क्या प्रतिस्थापन है?

— पालदिएन

Answer 2

CSS3 एनिमेशन का उपयोग करके बूटस्ट्रैप 3 के लिए सरल समाधान ।

अपने सीएसएस में निम्नलिखित डालें:

.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

फिर अपना कताई आइकन प्राप्त करने के लिए बस थोड़ी देर के लिए spinningकक्षा जोड़ें glyphicon:

<button class="btn btn-lg btn-warning">
    <span class="glyphicon glyphicon-refresh spinning"></span> Loading...    
</button>

Http://www.bootply.com/128062# पर आधारित

• नोट: IE9 और नीचे CSS3 एनिमेशन का समर्थन नहीं करते हैं।

Comments

यह नहीं होना चाहिए animationऔर नहीं -animation?

— एंड्री मिखायलोव - lolmaus

उत्कृष्ट समाधान। मैं सफारी में डेस्कटॉप और iPad पर इस एनिमेशन के साथ समस्या कर रहा हूं। यह आइकन दिखाता है लेकिन इसे चेतन नहीं करता है। कभी ऐसा कुछ अनुभव करते हैं?

— JayhawksFan93

@ JayhawksFan93 हाँ मैंने हाल ही में IE में भी देखा। जल्द ही इस पर गौर करेंगे

— फ्लायन

के animationबजाय उत्तर अपडेट किया गया था -animation। मेरे लिए एफएफ और आईई में उस बदलाव के साथ ठीक है। फ़ायरफ़ॉक्स एनीमेशन doesn't बहुत चिकनी लग रही है।

— फ्लियन

+1। यहां एक समान मिला .... रिकॉर्ड के लिए पोस्टिंग ...

— Fr0zenFyr

Answer 3

अब उसके लिए एक पूर्ण प्लगइन है:

http://msurguy.github.io/ladda-bootstrap/

Comments

हाय @ ईरु पेनकमैन। आपके और मूल के बीच क्या अंतर है?

— इवान वांग

हे इवान, सॉर्ट, लेकिन मैं अपने लड्डू की कॉपी अपडेट करने के लिए कभी नहीं मिला! यह सिर्फ मूल है, मैंने अपनी पिछली टिप्पणी को हटा दिया। उसके लिए माफ़ करना!

— रोओ 2

Answer 4

@Flion द्वारा समाधान को वास्तव में बहुत अच्छा बनाने के लिए, आप उस आइकन के लिए केंद्र बिंदु को समायोजित कर सकते हैं ताकि यह ऊपर और नीचे न हो। यह छोटे फ़ॉन्ट आकार में मेरे लिए सही लगता है:

.glyphicon-refresh.spinning {
  transform-origin: 48% 50%;
}

Comments

.glyphicon-refresh.spinning { transform-origin: 50% 58%; }मेरे लिए काम किया

— oluckyman

hum, { transform-origin: 50% 49%; }मेरे मामले में हल करें जहां मैं cogइसके बजाय उपयोग कर रहा हूं ।

— विटोर कैनोवा

मैं भी लड़खड़ाते हुए नोटिस करता हूं, लेकिन इन नंबरों को बदलने का औचित्य क्या है? मैं उन्हें कैसे धुन दूं?

— २०

Answer 5

यहाँ बूटस्ट्रैप 4 के लिए मेरा समाधान है:

<button id="search" class="btn btn-primary" 
data-loading-text="<i class='fa fa-spinner fa-spin fa-fw' aria-hidden='true'></i>Searching">
  Search
</button>

var setLoading = function () {
  var search = $('#search');
  if (!search.data('normal-text')) {
    search.data('normal-text', search.html());
  }
  search.html(search.data('loading-text'));
};

var clearLoading = function () {
  var search = $('#search');
  search.html(search.data('normal-text'));
};

setInterval(() => {
  setLoading();
  setTimeout(() => {
    clearLoading();
  }, 1000);
}, 2000);

इसे JSFiddle पर देखें

Answer 6

ये मेरे हैं, शुद्ध एसवीजी और सीएसएस एनिमेशन पर आधारित हैं। स्निपेट बलो में जेएस कोड पर ध्यान न दें, यह सिर्फ डेमो करने के उद्देश्य से है। अपने कस्टम को खान पर आधारित बनाने के लिए स्वतंत्र महसूस करें, यह सुपर आसान है।

var svg = d3.select("svg"),
    columnsCount = 3;

['basic', 'basic2', 'basic3', 'basic4', 'loading', 'loading2', 'spin', 'chrome', 'chrome2', 'flower', 'flower2', 'backstreet_boys'].forEach(function(animation, i){
  var x = (i%columnsCount+1) * 200-100,
      y = 20 + (Math.floor(i/columnsCount) * 200);
  
  
  svg.append("text")
    .attr('text-anchor', 'middle')
    .attr("x", x)
    .attr("y", y)
    .text((i+1)+". "+animation);
  
  svg.append("circle")
    .attr("class", animation)
    .attr("cx",  x)
    .attr("cy",  y+40)
    .attr("r",  16)
});

circle {
  fill: none;
  stroke: #bbb;
  stroke-width: 4
}

.basic {
  animation: basic 0.5s linear infinite;
  stroke-dasharray: 20 80;
}

@keyframes basic {
  0%    {stroke-dashoffset: 100;}
  100%  {stroke-dashoffset: 0;}
}

.basic2 {
  animation: basic2 0.5s linear infinite;
  stroke-dasharray: 80 20;
}

@keyframes basic2 {
  0%    {stroke-dashoffset: 100;}
  100%  {stroke-dashoffset: 0;}
}

.basic3 {
  animation: basic3 0.5s linear infinite;
  stroke-dasharray: 20 30;
}

@keyframes basic3 {
  0%    {stroke-dashoffset: 100;}
  100%  {stroke-dashoffset: 0;}
}

.basic4 {
  animation: basic4 0.5s linear infinite;
  stroke-dasharray: 10 23.3;
}

@keyframes basic4 {
  0%    {stroke-dashoffset: 100;}
  100%  {stroke-dashoffset: 0;}
}

.loading {
  animation: loading 1s linear infinite;
  stroke-dashoffset: 25;
}

@keyframes loading {
  0%    {stroke-dashoffset: 0;    stroke-dasharray: 50 0; }
  50%   {stroke-dashoffset: -100; stroke-dasharray: 0 50;}
  100%  { stroke-dashoffset: -200;stroke-dasharray: 50 0;}
}

.loading2 {
  animation: loading2 1s linear infinite;
}

@keyframes loading2 {
  0% {stroke-dasharray: 5 28.3;   stroke-dashoffset: 75;}
  50% {stroke-dasharray: 45 5;    stroke-dashoffset: -50;}
  100% {stroke-dasharray: 5 28.3; stroke-dashoffset: -125; }
}

.spin {
  animation: spin 1s linear infinite;
  stroke-dashoffset: 25;
}

@keyframes spin {
  0%    {stroke-dashoffset: 0;    stroke-dasharray: 33.3 0; }
  50%   {stroke-dashoffset: -100; stroke-dasharray: 0 33.3;}
  100%  { stroke-dashoffset: -200;stroke-dasharray: 33.3 0;}
}

.chrome {
  animation: chrome 2s linear infinite;
}

@keyframes chrome {
  0%    {stroke-dasharray: 0 100; stroke-dashoffset: 25;}
  25%   {stroke-dasharray: 75 25; stroke-dashoffset: 0;}
  50%   {stroke-dasharray: 0 100;  stroke-dashoffset: -125;}
  75%    {stroke-dasharray: 75 25; stroke-dashoffset: -150;}
  100%   {stroke-dasharray: 0 100; stroke-dashoffset: -275;}
}

.chrome2 {
  animation: chrome2 1s linear infinite;
}

@keyframes chrome2 {
  0%    {stroke-dasharray: 0 100; stroke-dashoffset: 25;}
  25%   {stroke-dasharray: 50 50; stroke-dashoffset: 0;}
  50%   {stroke-dasharray: 0 100;  stroke-dashoffset: -50;}
  75%   {stroke-dasharray: 50 50;  stroke-dashoffset: -125;}
  100%  {stroke-dasharray: 0 100;  stroke-dashoffset: -175;}
}

.flower {
  animation: flower 1s linear infinite;
}

@keyframes flower {
  0%    {stroke-dasharray: 0  20; stroke-dashoffset: 25;}
  50%   {stroke-dasharray: 20 0;  stroke-dashoffset: -50;}
  100%  {stroke-dasharray: 0 20;  stroke-dashoffset: -125;}
}

.flower2 {
  animation: flower2 1s linear infinite;
}

@keyframes flower2 {
  0%    {stroke-dasharray: 5 20;  stroke-dashoffset: 25;}
  50%   {stroke-dasharray: 20 5;  stroke-dashoffset: -50;}
  100%  {stroke-dasharray: 5 20;  stroke-dashoffset: -125;}
}

.backstreet_boys {
  animation: backstreet_boys 3s linear infinite;
}

@keyframes backstreet_boys {
  0%    {stroke-dasharray: 5 28.3;  stroke-dashoffset: -225;}
  15%    {stroke-dasharray: 5 28.3;  stroke-dashoffset: -300;}
  30%   {stroke-dasharray: 5 20;  stroke-dashoffset: -300;}
  45%    {stroke-dasharray: 5 20;  stroke-dashoffset: -375;}
  60%   {stroke-dasharray: 5 15;  stroke-dashoffset: -375;}
  75%    {stroke-dasharray: 5 15;  stroke-dashoffset: -450;}
  90%   {stroke-dasharray: 5 15;  stroke-dashoffset: -525;}
  100%   {stroke-dasharray: 5 28.3;  stroke-dashoffset: -925;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg width="600px" height="700px"></svg>

CodePen पर भी उपलब्ध है: https://codepen.io/anon/pen/PeRazr

Answer 7

यहां बुलमा से प्रेरित एक पूर्ण सीएसएस समाधान है। बस जोड़ दो

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      min-width: 200px;
      max-width: 100%;
      min-height: 40px;
      text-align: center;
      cursor: pointer;
    }

    @-webkit-keyframes spinAround {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
      }
    }
    @keyframes spinAround {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
      }
    }

    .button.is-loading {
      text-indent: -9999px;
      box-shadow: none;
      font-size: 1rem;
      height: 2.25em;
      line-height: 1.5;
      vertical-align: top;
      padding-bottom: calc(0.375em - 1px);
      padding-left: 0.75em;
      padding-right: 0.75em;
      padding-top: calc(0.375em - 1px);
      white-space: nowrap;
    }

    .button.is-loading::after  {
      -webkit-animation: spinAround 500ms infinite linear;
      animation: spinAround 500ms infinite linear;
      border: 2px solid #dbdbdb;
      border-radius: 290486px;
      border-right-color: transparent;
      border-top-color: transparent;
      content: "";
      display: block;
      height: 1em;
      position: relative;
      width: 1em;
    }