Skip to content
Snippets Groups Projects
Commit 9376efc7 authored by Julian Pustkuchen's avatar Julian Pustkuchen
Browse files

Enhanced Styling and removed no old dependencies.

parent f4b9c347
Branches
Tags
1 merge request!2Issue #3342445: jQuery .live() is deprecated
images/ajax-loader.gif

6.66 KiB

/* 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
......@@ -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">&nbsp;</div></div><span class="loading-text">'+ Drupal.t('Loading ...', {}, {context: "jquery_loadinganimation"}) +'</span></div></div>');
}
};
......
# $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"
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment