0
私はペースローダー（http://github.hubspot.com/pace/docs/welcome/）を使用しており、「フラッシュ」プリロードテーマを使用しています。さて、私は画面の左側に小さな円形プリローダーを置いています。私は "カバー"と呼ばれるクラスでdivも追加しました。このdivはすべてのページをカバーし、ページが読み込まれるとフェード効果で消えます。すべてが完璧に動作します。ペースローダーに「お待ちください」テキストメッセージを追加するには
ここでは、円形のプリロードの右側に「読み込み中です。お待ちください...」（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を操作しようとしますが、何もしません。私に答えてくれてありがとう。