Fill-'er-Up Loading Animation.markdown

Fill-'er-Up Loading Animation

This is a 100% CSS animated loading screen that takes up the entire viewport and looks really nifty.

Lots of magic numbers, but I am confident this can be just put wholesale into a project.

A Pen by Daniel "Orangestar" O'Day on CodePen.

License.

index.html

<button>Do a thing</button>
<div id="loading"><span>Hold up...</span></div>
<div id="toast"><span class="big">Nice.</span> <span class="info">You did a thing.</span> <a>Undo it here.</a></div>

script.js

/* This is all just to start and stop the animation. Technically, the animation itself only uses CSS. */

document.querySelector("button").addEventListener("click", function(){activateLoadAnim(false)}, false);

document.querySelector("a").addEventListener("click", function(){activateLoadAnim(true)}, false);

function activateLoadAnim(undo){ document.querySelector("#loading").classList.remove("animate");
  document.querySelector("button").blur();
  document.querySelector("#loading").classList.add("animate"); document.querySelector("#toast").classList.remove("popped");
  setTimeout(stopAnim, 5000);
  if(undo){
    document.querySelector("#toast .big").innerText = 'Alright.';
    document.querySelector("#toast .info").innerText = 'We undid that thing.';
    document.querySelector("#toast a").style.display = "none";
  }
  else{
    document.querySelector("#toast .big").innerText = 'Nice.';
    document.querySelector("#toast .info").innerText = 'You did a thing.';
    document.querySelector("#toast a").style.display = "inline";
  }
}

function stopAnim(){
  document.querySelector("#loading").classList.remove("animate");
  document.querySelector("#toast").classList.add("popped");
  setTimeout(cleanup, 6000);
}

function cleanup(){
   document.querySelector("#toast").classList.remove("popped");
}

style.css

/* If you're copying this pen for your project, these are the keyframes you're interested in! You'll have to prefix it yourself. */
@keyframes grow-up {
  0% {
    transform: translate(0, 100%);
  }
  33% {
    transform: translate(0, 0);
  }
  67% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0, -100%);
  }
}

@keyframes toast-popup {
  0% {
    transform: translate(0, 100%);
  }
  10% {
    transform: translate(0, 0);
  }
  90% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 100%);
  }
}

/* global */
body {
  font-family: sans-serif;
}

/* modifiers */

.big {
  font-weight: 900;
  font-size: 20px;
}

a {
  color: orange;
  font-weight: bold;
  cursor: pointer;
}

/* toast styles */
#toast {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  background: #22222F;
  color: white;
  font-size: 16px;
  transform: translate(0, 100%);
  z-index: 999
}

#toast.popped {
  animation: toast-popup 6s;
}

/* button styles */
button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #F88;
  border: none;
  color: white;
  font-size: 7vw;
  text-transform: uppercase;
  padding: 5px;
  box-shadow: 0 10px 0 0 #FBB;
  font-weight: bold;
  transition: all 0.15s;
}

button:hover {
  transform: translate(-50%, -55%);
  box-shadow: 0 13px 0 0 #FBB;
}

button:active {
  transform: translate(-50%, -35%);
  box-shadow: 0 0 0 0 #FBB;
}

button:focus {
  outline: none;
  background: #F44;
}

/* loading div styles. If you're copying this pen for your project, these are the styles you should be interested in!

WARNING: Note it's not prefixed! You might want to check the compiled version! */

#loading span {
  position: absolute;
  z-index: 99;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 7vw;
}

#loading {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #F44;
  z-index: 10;
  transform: translate(0, 100%);
  transition: transform 1s;
  overflow: hidden;
}

#loading::before {
  content: '';
  position: absolute;
  left: 0%;
  right: 0;
  top: 0;
  bottom: 0;
  background: #FF4;
  z-index: 20;
  transform: translate(0, 100%);
  animation: grow-up 4s infinite;
}

#loading::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0%;
  top: 0;
  bottom: 0;
  background: #44F;
  z-index: 30;
  transform: translate(0, 100%);
  animation: grow-up 4s infinite;
  animation-delay: 1.25s;
}

#loading.animate {
  transform: translate(0, 0);
}