0
我正在使用佩斯载入器（http://github.hubspot.com/pace/docs/welcome/），并使用“flash”预载主题。现在，我将小圆形预加载器放在屏幕的左侧。我还添加了一个名为“封面”的类。这个div覆盖了所有的页面，并在页面加载时随着淡入淡出效果消失。所有工作都很完美如何将“请稍候”短信添加到步速载入器中
现在，我想在圆形预加载的右侧添加一条小文本消息，例如“loading，please wait ...”（例如（see pic 1））。
这里我pace.css：
.cover {
\t \t opacity: 0;
\t \t -webkit-transform: opacity 0.5s ease;
\t \t -moz-transform: opacity 0.5s ease;
\t \t -o-transform: opacity 0.5s ease;
-ms-transform: opacity 0.5s ease;
transform: opacity 0.5s ease;
}
body.pace-running .cover {
opacity: 0;
}
body.pace-done .cover {
opacity: 1;
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translate3d(0, -50px, 0);
-ms-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
-webkit-transition: -webkit-transform .5s ease-out;
-ms-transition: -webkit-transform .5s ease-out;
transition: transform .5s ease-out;
}
.pace.pace-active {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pace-running .cover{
zoom:1;
filter:alpha(opacity=10);
opacity:1;
}
.pace-done .cover{
zoom:1;
filter:alpha(opacity=100);
opacity:1;
-webkit-transition:opacity 1s linear;
-moz-transition:opacity 1s linear;
-o-transition:opacity 1s linear;
transition:opacity 1s linear;
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #142126;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 4px;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: ;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 18px;
left: 15px;
width: 18px;
height: 18px;
border: solid 1px transparent;
border-top-color: #142126;
border-left-color: #142126;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}Colud有人能帮我实现这一目标？我试图操纵CSS，但没有。谢谢你回答我。