使用 HTML5 和 javascript 的 Windows 8 预加载器（加载图标），不带图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10365138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Windows 8 preloader (loading icon) using HTML5 and javascript without images
提问by manishekhawat
I noticed a simple thing while looking at the screen of Windows 8 loading screen, there is a preloader (or loading icon) which is quite interesting, it has a bit of gravity/swing effect. I wanted to replicate the same using javascript and css but I don't have much understanding of javascript animations, thus wanted to know if you can give me a direction to head, where I can find similar kind of example. You could also help by providing a snippet of code which has similar kind of animation.
我在查看 Windows 8 加载屏幕的屏幕时注意到一个简单的事情，有一个预加载器（或加载图标）很有趣，它有一点重力/摆动效果。我想使用 javascript 和 css 复制相同的内容，但我对 javascript 动画不太了解，因此想知道您是否可以给我一个方向，在那里我可以找到类似的示例。您还可以通过提供具有类似动画的代码片段来提供帮助。
Any help would be appreciated.
任何帮助，将不胜感激。
回答by Vuka?in Manojlovi?
Check website CSSload. Here you can make your CSS loader in few seconds. I've made Windows 8 loader, so you can see it here.
检查网站CSSload。在这里你可以在几秒钟内制作你的 CSS 加载器。我已经制作了 Windows 8 加载程序，所以你可以在这里看到它。
@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}
30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}
76% {
opacity: 0;
transform:rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
Alternatively, try this code example...
或者，试试这个代码示例......
回答by TaeKwonJoe
Here is my pure CSS3 implementation with no Javascript in which I combined CSSloadand Jan Rubio's codepentechniques for minimal markup and no id selectors:
这是我没有 Javascript 的纯 CSS3 实现，其中我结合了CSSload和Jan Rubio 的 codepen技术，以实现最少的标记和无 id 选择器：
HTML:
HTML：
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
CSS:
CSS：
.loader { position: relative; width: 64px; height: 64px; }
.loader .circle { position: absolute; width: 61px; height: 61px; opacity: 0; -moz-transform: rotate(225deg); -moz-animation: orbit 7.15s infinite; -webkit-transform: rotate(225deg); -webkit-animation: orbit 7.15s infinite; -ms-transform: rotate(225deg); -ms-animation: orbit 7.15s infinite; -o-transform: rotate(225deg); -o-animation: orbit 7.15s infinite; transform: rotate(225deg); animation: orbit 7.15s infinite; }
.loader .circle:after { content:''; position: absolute; width: 8px; height: 8px; background: #04C5DE; left: 0px; top: 0px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }
.loader .circle:nth-child(1) { -moz-animation-delay: 1.56s; -webkit-animation-delay: 1.56s; -ms-animation-delay: 1.56s; -o-animation-delay: 1.56s; animation-delay: 1.56s; }
.loader .circle:nth-child(2) { -moz-animation-delay: 0.31s; -webkit-animation-delay: 0.31s; -ms-animation-delay: 0.31s; -o-animation-delay: 0.31s; animation-delay: 0.31s; }
.loader .circle:nth-child(3) { -moz-animation-delay: 0.62s; -webkit-animation-delay: 0.62s; -ms-animation-delay: 0.62s; -o-animation-delay: 0.62s; animation-delay: 0.62s; }
.loader .circle:nth-child(4) { -moz-animation-delay: 0.94s; -webkit-animation-delay: 0.94s; -ms-animation-delay: 0.94s; -o-animation-delay: 0.94s; animation-delay: 0.94s; }
.loader .circle:nth-child(5) { -moz-animation-delay: 1.25s; -webkit-animation-delay: 1.25s; -ms-animation-delay: 1.25s; -o-animation-delay: 1.25s; animation-delay: 1.25s; }
@-moz-keyframes orbit {
0% { opacity: 1; z-index: 99; -moz-transform: rotate(180deg); -moz-animation-timing-function: ease-out; }
7% { opacity: 1; -moz-transform: rotate(300deg); -moz-animation-timing-function: linear; -moz-origin: 0%; }
30% { opacity: 1; -moz-transform: rotate(410deg); -moz-animation-timing-function: ease-in-out; -moz-origin: 7%; }
39% { opacity: 1; -moz-transform: rotate(645deg); -moz-animation-timing-function: linear; -moz-origin: 30%; }
70% { opacity: 1; -moz-transform: rotate(770deg); -moz-animation-timing-function: ease-out; -moz-origin: 39%; }
75% { opacity: 1; -moz-transform: rotate(900deg); -moz-animation-timing-function: ease-out; -moz-origin: 70%; }
76% { opacity: 0; -moz-transform: rotate(900deg); }
100% { opacity: 0; -moz-transform: rotate(900deg); }
}
@-webkit-keyframes orbit {
0% { opacity: 1; z-index: 99; -webkit-transform: rotate(180deg); -webkit-animation-timing-function: ease-out; }
7% { opacity: 1; -webkit-transform: rotate(300deg); -webkit-animation-timing-function: linear; -webkit-origin: 0%; }
30% { opacity: 1; -webkit-transform: rotate(410deg); -webkit-animation-timing-function: ease-in-out; -webkit-origin: 7%; }
39% { opacity: 1; -webkit-transform: rotate(645deg); -webkit-animation-timing-function: linear; -webkit-origin: 30%; }
70% { opacity: 1; -webkit-transform: rotate(770deg); -webkit-animation-timing-function: ease-out; -webkit-origin: 39%; }
75% { opacity: 1; -webkit-transform: rotate(900deg); -webkit-animation-timing-function: ease-out; -webkit-origin: 70%; }
76% { opacity: 0; -webkit-transform: rotate(900deg); }
100% { opacity: 0; -webkit-transform: rotate(900deg); }
}
@-ms-keyframes orbit {
0% { opacity: 1; z-index: 99; -ms-transform: rotate(180deg); -ms-animation-timing-function: ease-out; }
7% { opacity: 1; -ms-transform: rotate(300deg); -ms-animation-timing-function: linear; -ms-origin: 0%; }
30% { opacity: 1; -ms-transform: rotate(410deg); -ms-animation-timing-function: ease-in-out; -ms-origin: 7%; }
39% { opacity: 1; -ms-transform: rotate(645deg); -ms-animation-timing-function: linear; -ms-origin: 30%; }
70% { opacity: 1; -ms-transform: rotate(770deg); -ms-animation-timing-function: ease-out; -ms-origin: 39%; }
75% { opacity: 1; -ms-transform: rotate(900deg); -ms-animation-timing-function: ease-out; -ms-origin: 70%; }
76% { opacity: 0; -ms-transform: rotate(900deg); }
100% { opacity: 0; -ms-transform: rotate(900deg); }
}
@-o-keyframes orbit {
0% { opacity: 1; z-index: 99; -o-transform: rotate(180deg); -o-animation-timing-function: ease-out; }
7% { opacity: 1; -o-transform: rotate(300deg); -o-animation-timing-function: linear; -o-origin: 0%; }
30% { opacity: 1; -o-transform: rotate(410deg); -o-animation-timing-function: ease-in-out; -o-origin: 7%; }
39% { opacity: 1; -o-transform: rotate(645deg); -o-animation-timing-function: linear; -o-origin: 30%; }
70% { opacity: 1; -o-transform: rotate(770deg); -o-animation-timing-function: ease-out; -o-origin: 39%; }
75% { opacity: 1; -o-transform: rotate(900deg); -o-animation-timing-function: ease-out; -o-origin: 70%; }
76% { opacity: 0; -o-transform: rotate(900deg); }
100% { opacity: 0; -o-transform: rotate(900deg); }
}
@keyframes orbit {
0% { opacity: 1; z-index: 99; transform: rotate(180deg); animation-timing-function: ease-out; }
7% { opacity: 1; transform: rotate(300deg); animation-timing-function: linear; origin: 0%; }
30% { opacity: 1; transform: rotate(410deg); animation-timing-function: ease-in-out; origin: 7%; }
39% { opacity: 1; transform: rotate(645deg); animation-timing-function: linear; origin: 30%; }
70% { opacity: 1; transform: rotate(770deg); animation-timing-function: ease-out; origin: 39%; }
75% { opacity: 1; transform: rotate(900deg); animation-timing-function: ease-out; origin: 70%; }
76% { opacity: 0; transform: rotate(900deg); }
100% { opacity: 0; transform: rotate(900deg); }
}
回答by Fujion
I'm not sure, but maybe that's what you want:
我不确定，但也许这就是你想要的：
<progress style="color: white;" class="win-medium win-ring"></progress>
回答by Alexander Chudesnov
Here is another take on the Modern UI ProgressRing animation in CSS3. It is based on the already mentioned Jan Rubio's solutionwith some tweaks (still needs tweaking, though).
这是 CSS3 中现代 UI ProgressRing 动画的另一种看法。它基于已经提到的 Jan Rubio 的解决方案，并进行了一些调整（尽管仍然需要调整）。
Watch the live exampleor use the following code if the codepen is unavailable:
如果 codepen 不可用，请观看实时示例或使用以下代码：
HTML
HTML
<div class='progress-ring'>
<div class='progress-ring__wrap'>
<div class='progress-ring__circle'></div>
</div>
<div class='progress-ring__wrap'>
<div class='progress-ring__circle'></div>
</div>
<div class='progress-ring__wrap'>
<div class='progress-ring__circle'></div>
</div>
<div class='progress-ring__wrap'>
<div class='progress-ring__circle'></div>
</div>
<div class='progress-ring__wrap'>
<div class='progress-ring__circle'></div>
</div>
</div>
CSS (LESS, unprefixed)
CSS（LESS，无前缀）
body {background:#111}
@t:4000ms;
@d:40px;
@color:#ffffff;
.progress-ring {
position: relative;
padding-top: @d/5;
width: @d;
height: @d;
margin: auto;
.progress-ring__wrap {
position: absolute;
width: @d - 2;
height: @d - 2;
.progress-ring__circle {
transform: rotate(225deg);
animation-iteration-count: infinite;
animation-name: orbit;
animation-duration: @t;
width: @d - 2;
height: @d - 2;
opacity: 0;
&:after {
content: '';
position: absolute;
width: @d/8;
height: @d/8;
border-radius: @d/8;
box-shadow: 0px 0px 5% @color;
background: @color; /* Pick a color */
}
}
@r:-14deg;
@m:30;
&:nth-child(2) {
transform:rotate(@r);
.progress-ring__circle { animation-delay: @t/@m; }
}
&:nth-child(3) {
transform:rotate(@r*2);
.progress-ring__circle { animation-delay: @t/@m*2; }
}
&:nth-child(4) {
transform:rotate(@r*3);
.progress-ring__circle { animation-delay: @t/@m*3; }
}
&:nth-child(5) {
transform:rotate(@r*4);
.progress-ring__circle { animation-delay: @t/@m*4; }
}
}
}
@keyframes orbit {
0% { transform:rotate(225deg); opacity: 1;
animation-timing-function: ease-out; }
7% { transform:rotate(345deg);
animation-timing-function: linear; }
35% { transform:rotate(495deg);
animation-timing-function: ease-in-out; }
42% { transform:rotate(690deg);
animation-timing-function: linear; }
70% { transform:rotate(835deg); opacity: 1;
animation-timing-function: linear; }
76% {opacity: 1;}
77% { transform:rotate(955deg);
animation-timing-function: ease-in; }
78% { transform:rotate(955deg); opacity: 0; }
100% { transform:rotate(955deg); opacity: 0; }
}
回答by Timur Gafforov
not sure about javascript, but you can download it from http://preloaders.net/en/search/windows8
不确定 javascript，但您可以从http://preloaders.net/en/search/windows8下载
回答by Pablo
I discovered you could find a similar script on C:\Windows\WinStore\WinStore.cssand WinStore.htm, Just open Winstore.htmand you will discover a similar ring loading animation, provided by IE10, if only someone could dump the animation info from Windows Shell... If you see with Notepad the WinStore.cssyou will see something like this:
我发现你可以在C:\Windows\WinStore\WinStore.css和上找到一个类似的脚本WinStore.htm，只要打开Winstore.htm你就会发现一个类似的环形加载动画，由 提供IE10，如果有人可以从 Windows Shell 转储动画信息......如果你用记事本WinStore.css看到你会看到一些东西像这样：
splashProgress::-ms-fill
{
animation-name: **-ms-ring**;
}
Is that variable an animation info stored somewhere in the Windows Shell???
该变量是存储在 Windows Shell 中某处的动画信息吗？？？
I tested loading the HTML page in Chrome and Firefox, nothing, just a normal loading bar.
我在 Chrome 和 Firefox 中测试了加载 HTML 页面，什么都没有，只是一个普通的加载栏。
Sorry for my bad english. I'm from Argentina.
对不起，我的英语不好。我来自阿根廷。
