loading/success

index.html

<style>
  @media screen and (max-width: 600px) {
    div.loader {
      max-height: 70%;
      width: 90%;
      transition: width 333ms ease-in-out, height 333ms ease-in-out, color 125ms ease-in-out, font-size 500ms cubic-bezier(0, 1.58, 0.18, 1) 125ms, border-radius 125ms ease-in-out;
      background: rgba(0, 0, 0, 0.5);
      background: white;
    }

    .loader__result--is-complete {
      font-size: 1rem;
      width: 141vmax;
      height: 141vmax;
      color: white;
    }
  }
</style>

<div class="loader">
  <div class="loader__decoration loader__decoration--a"></div>
  <div class="loader__decoration loader__decoration--b"></div>
  <div class="loader__decoration loader__decoration--c"></div>
  <div class="loader__result">
    <div class="loader__icon">
      <i class="fa fa-fw fa-check"></i>
    </div>
    <div class="loader__message">
      success!
    </div>
  </div>
</div>

<script>
  document.querySelector(".loader").addEventListener("click", e => {
    e.currentTarget.
    querySelector(".loader__result").
    classList.toggle("loader__result--is-complete");
  });
  // document.defaultView.getComputedStyle(document.querySelector("div.loader")).width
</script>

loading-success.markdown

loading/success

A Pen by jadibrahim on CodePen.

License.

style.css

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Lato:300,400");

:root {
  background-image: radial-gradient(ellipse farthest-corner,
      transparent,
      #1a1a1a),
    repeating-linear-gradient(-30deg,
      transparent 0,
      transparent 1.25rem,
      rgba(0, 0, 0, 0.1) 1.25rem,
      rgba(0, 0, 0, 0.1) 1.5rem),
    repeating-linear-gradient(30deg,
      transparent 0,
      transparent 1.25rem,
      rgba(0, 0, 0, 0.1) 1.25rem,
      rgba(0, 0, 0, 0.1) 1.5rem);
  min-height: 100vh;
}

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 90vh;
  min-height: 80%;
  background-color: white;
  border-radius: 0.5rem;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  overflow: hidden;
  font: normal normal 14pt/1.5 Lato, sans-serif;
}

.loader__result {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  overflow: hidden;
  color: transparent;
  background-color: #37c0c9;
  border-radius: 50%;
  transition: width 333ms ease-in, height 333ms ease-in, color 125ms ease-in,
    font-size 500ms cubic-bezier(0, 1.58, 0.18, 1) 125ms,
    border-radius 125ms ease-in;
  font-size: 0;
  text-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
}

.loader__result--is-complete {
  font-size: 1rem;
  width: 141vmin;
  height: 141vmin;
  color: white;
}

.loader__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3em;
  transform: translatey(-25%) translate(-50%, -50%);
}

.loader__message {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  font-size: 1.5em;
  text-align: center;
  transform: translatey(1rem);
}

.loader__decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
}

.loader__decoration--a {
  background-color: rgba(60, 175, 218, 0.15);
  -webkit-animation: uwval3n 1s infinite ease-in-out;
  animation: uwval3n 1s infinite ease-in-out;
  -webkit-animation-delay: -0.25s;
  animation-delay: -0.25s;
}

@-webkit-keyframes uwval3n {

  from,
  to {
    transform: translate(-50%, -50%) scale(2.5);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes uwval3n {

  from,
  to {
    transform: translate(-50%, -50%) scale(2.5);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.loader__decoration--b {
  background-color: rgba(60, 175, 218, 0.15);
  -webkit-animation: uwval4i 1s infinite ease-in-out;
  animation: uwval4i 1s infinite ease-in-out;
  -webkit-animation-delay: -0.333s;
  animation-delay: -0.333s;
}

@-webkit-keyframes uwval4i {

  from,
  to {
    transform: translate(-50%, -50%) scale(1.75);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.25);
  }
}

@keyframes uwval4i {

  from,
  to {
    transform: translate(-50%, -50%) scale(1.75);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.25);
  }
}

.loader__decoration--c {
  background-color: #3cafda;
  -webkit-animation: uwval4q 1s infinite ease-in-out;
  animation: uwval4q 1s infinite ease-in-out;
}

@-webkit-keyframes uwval4q {

  from,
  to {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(0.75);
  }
}

@keyframes uwval4q {

  from,
  to {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(0.75);
  }
}

/*
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
$palette-affirmative: #37c0c9;
$palette-danger: #de3b4c;
$palette-primary: #3cafda;
$palette-warning: #f4bc26;
@import url("https://fonts.googleapis.com/css?family=Lato:300,400");

:root {
  background-image: radial-gradient(
      ellipse farthest-corner,
      transparent,
      mix(white, black, 10%)
    ),
    repeating-linear-gradient(
      -30deg,
      transparent 0,
      transparent 1.25rem,
      rgba(black, 0.1) 1.25rem,
      rgba(black, 0.1) 1.5rem
    ),
    repeating-linear-gradient(
      30deg,
      transparent 0,
      transparent 1.25rem,
      rgba(black, 0.1) 1.25rem,
      rgba(black, 0.1) 1.5rem
    );

  min-height: 100vh;
}

.loader {
  position: fixed;

  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 90vh;
  min-height: 80%;
  background-color: white;
  border-radius: 0.5rem;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.5rem 1rem rgba(black, 0.5);
  overflow: hidden;
  font: normal normal 14pt / 1.5 Lato, sans-serif;

  &__result {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    overflow: hidden;
    color: transparent;
    background-color: $palette-affirmative;
    border-radius: 50%;
    transition: width 333ms ease-in, height 333ms ease-in, color 125ms ease-in,
      font-size 500ms cubic-bezier(0, 1.58, 0.18, 1) 125ms,
      border-radius 125ms ease-in;
    font-size: 0;
    text-shadow: 0 0.125em 0.25em rgba(black, 0.5);
    transform: translate(-50%, -50%);

    &--is-complete {
      font-size: 1rem;
      width: 141vmin;
      height: 141vmin;
      color: white;
    }
  }

  &__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 3em;
    transform: translatey(-25%) translate(-50%, -50%);
  }

  &__message {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-size: 1.5em;
    text-align: center;
    transform: translatey(1rem);
  }
}

.loader__decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;

  &--a {
    background-color: rgba($palette-primary, 0.15);
    $animation: unique-id();
    animation: $animation 1s infinite ease-in-out;
    animation-delay: -0.25s;
    @keyframes #{$animation} {
      from,
      to {
        transform: translate(-50%, -50%) scale(2.5);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.5);
      }
    }
  }
  &--b {
    background-color: rgba($palette-primary, 0.15);
    $animation: unique-id();
    animation: $animation 1s infinite ease-in-out;
    animation-delay: -0.333s;
    @keyframes #{$animation} {
      from,
      to {
        transform: translate(-50%, -50%) scale(1.75);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.25);
      }
    }
  }
  &--c {
    background-color: $palette-primary;
    $animation: unique-id();
    animation: $animation 1s infinite ease-in-out;
    @keyframes #{$animation} {
      from,
      to {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(0.75);
      }
    }
  }
}
*/