Animated responsive diagonal line

Animated responsive diagonal line from top left to bottom right

by Marc Cots Navarro

HTML

<button class="btn">CLICK</button>
<div class="diagonal"></div>

CSS

html {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
  background: #fff;
}

button {
  position: absolute;
}

.diagonal.animate {
  width: 100%;
  height: 100%;
  transition: all 2s ease;
}

.diagonal {
  width: 0%;
  height: 0%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='black' stroke-width='1'/></svg>") no-repeat;
}

JavaScript

$('.btn').on('click', function(e) {
  $('.btn').toggleClass("colored");
  $('.diagonal').toggleClass("animate");
});