Spinner for Twitter Bootstrap .btn

Question

Tôi đang cố gắng tạo ra các trình quay cho các nút Khởi động Twitter. Spinners nên chỉ ra một số công việc đang tiến hành (ví dụ: ajax request).

Dưới đây là ví dụ nhỏ: http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML (đầy đủ về jsfiddle):

Unknown element (no animation here!): 
<p> 
    <button class="btn-success has-spinner"> 
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span> 
    Foo 
    </button> 
</p> 

Works when width is defined: 
<p> 
    <a class="btn btn-success has-spinner"> 
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span> 
    Foo 
    </a> 
</p> 

CSS:

.spinner { 
    display: inline-block; 
    opacity: 0; 
    width: 0; 

    -webkit-transition: opacity 0.25s, width 0.25s; 
    -moz-transition: opacity 0.25s, width 0.25s; 
    -o-transition: opacity 0.25s, width 0.25s; 
    transition: opacity 0.25s, width 0.25s; 
} 

/* ... */ 

.has-spinner.active .spinner { 
    opacity: 1; 
    width: auto; /* This doesn't work, just fix for unkown width elements */ 
} 

/* ... */ 

.has-spinner.btn.active .spinner { 
    width: 16px; 
} 

.has-spinner.btn-large.active .spinner { 
    width: 19px; 
} 

Thỏa thuận này là css "margin: auto" doesn' t tạo ra hình ảnh động mong muốn và độ rộng spinner cho tất cả các phần tử cần được xác định thông qua css. Có cách nào để giải quyết vấn đề này không? Ngoài ra, có lẽ có cách nào tốt hơn để sắp xếp/hiển thị các spinners?

Và tôi có nên chơi với các nút đệm và thực hiện theo cách mà chiều rộng nút không thay đổi, khi xoay tròn được hiển thị hoặc các nút thay đổi chiều rộng là ok? (Nếu bị coi là đoạn trích ở đâu đó)

Answer 1

Tôi có thể khắc phục sự cố này bằng cách sử dụng chiều rộng tối đa istead chiều rộng. Ngoài ra đây là giải pháp CSS tinh khiết, do đó, nó có thể được sử dụng khá nhiều ở khắp mọi nơi (ví dụ hiển thị X đánh dấu trên thẻ, khi người dùng di chuột qua nó, vv).

Demo: http://jsfiddle.net/AndrewDryga/GY6LC/

New CSS:

.spinner { 
    display: inline-block; 
    opacity: 0; 
    max-width: 0; 

    -webkit-transition: opacity 0.25s, max-width 0.45s; 
    -moz-transition: opacity 0.25s, max-width 0.45s; 
    -o-transition: opacity 0.25s, max-width 0.45s; 
    transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */ 
} 

/* ... */ 

.has-spinner.active .spinner { 
    opacity: 1; 
    max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */ 
} 

Answer 2

tôi thấy mã của bạn là siêu hữu ích. Tôi biết đó là một năm nhưng tôi đã cải thiện mã. Tôi không thích phải thêm khoảng thời gian và thẻ i theo cách thủ công vào từng phần tử. Tôi đã chỉnh sửa mã JavaScript để tự động thêm các thẻ này. Vì vậy, tất cả những gì bạn phải làm để thêm một spinner vào nút/liên kết sẽ thêm lớp có sẵn cho nó và cung cấp cho nó thẻ dữ liệu spinner = "[left | right]" (xác định bên nào của nút văn bản của spinner) Nên được đặt).

Đây là hoạt Javascript chỉnh sửa:

$(function(){ 

var spinnerHTML = "<span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>", 
    spinnerObjects = $(".has-spinner"); 

spinnerObjects.filter("[data-spinner=left]").prepend(spinnerHTML + "&nbsp;") 
spinnerObjects.filter("[data-spinner=right]").append("&nbsp;" + spinnerHTML) 
spinnerObjects.click(function() { 
    $(this).toggleClass('active'); 
}); 

});

Đây là liên kết để fiddle với tất cả những thay đổi (CSS, HTML):

http://jsfiddle.net/codyschouten/QKefn/2/

Answer 3

Tôi đã cập nhật @andrew-dryga giải pháp cho sử dụng mới nhất bây giờ bootstrap (3.3.5), font-tuyệt vời (4.3.0), jquery (2.1.3) và sửa đổi nó một chút.

ví dụ:

<button class="btn btn-success has-spinner"> 
    <i class="fa fa-spinner fa-spin"></i> 
    Foo 
</button> 

và

$('a.has-spinner, button.has-spinner').click(function() { 
    $(this).toggleClass('active'); 
}); 

và phù hợp css thay đổi http://jsfiddle.net/oshybystyi/v04ag5ch/4/

Answer 4

giải pháp Rất đơn giản làm việc đối với tôi là thay đổi phần tử từ

<i></i> 
with 
<em></em> 

này được thay đổi duy nhất, tôi đã làm.