在按钮内添加进度指示器
在按钮内添加进度指示器
提问于 2013-06-04 22:58:20
我有以下按钮：
http://jsfiddle.net/TU6vQ/
我想在‘邀请你的朋友’文本旁边添加一个加载微调器。我该怎么做呢？微调器是here。
这个微调器会是一个按钮内部的div吗？或者，最简单的方法是什么？我还想在单击按钮时显示微调器。
这是我的简单按钮：
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>Stack Overflow用户
发布于 2013-06-04 23:14:27
我将在button元素中添加图像，然后使用css定位它并调整其大小。下面是jfiddle：http://jsfiddle.net/TU6vQ/9/
代码如下：
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
<img src="http://www.gifstache.com/images/ajax_loader.gif" alt="..." class="spinner"/>
</button>CSS：
.button {
line-height: 52px;
font-size: 16px;
width: 270px;
height: 50px;
text-shadow: -1px -1px 1px rgba(175,175,175,.42);
text-transform: uppercase;
text-decoration: none;
text-align: center;
line-height: 38px;
color: #fefefe;
font-size: 14px;
display: block;
height: 38px;
border: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
box-shadow: 1px 2px 2px rgba(0,0,0,.1);
}
.button.blue {
background: rgb(169,191,200);
background: -moz-linear-gradient(top, rgba(169,191,200,1) 0%, rgba(169,191,200,1) 51%, rgba(143,170,182,1) 54%, rgba(143,170,182,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,191,200,1)), color-stop(51%,rgba(169,191,200,1)), color-stop(54%,rgba(143,170,182,1)), color-stop(100%,rgba(143,170,182,1)));
background: -webkit-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -o-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -ms-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: linear-gradient(to bottom, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
}
.spinner
{
margin-top:8px;
margin-left:5px;
height:20px;
width:20px;
position:absolute;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16921104
复制相关文章
相似问题
腾讯云开发者
