<div class="loader"></div>
.loader {
  width: 150px; /* control the size */
  aspect-ratio: 1;
  display: grid;
  cursor:pointer;
}
.loader,
.loader:before {
  --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
  background: 
    var(--_g)/34% 8%  space no-repeat,
    var(--_g)/8%  34% no-repeat space;
}
.loader:before {
  content: "";
  transition:.5s;
}
.loader:hover:before {
  transform: rotate(45deg);
}

body {
  margin:0;
  min-height:100vh;
  display:grid;
  place-content:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.