Creating Preloader With Percentage In Css3
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 percent
Solution 1:
I think the only way is that (sorry for long code)
<!DOCTYPE HTML><html><head><metahttp-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%00100% / 50%0050%;
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: 0100%100%0 / 050%50%0;
left: 50%;
opacity: 0;
z-index: 100;
animation: opa 5ssteps(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 5ssteps(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 5ssteps(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><divclass="wrapper"><divclass="pie spinner"></div><divclass="pie filler"></div><divclass="mask"></div><divclass="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>
Post a Comment for "Creating Preloader With Percentage In Css3"