.wrapper{
    position: relative;
    margin-top: 10%;
    margin-left: 5%;
    margin-bottom: 5%;
}

.line{
    position: absolute;
    top: 0px;
    width: 4px;
    height: 5px;
    background: var(--dark-blue-trans);
    z-index: -2;
}

.circle{
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 .5em .1em #fff;
    background: var(--light-blue-trans);
    z-index: -2;
}

.circle-top{
    top: 0px;
    left: -3.5px;
}

.circle-bottom{
    bottom: 0px;
    left: -3.5px;
}

.dot{
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    left: -1.5px;
}

.line1{
    margin-left: 0%;
    animation: twist 5s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}


.line2{
    margin-left: 5%;
    animation: twist 5s .05s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line3{
    margin-left: 10%;
    animation: twist 5s .1s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line4{
    margin-left: 15%;
    animation: twist 5s .15s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line5{
    margin-left: 20%;
    animation: twist 5s .2s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line6{
    margin-left: 25%;
    animation: twist 5s .25s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line7{
    margin-left: 30%;
    animation: twist 5s .3s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line8{
    margin-left: 35%;
    animation: twist 5s .35s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line9{
    margin-left: 40%;
    animation: twist 5s .4s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line10{
    margin-left: 45%;
    animation: twist 5s .45s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line11{
    margin-left: 50%;
    animation: twist 5s .5s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line12{
    margin-left: 55%;
    animation: twist 5s .55s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line13{
    margin-left: 60%;
    animation: twist 5s .6s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line14{
    margin-left: 65%;
    animation: twist 5s .65s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line15{
    margin-left: 70%;
    animation: twist 5s .7s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line16{
    margin-left: 75%;
    animation: twist 5s .75s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line17{
    margin-left: 80%;
    animation: twist 5s .8s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line18{
    margin-left: 85%;
    animation: twist 5s .85s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line19{
    margin-left: 90%;
    animation: twist 5s .9s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

.line20{
    margin-left: 95%;
    animation: twist 5s .95s cubic-bezier(0.150, 0, 0.205, 1) infinite;
}

@keyframes twist{
    0%{height: 4px; top: 0px; left: 0px; transform: rotate(-720deg)}
    50%{height: 200px; top: -100px; left: 5px;}
    100%{height: 4px; top: 0px; left: 0px; transform: rotate(0deg);}
}