@charset "UTF-8";
/* 例
<div class="loading"><span>U</span><span>p</span><span>d</span><span>a</span><span>t</span><span>e</span><span>!</span></div>
*/

.loading {text-align:center;color:#fff;}
.loading.sml{color:#555;}

.loading span {
position:relative;
padding:0 0.2em;
visibility:hidden;
opacity:0;
-webkit-animation:load 2s ease-in-out;
-moz-animation:load 2s ease-in-out;
-ms-animation:load 2s ease-in-out;
-o-animation:load 2s ease-in-out;
animation:load 2s ease-in-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
.loading.sml span {
padding:0 2px;
-webkit-animation:load_sml 2s ease-in-out;
-moz-animation:load_sml 2s ease-in-out;
-ms-animation:load_sml 2s ease-in-out;
-o-animation:load_sml 2s ease-in-out;
animation:load_sml 2s ease-in-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
.loading span:nth-of-type(1) {
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
.loading span:nth-of-type(2) {
-webkit-animation-delay:0.2s;
-moz-animation-delay:0.2s;
-ms-animation-delay:0.2s;
-o-animation-delay:0.2s;
animation-delay:0.2s;
}
.loading span:nth-of-type(3) {
-webkit-animation-delay:0.4s;
-moz-animation-delay:0.4s;
-ms-animation-delay:0.4s;
-o-animation-delay:0.4s;
animation-delay:0.4s;
}
.loading span:nth-of-type(4) {
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
.loading span:nth-of-type(5) {
-webkit-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-ms-animation-delay:0.8s;
-o-animation-delay:0.8s;
animation-delay:0.8s;
}
.loading span:nth-of-type(6) {
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
.loading span:nth-of-type(7) {
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-o-animation-delay:1.2s;
animation-delay:1.2s;
}

@-webkit-keyframes load {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}
@-moz-keyframes load {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}
@-ms-keyframes load {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}
@-o-keyframes load {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}
@keyframes load {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #1cc, 0 -1px 8px #1cc;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}

@-webkit-keyframes load_sml {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #eee, 0 -1px 8px #eee;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}
@-moz-keyframes load_sml {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #eee, 0 -1px 8px #eee;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}
@-ms-keyframes load_sml {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #eee, 0 -1px 8px #eee;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}
@-o-keyframes load_sml {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #eee, 0 -1px 8px #eee;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}
@keyframes load_sml {
0% {visibility:hidden; opacity:0.1; text-shadow:none;}
50% {visibility:visible; opacity:1; text-shadow:0 1px 8px #eee, 0 -1px 8px #eee;}
100% {visibility:hidden; opacity:0.1; text-shadow:none;}
}