diff --git a/images/ajax-loader.gif b/images/ajax-loader.gif
deleted file mode 100644
index 0ca7ada960568fff04400cda966fbdcb106abfa2..0000000000000000000000000000000000000000
Binary files a/images/ajax-loader.gif and /dev/null differ
diff --git a/jquery_loadinganimation.css b/jquery_loadinganimation.css
index c20ac13a657f94754bf2a2a196e2beea570e40dc..0ff6ff26f24bcc8b984f86da5507d3b0f27ea18e 100644
--- a/jquery_loadinganimation.css
+++ b/jquery_loadinganimation.css
@@ -1,46 +1,105 @@
/* Animation */
-@-webkit-keyframes loadinganimation-changing-colors {
+/* -- Moving Bar */
+@-webkit-keyframes loadinganimation-moving-bar {
0% {
- background-color: #b6e026; /* Old browsers */
+ background-position:0 0;
+ opacity:0;
}
- 50% {
- background-color: #c9f33b; /* Old browsers */
+ 35% {
+ background-position:-700px 0;
+ opacity:1.0;
}
100% {
- background-color: #b6e026; /* Old browsers */
+ background-position:-1400px 0;
+ opacity:0;
}
}
-@-moz-keyframes loadinganimation-changing-colors {
+@-moz-keyframes loadinganimation-moving-bar {
0% {
- background-color: #b6e026; /* Old browsers */
+ background-position:0 0;
+ opacity:0;
}
- 50% {
- background-color: #c9f33b; /* Old browsers */
+ 35% {
+ background-position:-700px 0;
+ opacity:1.0;
}
100% {
- background-color: #b6e026; /* Old browsers */
+ background-position:-1400px 0;
+ opacity:0;
}
}
-@-o-keyframes loadinganimation-changing-colors {
+@-o-keyframes loadinganimation-moving-bar {
0% {
- background-color: #b6e026; /* Old browsers */
+ background-position:0 0;
+ opacity:0;
}
- 50% {
- background-color: #c9f33b; /* Old browsers */
+ 35% {
+ background-position:-700px 0;
+ opacity:1.0;
}
100% {
- background-color: #b6e026; /* Old browsers */
+ background-position:-1400px 0;
+ opacity:0;
}
}
-@keyframes loadinganimation-changing-colors {
+@keyframes loadinganimation-moving-bar {
0% {
- background-color: #b6e026; /* Old browsers */
+ background-position:0 0;
+ opacity:0;
}
- 50% {
- background-color: #c9f33b; /* Old browsers */
+ 35% {
+ background-position:-700px 0;
+ opacity:1.0;
}
100% {
- background-color: #b6e026; /* Old browsers */
+ background-position:-1400px 0;
+ opacity:0;
+ }
+}
+
+/* -- Blinking Text */
+@-webkit-keyframes loadinganimation-blinking-text {
+ 0% {
+ opacity:1.0;
+ }
+ 50% {
+ opacity:0.3;
+ }
+ 100% {
+ opacity:1.0;
+ }
+}
+@-moz-keyframes loadinganimation-blinking-text {
+ 0% {
+ opacity:1.0;
+ }
+ 50% {
+ opacity:0.3;
+ }
+ 100% {
+ opacity:1.0;
+ }
+}
+@-o-keyframes loadinganimation-blinking-text {
+ 0% {
+ opacity:1.0;
+ }
+ 50% {
+ opacity:0.3;
+ }
+ 100% {
+ opacity:1.0;
+ }
+}
+@keyframes loadinganimation-blinking-text {
+ 0% {
+ opacity:1.0;
+ }
+ 50% {
+ opacity:0.3;
+ }
+ 100% {
+ opacity:1.0;
}
}
@@ -60,38 +119,51 @@
}
#loadinganimation .loadinganimation-box {
- background: rgb(255,255,255); /* Fallback */
- background: rgba(255,255,255,0.85);
- padding: 25px 0;
position:absolute;
- border-radius:4px;
- overflow:hidden;
- box-shadow:0 45px 35px rgba(0, 0, 0, 0.3);
/* vertical and horizontal centered */
width:50%;
+ height:50px;
left:50%;
top:50%;
margin-top:-40px;
margin-left:-25%;
+ border-radius:35px;
+ border:10px solid rgba(255,255,255,0.6);
}
-#loadinganimation .loadinganimation-box:before,
-#loadinganimation .loadinganimation-box:after {
- content:" ";
- position:absolute;
- bottom:0;
- left:0;
- width:100%;
- height:7px;
- box-shadow:0 2px 3px rgba(0,0,0,0.3) inset;
+#loadinganimation .loadinganimation-outer{
+ background:#b6e026;
+ border:1px solid #c9f23e;
+ border-radius:25px;
+ box-shadow:0 0 3px rgba(0,0,0,0.3);
+}
+
+#loadinganimation .loadinganimation-inner{
+ border-radius:25px;
+ height:48px;
+
+ background: -moz-linear-gradient(left, rgba(237,255,175,0) 0%, rgba(237,255,175,0) 17%, rgba(237,255,175,0.3) 42%, rgba(237,255,175,0.75) 46%, rgba(237,255,175,0.65) 56%, rgba(237,255,175,0) 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(237,255,175,0)), color-stop(17%,rgba(237,255,175,0)), color-stop(42%,rgba(237,255,175,0.3)), color-stop(46%,rgba(237,255,175,0.75)), color-stop(56%,rgba(237,255,175,0.65)), color-stop(100%,rgba(237,255,175,0))); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(left, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(left, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(left, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* IE10+ */
+ background: linear-gradient(to right, rgba(237,255,175,0) 0%,rgba(237,255,175,0) 17%,rgba(237,255,175,0.3) 42%,rgba(237,255,175,0.75) 46%,rgba(237,255,175,0.65) 56%,rgba(237,255,175,0) 100%); /* W3C */
- -webkit-animation: loadinganimation-changing-colors 1s infinite; /* Safari 4+ */
- -moz-animation: loadinganimation-changing-colors 1s infinite; /* Fx 5+ */
- -o-animation: loadinganimation-changing-colors 1s infinite; /* Opera 12+ */
- animation: loadinganimation-changing-colors 1s infinite; /* IE 10+ */
+ -webkit-animation: loadinganimation-moving-bar 3s linear infinite; /* Safari 4+ */
+ -moz-animation: loadinganimation-moving-bar 3s linear infinite; /* Fx 5+ */
+ -o-animation: loadinganimation-moving-bar 3s linear infinite; /* Opera 12+ */
+ animation: loadinganimation-moving-bar 3s linear infinite; /* IE 10+ */
}
-#loadinganimation .loadinganimation-box:before{
- bottom:auto;
- top:0;
- box-shadow:0 -2px 3px rgba(0,0,0,0.3) inset;
+#loadinganimation .loading-text{
+ display:block;
+ text-align:center;
+ color:#fff;
+ position:relative;
+ z-index:99;
+ margin-top:-35px;
+
+ -webkit-animation: loadinganimation-blinking-text 1s linear infinite; /* Safari 4+ */
+ -moz-animation: loadinganimation-blinking-text 1s linear infinite; /* Fx 5+ */
+ -o-animation: loadinganimation-blinking-text 1s linear infinite; /* Opera 12+ */
+ animation: loadinganimation-blinking-text 1s linear infinite; /* IE 10+ */
}
\ No newline at end of file
diff --git a/jquery_loadinganimation.js b/jquery_loadinganimation.js
index 86e2d1d6044f773a7475679af54f61da5aae2c5f..d64df4d13736a3585c68df17af51675046af0028 100644
--- a/jquery_loadinganimation.js
+++ b/jquery_loadinganimation.js
@@ -104,7 +104,7 @@
if ($("div#loadinganimation").length == 0) {
$("body")
.append(
- '<div id="loadinganimation"><div class="loadinganimation-box"><div class="inner"><span class="loading-text">'+ Drupal.t('Loading ...', {}, {context: "jquery_loadinganimation"}) +'</span></div></div></div>');
+ '<div id="loadinganimation"><div class="loadinganimation-box"><div class="loadinganimation-outer"><div class="loadinganimation-inner"> </div></div><span class="loading-text">'+ Drupal.t('Loading ...', {}, {context: "jquery_loadinganimation"}) +'</span></div></div>');
}
};
diff --git a/translations/jquery_loadinganimation.de.po b/translations/jquery_loadinganimation.de.po
deleted file mode 100644
index 902b3312701fb1d070922523395413ad6951f600..0000000000000000000000000000000000000000
--- a/translations/jquery_loadinganimation.de.po
+++ /dev/null
@@ -1,85 +0,0 @@
-# $Id$
-# German translation of Drupal (general)
-# Copyright YEAR NAME <EMAIL@ADDRESS>
-# Generated from files:
-# jquery_loadinganimation/jquery_loadinganimation.admin.inc: n/a
-# jquery_loadinganimation/jquery_loadinganimation.module: n/a
-# jquery_loadinganimation/jquery_loadinganimation.info: n/a
-# jquery_loadinganimation/jquery_loadinganimation.js: n/a
-# None <None>, 2011.
-msgid ""
-msgstr ""
-"Project-Id-Version: PROJECT VERSION\n"
-"POT-Creation-Date: 2011-12-17 20:03+0100\n"
-"PO-Revision-Date: 2011-12-17 20:05+0200\n"
-"Last-Translator: None <None>\n"
-"Language-Team: Anybody\n"
-"Language: de\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=utf-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=2; plural=(n != 1);\n"
-"X-Generator: Virtaal 0.7.0\n"
-
-#: jquery_loadinganimation/jquery_loadinganimation.admin.inc:15
-msgid "Loading animation spinner path"
-msgstr "Pfad zur Ladegrafik"
-
-#: jquery_loadinganimation/jquery_loadinganimation.admin.inc:16
-msgid "The loading animation spinner path to use."
-msgstr "Der zu verwendende Pfad zur Ladeanimation-Grafik"
-
-#: jquery_loadinganimation/jquery_loadinganimation.admin.inc:22
-msgid "Show during AJAX requests"
-msgstr "Während AJAX-Anfragen anzeigen"
-
-#: jquery_loadinganimation/jquery_loadinganimation.admin.inc:23
-msgid "Display the loading animation during AJAX requests too."
-msgstr "Die Ladeanimation auch während laufenden AJAX-Anfragen anzeigen."
-
-#: jquery_loadinganimation/jquery_loadinganimation.admin.inc:29
-msgid "JQuery subselector"
-msgstr "JQuery Subselektor"
-
-#: jquery_loadinganimation/jquery_loadinganimation.admin.inc:30
-msgid "You may optionally use this subselector to reduce the DOM context which to register loading animation to."
-msgstr ""
-"Optional kann ein Subselektor angegeben werden, um die gewählten DOM "
-"Elemente weiter einzuschränken, auf die ein Ladeanimation-Trigger gesetzt "
-"wird."
-
-#: jquery_loadinganimation/jquery_loadinganimation.module:22
-msgid "JQuery loadinganimation module shows a loading layer on page loading events.\tThese may be triggered by form submission, clicking a hyperlink or executing an AJAX call.\n \tHyperlinks may be excluded from trigger by adding a \".noLoadingAnimation\" class.\n \tFurther \"javascript\" and \"#\" hyperlinks are excluded."
-msgstr ""
-"Das JQuery Loadinganaimation Modul zeigt einen Lade-Layer auf der Seite, "
-"wenn ein Inhalt geladen wird. Dies kann durch die Verwendung von Formularen, "
-"Klick auf einen Link oder eine AJAX-Anfrage geschehen.\n"
-"Hyperlinks können vom Trigger ausgeschlossen werden, indem sie eine Klasse "
-"\".noLoadingAnimation\" erhalten. Des Weiteren werden \"javascript\" und \"#\" "
-"Hyperlinks nicht mit einer Ladeanimation versehen."
-
-#: jquery_loadinganimation/jquery_loadinganimation.module:34
-msgid "JQuery Loadinganimation"
-msgstr "JQuery Ladeanimation"
-
-#: jquery_loadinganimation/jquery_loadinganimation.module:35
-msgid "Configure JQuery loadinganimation settings."
-msgstr "JQuery Ladeanimation konfigurieren."
-
-#: jquery_loadinganimation/jquery_loadinganimation.info:0
-msgid "JQuery Loading Animation"
-msgstr "JQuery Ladeanimation"
-
-#: jquery_loadinganimation/jquery_loadinganimation.info:0
-msgid "Shows a (configurable) loading animation layer on page loads."
-msgstr ""
-"Blendet eine (konfigurierbare) Ladeanimation als Layer über die Seite ein, "
-"wenn Inhalte geladen werden."
-
-#: jquery_loadinganimation/jquery_loadinganimation.info:0
-msgid "User interface"
-msgstr "Benutzeroberfläche"
-
-#: jquery_loadinganimation/jquery_loadinganimation.js:0;0;0;0
-msgid "Loading"
-msgstr "Wird geladen"