.circle {
    position: absolute;
    width: 25px;
    height: 30px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0px;
    margin: auto;
    /* border: 6px solid #00A6DA; */
    border: 6px solid #FFFFFF;
    border-radius: 30%;
}
#vertical {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation: spin 4s linear infinite, pulse 1s linear infinite alternate;
    animation: spin 4s linear infinite, pulse 1s linear infinite alternate;
}
.circle:not(#vertical) {
    -webkit-animation: spin2 4s linear infinite, pulse 1s linear infinite alternate;
    animation: spin2 4s linear infinite, pulse 1s linear infinite alternate;
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
   }
}
@-webkit-keyframes spin2 {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
   }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
   }
}
@keyframes spin2 {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
   }
}
@-webkit-keyframes pulse {
    0% {
        width: 5px;
        height: 100px;
   }
    100% {
        width: 50px;
        height: 5px;
   }
    0% {
        width: 5px;
        height: 100px;
   }
}
@keyframes pulse {
    0% {
        width: 5px;
        height: 100px;
   }
    100% {
        width: 50px;
        height: 5px;
   }
    0% {
        width: 5px;
        height: 100px;
   }
}