在css3中使用百分比创建预加载器

Question

I need to create a preloader as shown in the below. 我需要创建一个如下所示的预加载器。 I have used many plugins but nothing found worth working. 我使用了许多插件，但没有找到值得工作的插件。 I need to bind the percentage of loading also. 我还需要绑定加载的百分比。 I have done the percentage binding. 我已经完成了百分比绑定。 but not could not embed the percentage with the css circle. 但无法将百分比嵌入css圈中。 Can any one please help me. 谁能帮帮我吗。

This is my work so far. 到目前为止，这是我的工作。

This is my html 这是我的HTML

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

And this is my css 这是我的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;
  }
}

And for further clarification I am attaching an image for my requirement. 为了进一步澄清，我附上一张我需要的图片。 在此处输入图片说明

Answer 1

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>

在css3中使用百分比创建预加载器

问题描述

1 个解决方案

解决方案1
2 2015-06-15 14:35:12

在css3中使用百分比创建预加载器

问题描述

1 个解决方案

解决方案1 2 2015-06-15 14:35:12

解决方案1
2 2015-06-15 14:35:12