বোতামটি লোডিং অবস্থায় থাকলে কীভাবে স্পিনার আইকন যুক্ত করবেন?

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>

হরফ ফন্টের দিকে তাকিয়ে আপনি দেখতে পাবেন যে এখন একটি অ্যানিমেটেড স্পিনার আইকন রয়েছে ।

এইভাবে কোনও 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/...

— অ্যান্ড্রু Dryga

আমি এই পদ্ধতির ব্যবহার সুপারিশ stackoverflow.com/a/15988830/437690

— limitium

Answer 1

আপনি যদি বুটস্ট্র্যাপ-বাটন.জেএস উত্সটি দেখেন, আপনি দেখতে পাবেন যে বুটস্ট্র্যাপ প্লাগইন কল করার সময় ডাটা-লোডিং-পাঠ্যের যে কোনও কিছুই বাটনগুলির অভ্যন্তরীণ এইচটিএমএলকে প্রতিস্থাপন করে $(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

দুর্দান্ত গর্চ 101 কাজ করে! আমি ভুলে গেছি যে HTMLকোনও ট্যাগ বৈশিষ্ট্যে পাঠ্যের সাথে মিশ্রিত করতে পারে । :-)

— লেনিয়েল ম্যাককাফেরি

বেহালার সাফারি 6.0.5 (7536.30.1), ম্যাক OS X এ Chrome 31.0.1604.0 হলদে জন্য কাজ করছে না

— Burak Erdem

স্থির: 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# এর উপর ভিত্তি করে

• দ্রষ্টব্য: আইই 9 এবং নীচে CSS3 অ্যানিমেশনগুলিকে সমর্থন করে না।

Comments

এটা কি হওয়া উচিত animationনয় -animation?

— আন্দ্রে মিখায়লোভ - লোলমাস

দুর্দান্ত সমাধান। ডেস্কটপে এবং আইপ্যাডে সাফারিতে এই অ্যানিমেটিং নিয়ে আমার সমস্যা আছে। এটি আইকনটি দেখায় তবে এনিমেট করে না। এমন কি কখনও অভিজ্ঞতা?

— জয়হক্সফ্যান93

@ জয়হক্সফ্যান93 হ্যাঁ আমি সম্প্রতি আইই তেও লক্ষ্য করেছি। শীঘ্রই এটির দিকে নজর দেওয়া হবে

— ফ্লায়ান

উত্তর animationপরিবর্তে আপডেট করা হয়েছিল -animation। আমার সাথে এফএফ এবং আইইতে এই পরিবর্তনটি জরিমানা করে। ফায়ারফক্স অ্যানিমেশনটি যদিও খুব মসৃণ দেখাচ্ছে না।

— ফ্লায়ন

+1 টি। এখানে একটি অনুরূপ পাওয়া গেছে .... রেকর্ডের জন্য পোস্ট করা হচ্ছে ...

— Fr0zenFyr

Answer 3

এর জন্য এখন একটি পূর্ণাঙ্গ প্লাগইন রয়েছে:

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

Comments

হাই @ এরু পেনকামান আপনার এবং আসল মধ্যে পার্থক্য কি?

— ইভান ওয়াং

আরে ইভান, বাছাই করুন কিন্তু আমার কপির লডাকে আপডেট করার মতো আমি আর পাই নি! এটি কেবল আসল, আমি আমার আগের মন্তব্যটি সরিয়েছি। এর জন্যে দুঃখিত!

— roo2

Answer 4

@ ফ্লিয়ন দ্বারা সমাধানটি সত্যিই দুর্দান্ত দেখানোর জন্য, আপনি সেই আইকনটির কেন্দ্র বিন্দুটি সামঞ্জস্য করতে পারেন যাতে এটি ডুবে না যায়। এটি একটি ছোট ফন্ট আকারে আমার কাছে সঠিক দেখাচ্ছে:

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

Comments

.glyphicon-refresh.spinning { transform-origin: 50% 58%; }আমার জন্য কাজ করেছেন

— ওলুকিয়াম্যান

হুম, { 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);

এটি জেএসফিডেলে দেখুন

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>

কোডপেনেও উপলভ্য: 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;
    }