Windows 8 preloader (loading icon) using HTML5 and javascript without images

Question

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.

Any help would be appreciated.

Answer 1

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 .

@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 ...

Answer 2

Here is my pure CSS3 implementation with no Javascript in which I combined CSSload and Jan Rubio's codepen techniques for minimal markup and no id selectors:

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:

.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); }
}

Answer 3

我不确定，但也许这就是你想要的：

<progress style="color: white;" class="win-medium win-ring"></progress>

Answer 4

Here is another take on the Modern UI ProgressRing animation in CSS3. It is based on the already mentioned Jan Rubio's solution with some tweaks (still needs tweaking, though).

Watch the live example or use the following code if the codepen is unavailable:

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)

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; } 
}

Answer 5

不确定javascript，但你可以从http://preloaders.net/en/search/windows8下载它

Answer 6

I discovered you could find a similar script on C:\\Windows\\WinStore\\WinStore.css and WinStore.htm , Just open Winstore.htm and 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.css you will see something like this:

splashProgress::-ms-fill
{
    animation-name: **-ms-ring**;
}

Is that variable an animation info stored somewhere in the Windows Shell???

I tested loading the HTML page in Chrome and Firefox, nothing, just a normal loading bar.

Sorry for my bad english. I'm from Argentina.