Windows 8 preloader (loading icon) using HTML5 and

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

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 2

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.

Answer 3

not sure about javascript, but you can download it from http://preloaders.net/en/search/windows8

Answer 4

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 5

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 6

I'm not sure, but maybe that's what you want:

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