트위터 부트 스트랩의 버튼 은 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...버튼에 텍스트가 표시됩니다.
버튼이 로딩 상태에있을 때 아이콘을 추가 할 수 있습니까? 어떻게 든 Bootstrap <i class="icon-upload icon-large"></i>이 Loading 상태에있는 동안 버튼 안의 아이콘을 제거하는 것처럼 보입니다 .
위에서 설명한 동작을 보여주는 간단한 데모 가 있습니다. 로딩 상태가되면 아이콘이 사라집니다. 시간 간격 직후에 다시 나타납니다.
답변
bootstrap-button.js 소스 를 살펴보면 부트 스트랩 플러그인이 버튼을 호출 할 때 내부 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>답변
CSS3 애니메이션을 사용 하는 부트 스트랩 3에 대한 간단한 솔루션 .
CSS에 다음을 넣으십시오.
.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 애니메이션을 지원하지 않습니다.
답변
답변
@flion의 솔루션을 정말 멋지게 보이게하려면 위아래로 흔들리지 않도록 해당 아이콘의 중심점을 조정할 수 있습니다. 이것은 작은 글꼴 크기로 나에게 적합합니다.
.glyphicon-refresh.spinning {
transform-origin: 48% 50%;
}답변
부트 스트랩 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 에서 확인하십시오
답변
순수한 SVG 및 CSS 애니메이션을 기반으로 한 것입니다. 스 니펫 벨로우즈에서 JS 코드에주의를 기울이지 마십시오. 단지 데모 용입니다. 광산을 기반으로 맞춤형을 자유롭게 만드십시오. 매우 쉽습니다.
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
답변
Bulma에서 영감을 얻은 본격적인 CSS 솔루션입니다. 그냥 추가
.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;
}