Christina Riedl
Telefon: 07223 967-326
Telefax: 07223 967-7326
E-Mail: christina.riedl@schoeck.de
Grundlagen Ladesymbol
Verwendung
Der einfache Lade-Indikator wird beim Nachladen von Inhalten, wie z.B. in den Download-Akkordeons, oder von weiteren Filteroptionen, wie z.B. im Detailcenter, eingesetzt.
Wird ein kompletter Bereich neugeladen und wenn die Sperrung eines Bedienelementes nötig ist, dann wird der erweiterte Lade-Indikator mit blauem Overlay verwendet, z.B. bei der Dropdown-Filterung im Downloadcenter oder dem Jahresfilter im Newsroom
Vorschau
HTML
<div class="loading_indicator_wrapper">
<div class="loading_indicator">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="loading_indicator_lock_wrapper">
Gesperrter Bereich
<div id="fancybox-loading">
<div></div>
</div>
<div class="fancybox-overlay" style="display:block;"></div>
</div>
CSS
.loading_indicator_wrapper {
position: relative;
padding-bottom: 40px;
}
.loading_indicator_wrapper .loading_indicator {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
z-index: 100;
/* see http://tobiasahlin.com/spinkit/ */
width: 50px;
height: 30px;
text-align: center;
}
.loading_indicator_wrapper .loading_indicator > div {
background-color: #0069b4;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.loading_indicator_wrapper .loading_indicator .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.loading_indicator_wrapper .loading_indicator .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.loading_indicator_wrapper .loading_indicator .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.loading_indicator_wrapper .loading_indicator .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
}
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
}
.fancybox-overlay {
background: none;
background-color: rgba(0, 105, 180, 0.2);
}
SCSS
@import "../general/_general";
.loading_indicator_wrapper {
position:relative;
padding-bottom:40px;
.loading_indicator {
@include autocenterX();
bottom:0;
z-index:100;
/* see http://tobiasahlin.com/spinkit/ */
width:50px;
height:30px;
text-align:center;
> div {
background-color:$blue;
height:100%;
width:6px;
display:inline-block;
-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;
animation:sk-stretchdelay 1.2s infinite ease-in-out;
}
.rect2 {
-webkit-animation-delay:-1.1s;
animation-delay:-1.1s;
}
.rect3 {
-webkit-animation-delay:-1.0s;
animation-delay:-1.0s;
}
.rect4 {
-webkit-animation-delay:-0.9s;
animation-delay:-0.9s;
}
.rect5 {
-webkit-animation-delay:-0.8s;
animation-delay:-0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform:scaleY(0.4)
}
20% {
-webkit-transform:scaleY(1.0)
}
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform:scaleY(0.4);
-webkit-transform:scaleY(0.4);
}
20% {
transform:scaleY(1.0);
-webkit-transform:scaleY(1.0);
}
}
}
}
.fancybox-overlay {
background:none;
background-color:rgba($blue, 0.2);
}