css checkmark loader

by Bryson Murray

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h1>Circle loader with checkmark completed state <small>CSS Animation</small></h1>

<div class="circle-loader">
  <div class="checkmark draw"></div>
  <div class="crossmark draw"></div>
</div>

<p><button id="toggle_success" type="button" class="btn btn-success">Toggle Success</button></p>
<p><button id="toggle_failure" type="button" class="btn btn-failure">Toggle Failure</button></p>

CSS

/* This is just styling for this demo */
body {
  padding: 5em;
  text-align: center;
}

h1 {
  margin-bottom: 1em;
}

/* Define vars we'll be using 
$brand-success: #5cb85c;
$loader-size: 7em;
$check-height: $loader-size/2;
$check-width: $check-height/2;
$check-left: ($loader-size/6 + $loader-size/12);
$check-thickness: 3px;
$check-color: $brand-success;*/

:root{
	--brand-success: #5cb85c;
  --brand-failure: #E00F1F;
  --thickness: 20px;
	--loader-size: 100px;
  
	--check-height: calc(var(--loader-size)/2);
	--check-width: calc(var(--check-height)/2);
	--check-left: calc(var(--loader-size)/6 + var(--loader-size)/12);
	--check-thickness: var(--thickness);
	--check-color: var(--brand-success);
  
  --cross-height: calc((var(--loader-size)/2));
  /*+ var(--thickness)*2)/2); */
  /* + var(--thickness))/2) */; 
  /* + var(--thickness)/2);*/
  --cross-width: var(--cross-height);
  /* --cross-left: calc(var(--cross-height)/2 - var(--thickness));
  --cross-right: calc(var(--cross-width)/2 - var(--thickness)); */
  /* --cross-possition: calc((var(--cross-height) - var(--thickness))/2); */
/*   --cross-possition: calc(var(--cross-height)/2 - var(--thickness)/2); */
/*   --cross-possition: calc(var(--cross-height)/2); */
  --cross-possition: calc(var(--loader-size)/4 + var(--thickness)/4);
  --cross-thickness: var(--thickness);
  --cross-color: var(--brand-failure);  
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: var(--check-width);
    opacity: 1;
  }
  40% {
    height: var(--check-height);
    width: var(--check-width);
    opacity: 1;
  }
  100% {
    height: var(--check-height);
    width: var(--check-width);
    opacity: 1;
  }
}

@keyframes crossmark-after {
  0% {
    top:var(--cross-possition);
    left: calc(var(--cross-possition));
    height: 0;
    width: 0;
    width: 10;
   ...

JavaScript

$('#toggle_success').click(function() {
  $('.circle-loader').toggleClass('load-complete');
  $('.checkmark').toggle();
});

$('#toggle_failure').click(function() {
  $('.circle-loader').toggleClass('load-complete');
  $('.crossmark').toggle();
});