diff --git a/ecrire/base/upgrade.php b/ecrire/base/upgrade.php
index 2bedb227f80a1cd83da89a1f16a5de61f4ff8f30..d664d1ac410d0b1f1129cb87c04412eb5d1ff36c 100644
--- a/ecrire/base/upgrade.php
+++ b/ecrire/base/upgrade.php
@@ -313,7 +313,7 @@ function maj_debut_page($installee, $meta, $table) {
$timeout = _UPGRADE_TIME_OUT * 2;
$titre = _T('titre_page_upgrade');
$balise_img = charger_filtre('balise_img');
- $titre .= $balise_img(chemin_image('searching.gif'));
+ $titre .= $balise_img(chemin_image('loader.svg'),'','loader');
echo(install_debut_html($titre));
// script de rechargement auto sur timeout
$redirect = generer_url_ecrire('upgrade', "reinstall=$installee&meta=$meta&table=$table", true);
diff --git a/ecrire/inc/chercher_rubrique.php b/ecrire/inc/chercher_rubrique.php
index 5360bdca598012df32ff43ed1308450afff9b18b..e5cb9ceaad3ae97e3bceb2573bfcddc99c749db7 100644
--- a/ecrire/inc/chercher_rubrique.php
+++ b/ecrire/inc/chercher_rubrique.php
@@ -340,8 +340,8 @@ function construire_selecteur($url, $js, $idom, $name, $init = '', $id = 0) {
. "', this.parentNode.nextSibling, this.nextSibling,'',event)\" title='" . attribut_html(_T('titre_image_selecteur')) . "'><img src='"
. chemin_image($icone)
. "'\nstyle='vertical-align: middle;' alt='" . attribut_html(_T('titre_image_selecteur')) . "' /></a><img src='"
- . chemin_image('searching.gif')
- . "' id='img_"
+ . chemin_image('loader.svg')
+ . "' class='loader' id='img_"
. $idom
. "'\nstyle='visibility: hidden;' alt='*' />"
. "<input id='titreparent' name='titreparent'"
diff --git a/ecrire/inc/headers.php b/ecrire/inc/headers.php
index 759be7ab83b277c41db64f4872cb6e25b2b63027..29027265d27f7648c9bbda94cf7a94f428c6ff2e 100644
--- a/ecrire/inc/headers.php
+++ b/ecrire/inc/headers.php
@@ -159,7 +159,7 @@ function redirige_formulaire($url, $equiv = '', $format = 'message') {
return
// ie poste les formulaires dans une iframe, il faut donc rediriger son parent
"<script type='text/javascript'>if (parent.window){parent.window.document.location.replace(\"$url\");} else {document.location.replace(\"$url\");}</script>"
- . http_img_pack('searching.gif', '')
+ . http_img_pack('loader.svg', '', " class='loader'")
. '<br />'
. '<a href="' . quote_amp($url) . '">' . _T('navigateur_pas_redirige') . '</a>';
}
diff --git a/ecrire/inc/plonger.php b/ecrire/inc/plonger.php
index 08f30bcfc9756a2c45b221b592ed3b481796708e..e627fc4128f33bb0a35e8846ee6c264a26c758f9 100644
--- a/ecrire/inc/plonger.php
+++ b/ecrire/inc/plonger.php
@@ -100,8 +100,8 @@ function inc_plonger_dist($id_rubrique, $idom = "", $list = array(), $col = 1, $
$idom2 = $idom . "_col_" . ($col + 1);
$left = ($col * 150);
- return http_img_pack("searching.gif", "*",
- "style='visibility: hidden; position: absolute; " . $GLOBALS['spip_lang_left'] . ": "
+ return http_img_pack("loader.svg", "",
+ "class='loader' style='visibility: hidden; position: absolute; " . $GLOBALS['spip_lang_left'] . ": "
. ($left - 30)
. "px; top: 2px; z-index: 2;' id='img_$idom2'")
. "<div style='width: 150px; height: 100%; overflow: auto; position: absolute; top: 0px; " . $GLOBALS['spip_lang_left'] . ": "
diff --git a/ecrire/inc/selectionner.php b/ecrire/inc/selectionner.php
index c685bc4e168d7087dd13da527022599a47676c55..506bc53b99c3cad614b24fc11ba288330b115714 100644
--- a/ecrire/inc/selectionner.php
+++ b/ecrire/inc/selectionner.php
@@ -116,8 +116,8 @@ function construire_selectionner_hierarchie($idom, $liste, $racine, $url, $name,
. ($url_init ? "\nhref='$url_init'" : '')
. "></a>"
. "<div class='recherche_rapide_parent'>"
- . http_img_pack("searching.gif", "*",
- "style='visibility: hidden;float:" . $GLOBALS['spip_lang_right'] . "' id='$idom5'")
+ . http_img_pack("loader.svg", "",
+ "class='loader' style='visibility: hidden;float:" . $GLOBALS['spip_lang_right'] . "' id='$idom5'")
. ""
. "<input style='width: 100px;float:" . $GLOBALS['spip_lang_right'] . ";' type='search' id='$idom1'"
// eliminer Return car il provoque la soumission (balise unique)
diff --git a/prive/images/loader.svg b/prive/images/loader.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f67b082d7826fa5a116bf6e3ce554c8738f4c6e0
--- /dev/null
+++ b/prive/images/loader.svg
@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="-30 -30 60 60" xmlns="http://www.w3.org/2000/svg">
+<g stroke="currentColor" stroke-width="0.1" fill-opacity="0" fill="currentColor">
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(30)"><animate attributeName="fill-opacity" begin="0s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(60)"><animate attributeName="fill-opacity" begin="0.1s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(90)"><animate attributeName="fill-opacity" begin="0.2s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(120)"><animate attributeName="fill-opacity" begin="0.3s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(150)"><animate attributeName="fill-opacity" begin="0.4s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(180)"><animate attributeName="fill-opacity" begin="0.5s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(210)"><animate attributeName="fill-opacity" begin="0.6s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(240)"><animate attributeName="fill-opacity" begin="0.7s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(270)"><animate attributeName="fill-opacity" begin="0.8s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(300)"><animate attributeName="fill-opacity" begin="0.9s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10" transform="rotate(330)"><animate attributeName="fill-opacity" begin="1s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+<ellipse cx="0" cy="-19" rx="3" ry="10"><animate attributeName="fill-opacity" begin="1.1s" dur="1.2s" values="1;0.1" repeatCount="indefinite"/></ellipse>
+</g>
+</svg>
\ No newline at end of file
diff --git a/prive/squelettes/inclure/head.html b/prive/squelettes/inclure/head.html
index ac4ac901d8841f42cd8d449ecfd94698cef05588..f2b873d78c7962a06be31bc335ca81c948bf43ef 100644
--- a/prive/squelettes/inclure/head.html
+++ b/prive/squelettes/inclure/head.html
@@ -10,7 +10,7 @@ var url_menu_rubrique="[(#CONST{_DIR_RACINE}|sinon{./}|concat{#CONST{_SPIP_SCRIP
[(#EVAL{$_COOKIE}|table_valeur{spip_accepte_ajax}|>={1}|non)
function test_accepte_ajax(){jQuery.ajax({"url":"[(#URL_ECRIRE{test_ajax,js=1}|replace{'&','\x26'})]"});}
][(#CONST{_OUTILS_DEVELOPPEURS}|oui)var _OUTILS_DEVELOPPEURS=true;
-]var ajax_image_searching = '<img src="#CHEMIN_IMAGE{searching.gif}" alt="" />';
+]var ajax_image_searching = '<img src="#CHEMIN_IMAGE{loader.svg}" class="loader" alt="" />';
var stat = [(#CONFIG{activer_statistiques}|=={non}|?{0,1})];
var confirm_changer_statut = '<:confirm_changer_statut|html2unicode|addslashes|unicode_to_javascript:>';
var error_on_ajaxform='<:erreur_technique_ajaxform|html2unicode|addslashes|unicode_to_javascript:>';
diff --git a/prive/themes/spip/clear.css b/prive/themes/spip/clear.css
index dd923084bd2af6a7fc107fa8ef8902de5a3b2fdd..f2eaa387dad98c9a054ad11cd841167517f11247 100644
--- a/prive/themes/spip/clear.css
+++ b/prive/themes/spip/clear.css
@@ -74,4 +74,6 @@ td {
td { text-align: left; }
-.clicable {cursor:hand;cursor:pointer;}
\ No newline at end of file
+.clicable {cursor:hand;cursor:pointer;}
+
+img.loader, svg.loader { vertical-align: middle; width: 1.5em; height: 1.5em; margin: 0 0.25em;}