如何在步速加载器中添加“请稍候”文本消息

Question

I'm using Pace loader ( http://github.hubspot.com/pace/docs/welcome/ ) and I use the "flash" preload theme. Now, I put the small circular preloader in the left side of the screen .I have added also a div with a class called "cover". This div cover all the page and disappear with fade effect when the page is loaded. All work perfectly.

Now, I would like to add a small text message in the right of the circular preload, "loading, please wait..." for example ( see pic 1 ).

Here my pace.css:

  .cover { opacity: 0; -webkit-transform: opacity 0.5s ease; -moz-transform: opacity 0.5s ease; -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 someone help me to reach this goal? I try to manipulate the css, but nothing. Thanks for answer me.

Answer 1

just resolve the issue. I've added this few lines of code into css, hope it can help someone out there ;-)

  .pace:after {
  content: "LOADING CONTENT...PLEASE WAIT";
  -webkit-font-smoothing:antialiased;
  font-family: 'Inconsolata', ;
  font-size:14px;
  margin-top:18px;
  color:#464652;
  position:absolute;
  width: 400px;
  padding-left: 45px;
  letter-spacing:0.8px;
  font-weight:400;
  }