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/swin

Answer 1

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

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

Answer 2

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

Answer 3

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

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 6

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