HTML


<div id="state"></div>
<div id="progress">…</div>
<div id="progressbar">
  <div class="progress-circle"></div>
</div>

<!--

<svg class="progress-radial" width="100px" height="100px" viewBox="0 0 100 100" shape-rendering="geometricPrecision">
  <defs>
    <mask id="circle_mask" x="0" y="0" width="100" height="100" maskUnits="userSpaceOnUse">
      <circle cx="50" cy="50" r="51" stroke-width="0" fill="black" opacity="1"/>
      
      <circle cx="50" cy="50" r="50" stroke-width="0" fill="white" opacity="1"/>
      
      <circle class="progress-radial-mask-inner" cx="50" cy="50" r="40" stroke-width="0" fill="black" opacity="1"/>
    </mask>
  </defs>
  <g mask="url(#circle_mask)">
    <circle class="progress-radial-track" cx="50" cy="50" r="50" stroke-width="0" opacity="1"/>
    <path class="progress-radial-bar" transform="translate(50, 50)" 
          d="M 0 0">
    </path>
  </g>
</svg> -->

<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>



CSS


html,
body {
  height: 100%;
  margin: 0;
  background-color: #1e1e1e;
  color: white;
}

#state {
  color: #c8c8c8;
  font-family: Monaco;
  font-size: 12px;
  line-height: 1em;
  padding: 20px;
  text-align: center;
}

#progress {
  font-size: 2rem;
  left: 50%;
  letter-spacing: 0.1em;
  margin: -25px 0 0 -100px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 200px;
}

/*
#progressbar {
  left: 0%;
  position: absolute;
  top: 50%;
  right: 0%;
}

/*
#progressbar .bar {
  -moz-box-shadow: cyan 0 0 10px 1px;
  -webkit-box-shadow: cyan 0 0 10px 1px;
  box-shadow: cyan 0 0 10px 1px;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  background-color: cyan;
  height: 1px;
  display: inline-block;
  width: 0%;
}*/

#progressbar .bar.complete {
  -moz-box-shadow: rgba(255, 0, 0, 0) 0 0 10px 10px;
  -webkit-box-shadow: rgba(255, 0, 0, 0) 0 0 10px 10px;
  box-shadow: rgba(255, 0, 0, 0) 0 0 10px 10px;
}

/* Circle */
.progress-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 0.5em solid #78909c;
  border-radius: 50%;
  box-shadow: inset 0 1px 5px rgba(255, 255, 255, 0.5), 0 1px 5px rgba(255, 255, 255, 0.5);
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.progress-circle:before,
.progress-circle:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: -0.5em;
  border: 0.5em solid #b0bec5;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: inherit;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
/*
-webkit-animation: progress 5.5s infinite ease-out;*/

animation: progress 5s ease-out;
}

.progress-circle:after {
  z-index: 1;
  -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
          transform: rotate(225deg);
  -webkit-animation: none;
          animation: none;
}

@-webkit-keyframes progress {
  0% {
    z-index: 0;
    border-top-color: #b0bec5;
    border-right-color: #b0bec5;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  38% {
    border-top-color: #b0bec5;
    border-right-color: #b0bec5;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
  39% {
    border-top-color: #78909c;
    border-right-color: #78909c;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
  40% {
    z-index: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  41% {
    z-index: 3;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  79% {
    border-top-color: #78909c;
    border-right-color: #78909c;
    border-bottom-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(224deg);
            transform: rotate(224deg);
  }
  80% {
    border-color: #78909c;
  }
  90%, 100% {
    z-index: 3;
    border-color: #b0bec5;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
}

@keyframes progress {
  0% {
    z-index: 0;
    border-top-color: #b0bec5;
    border-right-color: #b0bec5;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  38% {
    border-top-color: #b0bec5;
    border-right-color: #b0bec5;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
  39% {
    border-top-color: #78909c;
    border-right-color: #78909c;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
  40% {
    z-index: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  41% {
    z-index: 3;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  79% {
    border-top-color: #78909c;
    border-right-color: #78909c;
    border-bottom-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(224deg);
            transform: rotate(224deg);
  }
  80% {
    border-color: #78909c;
  }
  90%, 100% {
    z-index: 3;
    border-color: #b0bec5;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
}


/* SVG */
.progress-radial {
  position: relative;
  display: block;
  margin-left: 50%;
  transform: translate(-50%, 50%);
}

.progress-radial-track {
  fill: #247fd8;
}

.progress-radial-bar {
  fill: white;
}



JS


(function() {

var Probbar = $('.progress-circle');
  
var show = document.getElementsByClassName("home")[0];
var name = document.querySelector("body" , ":before");

var queue        = new createjs.LoadQueue(),
    $state       = $('#state'),
    $progress    = $('#progress'),
    $progressbar = $('.progress-circle');
    //$progressbar = $('.progress-radial');


queue.on('complete',     onComplete);
queue.on('error',        onError);
queue.on('fileload',     onFileLoad);
queue.on('fileprogress', onFileProgress);
queue.on('progress',     onProgress);


queue.loadManifest([
  {
    id:   '1',
    src:  'http://webbeloz.it/assets/playlist-vinyl.jpg'
  },
  {
    id: '2',
    src: 'http://webbeloz.it/assets/fly-fishing-it.jpg'
  }
  
]);



function onComplete(event) {
  console.log('Complete', event);
  //$state.text( $state.text() + '[All loaded]' );
  //$progressbar.addClass('complete');
  $progressbar.fadeOut(),
  $progress.fadeOut();
  name.style.backgroundImage = "url('http://webbeloz.it/assets/fly-fishing-it.jpg')";
  name.style.backgroundRepeat = "no-repeat";
  name.style.backgroundSize = "100% 100%";
}

function onError(event) {
  console.log('Error', event);
  $state.text( $state.text() + '[' + event.item.id + ' errored] ');
}

function onFileLoad(event) {
  //console.log('File loaded', event);
  //$state.text( $state.text() + '[' + event.item.id + ' loaded] ');
}

function onFileProgress(event) {
  console.log('File progress', event);
}

function onProgress(event) {
  var progress = Math.round(event.loaded * 100);

  
  console.log('General progress', Math.round(event.loaded) * 100, event);
  $progress.text(progress + '%');

  //$progressbar.css({
  //  'progress' : progress + '%'
  //});
  $progressbar.progress + '%';
}
  
  
/* svg
var clamp = function (n, min, max) {
  return Math.max(min, Math.min(max, n));
};

var drawProgress = function(percent){

  if(isNaN(percent)) {
    return;
  }

  percent = clamp(parseFloat(percent), 0, 1);

  // 360 loops back to 0, so keep it within 0 to < 360
  var angle = clamp(percent * 360, 0, 359.99999);
  var paddedRadius = 50 + 1;
  var radians = (angle * Math.PI / 180);
  var x = Math.sin(radians) * paddedRadius;
  var y = Math.cos(radians) * - paddedRadius;
  var mid = (angle > 180) ? 1 : 0;
  var pathData = 'M 0 0 v -%@ A %@ %@ 1 '.replace(/%@/gi, paddedRadius)
      + mid + ' 1 '
      + x + ' '
      + y + ' z';

  var bar = document.getElementsByClassName ('progress-radial-bar')[0]; 
  bar.setAttribute( 'd', pathData );
};

var max = 1;
    //img.completedPercentage; //0.9;
  
var progress = 0.0;

drawProgress(progress);

var interval = window.setInterval(function () {
  progress = progress + 0.01;
  if(progress >= max) {
    window.clearInterval(interval);
  }
  drawProgress(progress) + '%';
}, 30);

// svg */

})();




CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now