堆棧內存溢出
  簡體   English   中英

在css3中使用百分比創建預加載器

[英]creating preloader with percentage in css3

 原文  2015-06-15 11:50:22  8   1    javascript/ jquery/ html5/ css3/ preloader

問題描述

我需要創建一個如下所示的預加載器。 我使用了許多插件，但沒有找到值得工作的插件。 我還需要綁定加載的百分比。 我已經完成了百分比綁定。 但無法將百分比嵌入css圈中。 誰能幫幫我嗎。

到目前為止，這是我的工作。

這是我的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;
  }
}

為了進一步澄清，我附上一張我需要的圖片。 在此處輸入圖片說明

1 個解決方案

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

我認為唯一的辦法是（很長的代碼很抱歉） 

  <!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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在 HTML,CSS3 中添加預加載器 GIF/MP4 具有可變百分比的CSS3餅圖 javascript預加載器/進度/百分比 在Android上強制糾正CSS3轉換百分比解釋 Edge Animate自定義百分比預加載器 在Javascript中創建PDF預加載器 預加載器 javascript + css + html 使用預加載器延遲 css 動畫？ 創建一個單詞而不是數字的百分比預加載器？ 使用HTML5，CSS3，Javascript創建交互式地圖
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM