Commit 1ae8218d authored by Maarten de Jong's avatar Maarten de Jong

Replace ajax GIF with pure CSS implementation and remove GIF files

parent b6ec4f03
......@@ -742,4 +742,41 @@ input[type="radio"] {
.color-c9 { color: #9482C9; } /* warlock */
.color-c10 { color: #00ffba; } /* monk */
.color-c11 { color: #FF7D0A; } /* druid */
.color-c12 { color: #a330c9; } /* demon hunter */
\ No newline at end of file
.color-c12 { color: #a330c9; } /* demon hunter */
/* CSS Loader Spinner */
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<section id="update_online_module">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</section>
......
......@@ -36,7 +36,7 @@
{
$("#language_picker").fadeOut(250, function()
{
$(this).html('<center><img src="{$image_path}ajax.gif" /></center>').fadeIn(250, function()
$(this).html('<div class="lds-ring"><div></div><div></div><div></div><div></div></div>').fadeIn(250, function()
{
$.get(Config.URL + "sidebox_language_picker/language_picker/set/" + language, function()
{
......
<section id="update_status">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</section>
......
<div id="update_status">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
......
<div id="update_status">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
......
<div id="update_status">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
......
<div id="update_status">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
......
<div id="update_status">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
......
<div id="update_status">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
......
<div id="update_status">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
......
<div id="update_status">
<div style="text-align:center;margin-top:10px;margin-bottom:10px;">
<img src="{$image_path}ajax.gif" />
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment