<div class="bigBlock">


    <span class="ray ray_left">-</span>
    <span class="ray ray_top1">r</span>
    <span class="ray ray_bottom1">a</span>
    <span class="ray ray_top2">y</span>
    <span class="ray ray_bottom2">s</span>


    <div class="preloaderBlock">

        <div class="preloaderWrappen">
            <div class="pr_block">
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
            </div>
            <div class="pr_block">
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
            </div>
            <div class="pr_block">
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
            </div>
            <div class="pr_block">
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
            </div>
            <div class="pr_block">
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
            </div>
            <div class="pr_block">
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
            </div>
            <div class="pr_block">
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
            </div>
            <div class="pr_block">
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
                <div class="linePreloader"></div>
            </div>

        </div>
        <div class="pr_logo">
            <div class="l_1"></div>
            <div class="l_2"></div>
            <div class="l_3"></div>
        </div>
    </div>
</div>
<div class="aboutMe">
    <a href="https://codepen.io/BlackStar1991/pens/public/" target="_new">
        <i class='fa fa-codepen'></i> my other Pens</a>
</div>

$w: 400px; // You can change size here
$h: 400px; // You can change size here

body {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #481429;

}

.bigBlock {
  position: relative;
  margin: 0 auto;
  width: $w;
  height: $h;
  color: #fff;
  //border: 1px solid red;

  &:hover .preloaderBlock,
  &:hover .pr_logo {
    animation-play-state: paused;
  }
  &:hover .ray_left {
    animation: rayLeftMoving 300ms linear;
    animation-fill-mode: forwards;
  }
  &:hover .ray_top1,
  &:hover .ray_top2 {
    animation: rayTopMoving 300ms linear 50ms;
    animation-fill-mode: forwards;
  }
  &:hover .ray_bottom1,
  &:hover .ray_bottom2 {
    animation: rayDownMoving 300ms linear 50ms;
    animation-fill-mode: forwards;
  }

}

.preloaderBlock {
  width: $w/3;
  height: $h/3;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -$h/6;
  margin-left: -$w/6;

  animation: rotateMoving ease-in-out 3000ms infinite;
}

.preloaderWrappen {
  position: relative;
  margin-left: -12%;
  width: 100%;
  height: 100%;
}

.pr_block {
  position: absolute;
  height: 20%;
  width: 50%;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.linePreloader {
  width: 100%;
  height: calc(100% / 7);
}

.pr_block:nth-of-type(1) {
  left: 0;
  top: -10%;
  .linePreloader {
    background: linear-gradient(to left, rgba(36, 76, 177, 0.1) 10%, rgb(36, 76, 177));
  }
}

.pr_block:nth-of-type(2) {
  top: -15%;
  left: 45%;
  transform: rotate(45deg);
  .linePreloader {
    background: linear-gradient(to left, rgba(100, 47, 137, 0.1) 10%, rgba(100, 47, 137, 1));
  }
}

.pr_block:nth-of-type(3) {

  left: 85%;
  top: 0;
  transform: rotate(90deg);
  .linePreloader {
    background: linear-gradient(to left, rgba(210, 33, 90, 0.1) 10%, rgb(210, 33, 90));
  }
}

.pr_block:nth-of-type(4) {
  top: 50%;
  left: 90%;
  transform: rotate(-45deg);
  .linePreloader {
    background: linear-gradient(to right, rgba(238, 67, 57, 0.1) 10%, rgb(238, 67, 57));
  }
}

.pr_block:nth-of-type(5) {
  top: 90%;
  left: 70%;
  transform: rotate(180deg);
  .linePreloader {
    background: linear-gradient(to left, rgba(247, 147, 35, 0.1) 10%, rgb(247, 147, 35));
  }
}

.pr_block:nth-of-type(6) {
  top: 90%;
  left: 20%;
  transform: rotate(225deg);
  .linePreloader {
    background: linear-gradient(to left, rgba(255, 221, 29, 0.1) 10%, rgb(255, 221, 29));
  }
}

.pr_block:nth-of-type(7) {
  top: 80%;
  left: -15%;
  transform: rotate(270deg);
  .linePreloader {
    background: linear-gradient(to left, rgba(140, 197, 65, 0.1) 10%, rgb(140, 197, 65));
  }
}

.pr_block:nth-of-type(8) {
  top: 25%;
  left: -20%;
  transform: rotate(315deg);
  .linePreloader {
    background: linear-gradient(to left, rgba(11, 172, 238, 0.1) 10%, rgb(11, 172, 238));
  }
}

.pr_logo {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  margin-left: -30%;
  margin-top: -30%;

  animation: rotateMoving ease-in-out 3000ms infinite reverse;
}

.l_1 {
  position: absolute;
  margin-left: 5%;

  width: 85%;
  height: 10%;
  transform-origin: center;
  transform: skew(-45deg);
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

.l_2 {
  position: absolute;
  left: 40%;
  width: 20%;
  height: 85%;
  transform-origin: center;
  transform: skew(-45deg);

  background-image: linear-gradient(to top, red, orange, yellow, green, blue, indigo, violet);
}

.l_3 {
  position: absolute;
  bottom: 12%;
  left: 0;
  width: 95%;
  height: 10%;
  transform-origin: center;
  transform: skew(-45deg);

  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

.ray {
  opacity: 0;
  position: absolute;
  top: 42%;
  left: 60%;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  font-size: 2.5em;
  z-index: 3;
}

.ray_left {

}

.ray_top1 {

  left: 65%;
}

.ray_bottom1 {
  left: 72%;
}

.ray_top2 {
  left: 77%;
}

.ray_bottom2 {
  left: 83%;
}

.aboutMe a {
  display: block;
  width: 30%;
  position: fixed;
  bottom: .1%;
  left: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.5em;
  font-family: "Roboto", sans-serif;
  text-decoration: none
}

@keyframes rotateMoving {
  0% {
  }
  100% {
    transform: rotate(-1turn);
  }
}

@keyframes rayLeftMoving {
  0% {
    opacity: 0;
    margin-left: -20%;
  }

  100% {
    opacity: 1;
    margin-left: 0;
  }
}

@keyframes rayTopMoving {
  0% {
    opacity: 0;
    margin-top: -20%;
  }

  100% {
    opacity: 1;
    margin-top: 0;
  }
}

@keyframes rayDownMoving {
  0% {
    opacity: 0;
    margin-top: 20%;
  }

  100% {
    opacity: 1;
    margin-top: 0;
  }
}