在css3中创建具有百分比的预加载器

时间：2015-06-15 11:50:23

标签： javascript jquery html5 css3 preloader

我需要创建一个预加载器，如下所示。我使用了很多插件但没有找到值得工作的东西。我还需要绑定加载的百分比。我已完成百分比绑定。但不能用css圈嵌入百分比。任何人都可以帮助我。

This is my work so far.

这是我的HTML 

<div class="wrapper">
  <div class="pie spinner"></div>
  <div class="pie filler"></div>
  <div class="mask"></div>
</div>

这是我的css 

.wrapper {
  position: relative;
  margin: 40px auto;
  background: white;
}

.wrapper, .wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  width: 250px;
  height: 250px;
}

.wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: #08C;
  border: 5px solid rgba(0,0,0,0.5);
}

.wrapper .spinner {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  z-index: 200;
  border-right: none;
  animation: rota 5s linear ;
  animation-fill-mode:forwards;
}

.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
  animation-play-state: running;
}

.wrapper .filler {
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  left: 50%;
  opacity: 0;
  z-index: 100;
  animation: opa 5s steps(1, end) reverse;
  animation-fill-mode:forwards;
  border-left: none;
}

.wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  animation: opa 5s steps(1, end);
  animation-fill-mode:forwards;
}

@keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes opa {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

为了进一步澄清，我附上了一张符合我要求的图片。 enter image description here

1 个答案:

答案 0 :(得分：2)

I think the only way is that (sorry for long code)

    <!DOCTYPE HTML>
        <html>
          <head>
          <meta http-equiv="content-type" content="text/html; charset=utf-8">
          <style>
            .wrapper {
              position: relative;
              margin: 40px auto;
              background: white;
            }
            .wrapper, .wrapper * {
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
            }
            
            .wrapper {
              width: 250px;
              height: 250px;
            }
            
            .wrapper .pie {
              width: 50%;
              height: 100%;
              transform-origin: 100% 50%;
              position: absolute;
              background: #08C;
              border: 5px solid rgba(0,0,0,0.5);
            }
            
            .wrapper .spinner {
              border-radius: 100% 0 0 100% / 50% 0 0 50%;
              z-index: 200;
              border-right: none;
              animation: rota 5s linear ;
              animation-fill-mode:forwards;
            }
            
            .wrapper:hover .spinner,
            .wrapper:hover .filler,
            .wrapper:hover .mask {
              animation-play-state: running;
            }
            
            .wrapper .filler {
              border-radius: 0 100% 100% 0 / 0 50% 50% 0;
              left: 50%;
              opacity: 0;
              z-index: 100;
              animation: opa 5s steps(1, end) reverse;
              animation-fill-mode:forwards;
              border-left: none;
            }
            
            .wrapper .mask {
              width: 50%;
              height: 100%;
              position: absolute;
              background: inherit;
              opacity: 1;
              z-index: 300;
              animation: opa 5s steps(1, end);
              animation-fill-mode:forwards;
            }
            
            .wrapper .percentage {
              position: absolute;
              width: 40px;
              height: 20px;
              overflow: hidden;
              bottom: -30px;
              left: 42%;
            }
            .wrapper .percentage:after {
              content: attr(data-val);
              position: absolute;
              top: 0;
              left: 0;
              line-height: 20px;
              text-align: right;
              animation: perc 5s steps(1, end);
            }
        
            @keyframes perc {
              0% { margin-top: 0px;}
              1% { margin-top: -20px;}
              2% { margin-top: -40px;}
              3% { margin-top: -60px;}
              4% { margin-top: -80px;}
              5% { margin-top: -100px;}
              6% { margin-top: -120px;}
              7% { margin-top: -140px;}
              8% { margin-top: -160px;}
              9% { margin-top: -180px;}
              10% { margin-top: -200px;}
              11% { margin-top: -220px;}
              12% { margin-top: -240px;}
              13% { margin-top: -260px;}
              14% { margin-top: -280px;}
              15% { margin-top: -300px;}
              16% { margin-top: -320px;}
              17% { margin-top: -340px;}
              18% { margin-top: -360px;}
              19% { margin-top: -380px;}
              20% { margin-top: -400px;}
              21% { margin-top: -420px;}
              22% { margin-top: -440px;}
              23% { margin-top: -460px;}
              24% { margin-top: -480px;}
              25% { margin-top: -500px;}
              26% { margin-top: -520px;}
              27% { margin-top: -540px;}
              28% { margin-top: -560px;}
              29% { margin-top: -580px;}
              30% { margin-top: -600px;}
              31% { margin-top: -620px;}
              32% { margin-top: -640px;}
              33% { margin-top: -660px;}
              34% { margin-top: -680px;}
              35% { margin-top: -700px;}
              36% { margin-top: -720px;}
              37% { margin-top: -740px;}
              38% { margin-top: -760px;}
              39% { margin-top: -780px;}
              40% { margin-top: -800px;}
              41% { margin-top: -820px;}
              42% { margin-top: -840px;}
              43% { margin-top: -860px;}
              44% { margin-top: -880px;}
              45% { margin-top: -900px;}
              46% { margin-top: -920px;}
              47% { margin-top: -940px;}
              48% { margin-top: -960px;}
              49% { margin-top: -980px;}
              50% { margin-top: -1000px;}
              51% { margin-top: -1020px;}
              52% { margin-top: -1040px;}
              53% { margin-top: -1060px;}
              54% { margin-top: -1080px;}
              55% { margin-top: -1100px;}
              56% { margin-top: -1120px;}
              57% { margin-top: -1140px;}
              58% { margin-top: -1160px;}
              59% { margin-top: -1180px;}
              60% { margin-top: -1200px;}
              61% { margin-top: -1220px;}
              62% { margin-top: -1240px;}
              63% { margin-top: -1260px;}
              64% { margin-top: -1280px;}
              65% { margin-top: -1300px;}
              66% { margin-top: -1320px;}
              67% { margin-top: -1340px;}
              68% { margin-top: -1360px;}
              69% { margin-top: -1380px;}
              70% { margin-top: -1400px;}
              71% { margin-top: -1420px;}
              72% { margin-top: -1440px;}
              73% { margin-top: -1460px;}
              74% { margin-top: -1480px;}
              75% { margin-top: -1500px;}
              76% { margin-top: -1520px;}
              77% { margin-top: -1540px;}
              78% { margin-top: -1560px;}
              79% { margin-top: -1580px;}
              80% { margin-top: -1600px;}
              81% { margin-top: -1620px;}
              82% { margin-top: -1640px;}
              83% { margin-top: -1660px;}
              84% { margin-top: -1680px;}
              85% { margin-top: -1700px;}
              86% { margin-top: -1720px;}
              87% { margin-top: -1740px;}
              88% { margin-top: -1760px;}
              89% { margin-top: -1780px;}
              90% { margin-top: -1800px;}
              91% { margin-top: -1820px;}
              92% { margin-top: -1840px;}
              93% { margin-top: -1860px;}
              94% { margin-top: -1880px;}
              95% { margin-top: -1900px;}
              96% { margin-top: -1920px;}
              97% { margin-top: -1940px;}
              98% { margin-top: -1960px;}
              99% { margin-top: -1980px;}
              100% { margin-top: -2000px;}
            }
            
             
            @keyframes rota {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
            @keyframes opa {
              0% {
                opacity: 1;
              }
              50%, 100% {
                opacity: 0;
              }
            }
          </style>
          <title></title>
          </head>
          <body>
            <div class="wrapper">
              <div class="pie spinner"></div>
              <div class="pie filler"></div>
              <div class="mask"></div>
              <div class="percentage" data-val="100% 1% 2% 3% 4% 5% 6% 7% 8% 9% 10% 11% 12% 13% 14% 15% 16% 17% 18% 19% 20% 21% 22% 23% 24% 25% 26% 27% 28% 29% 30% 31% 32% 33% 34% 35% 36% 37% 38% 39% 40% 41% 42% 43% 44% 45% 46% 47% 48% 49% 50% 51% 52% 53% 54% 55% 56% 57% 58% 59% 60% 61% 62% 63% 64% 65% 66% 67% 68% 69% 70% 71% 72% 73% 74% 75% 76% 77% 78% 79% 80% 81% 82% 83% 84% 85% 86% 87% 88% 89% 90% 91% 92% 93% 94% 95% 96% 97% 98% 99%">
              </div>
            </div>
          </body>
        </html>

相关问题
最新问题