如何识别负责的代码，并设置转轮动画的样式

Question

感兴趣的样本是https://store.ashenglowgaming.com/

的实时网页

当客户点击主页上的“添加到购物车”按钮时，动画会触发转动进度轮，我想将其作为样式的目标，因为我需要使用颜色#d53600覆盖其默认颜色并使用任何可用的方法对转轮进行发光。

这个例子超越了一个简单的例子;这是一个真正的应用问题，坦率地说我不知道​​转轮是如何实现的，我是否可以通过CSS设置它，或者我必须在某处覆盖一些JavaScript。

问题是，首先，我如何确定负责转轮的代码？我知道如何从浏览器开发人员工具中提取的所有信息都是HTML和CSS，其提供如下：

HTML和CSS ：

  button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget a.button,
.site-header-cart .widget_shopping_cart a.button {
  background-color: #eeeeee;
  border-color: #eeeeee;
  color: #333333;
}

1516799947index.css:2 .added_to_cart,
.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
  border: 0;
  background: 0 0;
  background-color: #43454b;
  border-color: #43454b;
  color: #fff;
  cursor: pointer;
  padding: .6180469716em 1.41575em;
  text-decoration: none;
  font-weight: 600;
  text-shadow: none;
  display: inline-block;
  outline: 0;
  -webkit-appearance: none;
  border-radius: 0;

<a rel="nofollow" href="/?add-to-cart=116" data-quantity="1" data-product_id="116" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>

如果我没有提供一些结果的详细信息，请在投票前询问 - 这不是出于懒惰，而是我只是在我的深度之外而且我是一个非编程人员在这里应对。

Answer 1

我成功找到了你。要更改颜色，您应该更改以下内容。

.button.loading:after {
color: #FFFFFF; /* This is the default color */
}

如果你想玩动画的细节，你应该玩

button.loading:after, input[type="button"].loading:after, 
input[type="reset"].loading:after, input[type="submit"].loading:after, 
.button.loading:after, .added_to_cart.loading:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
content: "\f110";
-webkit-animation: fa-spin .75s linear infinite;
animation: fa-spin .75s linear infinite;
height: 20px;
width: 20px;
line-height: 20px;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
}

要在加载处于活动状态时更改按钮的背景颜色，您应该更改以下内容

.button.loading:hover {
background-color: #eeeeee;
}

希望这有帮助。

Answer 2

人们通常在保存数据期间添加微调器图像或gif，或者当需要通过ajax与服务器通信时，我看到当他们点击添加到购物车时使用了ajax。

 $.ajax({
  // your ajax code
  beforeSend: function(){
       $('.loader').show()
   },
  complete: function(){
       $('.loader').hide();
  }
 });

所以你可以寻找一个加载或加载器类，或者查看ajax javascript本身，以获得它被调用的位置的线索。