Loader example

by brunomuller

HTML

<div class="icon-circle">
  <div class="icon-check"></div>
</div>

SCSS

$primary-color: #7D00FF;
$success-color: #00AA46;

$white: #FFFFFF;

$icon-size: 68px;
$border-width: 7px;
$check-height: $icon-size/2;
$check-width: $check-height/2;
$check-left: ($icon-size/12 + $icon-size/12);

.icon-circle {
  animation-duration: 600ms;
  animation-timing-function: ease;
  animation-name: circle;
  border: $border-width solid $success-color;
  position: relative;
  display: inline-block;
  border-radius: 50%;
  width: $icon-size;
  height: $icon-size;
}

.icon-check:after {
    opacity: 0;
    animation-duration: 800ms;
    animation-delay: 600ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-name: checkmark;
    transform: scaleX(-1) rotate(135deg);
    height: $check-height;
    width: $check-width;
    transform-origin: left top;
    border-right: $border-width solid $success-color;
    border-top: $border-width solid $success-color;
    content: '';
    left: $check-left;
    top: $check-height;
    position: absolute;
  }

@keyframes circle {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }

  20% {
    height: 0;
    width: $check-width;
    opacity: 1;
  }

  40% {
    height: $check-height;
    width: $check-width;
    opacity: 1;
  }

  100% {
    height: $check-height;
    width: $check-width;
    opacity: 1;
  }
}