* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(24, 17, 23);
}

.loader {
    position: relative;
    width: 200px;
    transform: skewY(-25deg);
  
}
.loader::before{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 200px;
    left: 200px;
    background: rgb(255, 255, 255);
}

.loader .span {
    position: relative;
    width: 100%;
    height: 30px;
    transition: 1s;
    background: rgb(12, 12, 12);
    margin: 3px;
    left: 69px;
    top: 25px;
}

.loader .span:hover{
    background: rgb(255, 93, 228);
    transition: 0s;
}

.span::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(29, 29, 29);
    transform: skewY(40deg);
    left: -200px;
    top: -84px;
    transition: 0.8s;
    z-index: 1;
}
.span:hover::before{
background: rgb(121, 255, 244);
transition: 0s;
 }

 .span::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 167px;
    background: linear-gradient(to right, rgb(117, 255, 255), rgb(255, 115, 192));
    transform: skew(50deg);
    top: -167px;
    left: -100px;
    z-index: -1;
    transition: .8s;
  
 }