LoadingAnimation

SketchSystems.spec

LoadingAnimation
  Loading
    next -> AlmostDone
  AlmostDone
    next -> Finished
  Finished
    next -> App
App

SketchSystems_prototype.js

function add_styles(css_str){
  const StyleID = 'my_stylez';
  let $s = document.querySelector('#' + StyleID);

  if(null === $s){
    $s = document.createElement('style');
    $s.id = StyleID
    document.head.appendChild($s)
  }

  $s.innerText = css_str;
}


//Define CSS animations
add_styles(`

.ball {
  margin: 100px auto;
  width: 20px;
  height: 20px;

  animation-name: spinning;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

[data-state='Loading'] {
  background-color: red;
  animation-duration: 4s;
}

[data-state='AlmostDone'] {
  background-color: orange;
  animation-duration: 1s;
}

[data-state='Finished'] {
  background-color: gray;
  width: 200px;
  height: 200px;
  transition: all 1s;
  animation-duration: 1s;
  animation-iteration-count: 2;
}

[data-state='App'] {
  margin: 0 auto;
  width: 80%;
  height: 80%;
  background-color: lightGray;
  border: 5px solid black;
  transition: all 500ms;
}

@keyframes spinning {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

`);


function render(model){ 
  const name = model.active_states[0].name;
  return $('div', {className: 'ball', 'data-state': name});
}