<span class="close-icon">
				  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" enable-background="new 0 0 40 40">
					    <line x1="15" y1="15" x2="25" y2="25" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10"></line>
					    <line x1="25" y1="15" x2="15" y2="25" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10"></line>
					    <circle class="circle" cx="20" cy="20" r="19" opacity="0" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" fill="none"></circle>
					    <path d="M20 1c10.45 0 19 8.55 19 19s-8.55 19-19 19-19-8.55-19-19 8.55-19 19-19z" class="progress" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" fill="none"></path>
  				</svg>
			</span>

.close-icon {
  height: 90px;
  width: 90px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  stroke: #fff;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.165, 0.775, 0.145, 1.020);
}
.close-icon .circle {
    opacity:0.2;
}
.close-icon:hover .circle {
    opacity:0.1;
}
.close-icon .progress  {
    opacity:0;
}

.close-icon:hover .progress {
    opacity:1;
}
.progress {
    transition:0.5s;
}
.close-icon .progress {
    stroke-dasharray:1,120;
}
.close-icon:active .progress {
    stroke-dasharray:120,120;
    transition:3s cubic-bezier(0.165, 0.775, 0.145, 1.020);
}

/* ===== */
html{height:100%}
body {
  background-repeat: repeat-y;
  background-position: center;
  background: linear-gradient(to bottom, #40405c 0%,#6f71aa 80%,#8a76ab 100%);
}

/**
 * From Designmodo's QARDS top banner
 * https://designmodo.com/
 */
$(".close-icon").mousedown(function() {
  $("p").remove();
  $closeButtonTimeout = setTimeout(function() {
    // time's up, callback!
    $("body").append("<p>callback here</p>");
  }, 2000);
}).bind("mouseup mouseleave", function() {
  clearTimeout($closeButtonTimeout);
});