jubaboxweb/wwwjuba/app-assets/css/plugins/loaders/animations/ball-triangle-trace.css

/*========================================================
        DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-triangle-path-1
{
    33%
    {
        -webkit-transform: translate(25px, -50px);
                transform: translate(25px, -50px);
    }
    66%
    {
        -webkit-transform: translate(50px, 0px);
                transform: translate(50px, 0px);
    }
    100%
    {
        -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
    }
}
@-moz-keyframes ball-triangle-path-1
{
    33%
    {
        -moz-transform: translate(25px, -50px);
             transform: translate(25px, -50px);
    }
    66%
    {
        -moz-transform: translate(50px, 0px);
             transform: translate(50px, 0px);
    }
    100%
    {
        -moz-transform: translate(0px, 0px);
             transform: translate(0px, 0px);
    }
}
@-o-keyframes ball-triangle-path-1
{
    33%
    {
        -o-transform: translate(25px, -50px);
           transform: translate(25px, -50px);
    }
    66%
    {
        -o-transform: translate(50px, 0px);
           transform: translate(50px, 0px);
    }
    100%
    {
        -o-transform: translate(0px, 0px);
           transform: translate(0px, 0px);
    }
}
@keyframes ball-triangle-path-1
{
    33%
    {
        -webkit-transform: translate(25px, -50px);
           -moz-transform: translate(25px, -50px);
             -o-transform: translate(25px, -50px);
                transform: translate(25px, -50px);
    }
    66%
    {
        -webkit-transform: translate(50px, 0px);
           -moz-transform: translate(50px, 0px);
             -o-transform: translate(50px, 0px);
                transform: translate(50px, 0px);
    }
    100%
    {
        -webkit-transform: translate(0px, 0px);
           -moz-transform: translate(0px, 0px);
             -o-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
    }
}

@-webkit-keyframes ball-triangle-path-2
{
    33%
    {
        -webkit-transform: translate(25px, 50px);
                transform: translate(25px, 50px);
    }
    66%
    {
        -webkit-transform: translate(-25px, 50px);
                transform: translate(-25px, 50px);
    }
    100%
    {
        -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
    }
}

@-moz-keyframes ball-triangle-path-2
{
    33%
    {
        -moz-transform: translate(25px, 50px);
             transform: translate(25px, 50px);
    }
    66%
    {
        -moz-transform: translate(-25px, 50px);
             transform: translate(-25px, 50px);
    }
    100%
    {
        -moz-transform: translate(0px, 0px);
             transform: translate(0px, 0px);
    }
}

@-o-keyframes ball-triangle-path-2
{
    33%
    {
        -o-transform: translate(25px, 50px);
           transform: translate(25px, 50px);
    }
    66%
    {
        -o-transform: translate(-25px, 50px);
           transform: translate(-25px, 50px);
    }
    100%
    {
        -o-transform: translate(0px, 0px);
           transform: translate(0px, 0px);
    }
}

@keyframes ball-triangle-path-2
{
    33%
    {
        -webkit-transform: translate(25px, 50px);
           -moz-transform: translate(25px, 50px);
             -o-transform: translate(25px, 50px);
                transform: translate(25px, 50px);
    }
    66%
    {
        -webkit-transform: translate(-25px, 50px);
           -moz-transform: translate(-25px, 50px);
             -o-transform: translate(-25px, 50px);
                transform: translate(-25px, 50px);
    }
    100%
    {
        -webkit-transform: translate(0px, 0px);
           -moz-transform: translate(0px, 0px);
             -o-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
    }
}

@-webkit-keyframes ball-triangle-path-3
{
    33%
    {
        -webkit-transform: translate(-50px, 0px);
                transform: translate(-50px, 0px);
    }
    66%
    {
        -webkit-transform: translate(-25px, -50px);
                transform: translate(-25px, -50px);
    }
    100%
    {
        -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
    }
}

@-moz-keyframes ball-triangle-path-3
{
    33%
    {
        -moz-transform: translate(-50px, 0px);
             transform: translate(-50px, 0px);
    }
    66%
    {
        -moz-transform: translate(-25px, -50px);
             transform: translate(-25px, -50px);
    }
    100%
    {
        -moz-transform: translate(0px, 0px);
             transform: translate(0px, 0px);
    }
}

@-o-keyframes ball-triangle-path-3
{
    33%
    {
        -o-transform: translate(-50px, 0px);
           transform: translate(-50px, 0px);
    }
    66%
    {
        -o-transform: translate(-25px, -50px);
           transform: translate(-25px, -50px);
    }
    100%
    {
        -o-transform: translate(0px, 0px);
           transform: translate(0px, 0px);
    }
}

@keyframes ball-triangle-path-3
{
    33%
    {
        -webkit-transform: translate(-50px, 0px);
           -moz-transform: translate(-50px, 0px);
             -o-transform: translate(-50px, 0px);
                transform: translate(-50px, 0px);
    }
    66%
    {
        -webkit-transform: translate(-25px, -50px);
           -moz-transform: translate(-25px, -50px);
             -o-transform: translate(-25px, -50px);
                transform: translate(-25px, -50px);
    }
    100%
    {
        -webkit-transform: translate(0px, 0px);
           -moz-transform: translate(0px, 0px);
             -o-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
    }
}

.ball-triangle-path
{
    position: relative;

    -webkit-transform: translate(-29.994px, -37.50938px);
       -moz-transform: translate(-29.994px, -37.50938px);
        -ms-transform: translate(-29.994px, -37.50938px);
         -o-transform: translate(-29.994px, -37.50938px);
            transform: translate(-29.994px, -37.50938px);
}
.ball-triangle-path > div:nth-child(1)
{
    -webkit-animation-name: ball-triangle-path-1;
       -moz-animation-name: ball-triangle-path-1;
         -o-animation-name: ball-triangle-path-1;
            animation-name: ball-triangle-path-1;
    -webkit-animation-duration: 2s;
       -moz-animation-duration: 2s;
         -o-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
       -moz-animation-timing-function: ease-in-out;
         -o-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
       -moz-animation-delay: 0;
         -o-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
.ball-triangle-path > div:nth-child(2)
{
    -webkit-animation-name: ball-triangle-path-2;
       -moz-animation-name: ball-triangle-path-2;
         -o-animation-name: ball-triangle-path-2;
            animation-name: ball-triangle-path-2;
    -webkit-animation-duration: 2s;
       -moz-animation-duration: 2s;
         -o-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
       -moz-animation-timing-function: ease-in-out;
         -o-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
       -moz-animation-delay: 0;
         -o-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
.ball-triangle-path > div:nth-child(3)
{
    -webkit-animation-name: ball-triangle-path-3;
       -moz-animation-name: ball-triangle-path-3;
         -o-animation-name: ball-triangle-path-3;
            animation-name: ball-triangle-path-3;
    -webkit-animation-duration: 2s;
       -moz-animation-duration: 2s;
         -o-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
       -moz-animation-timing-function: ease-in-out;
         -o-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
       -moz-animation-delay: 0;
         -o-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
.ball-triangle-path > div
{
    position: absolute;

    width: 10px;
    height: 10px;

    border: 1px solid #b8c2cc; 
    border-radius: 100%;

    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}
.ball-triangle-path > div:nth-of-type(1)
{
    top: 50px;
}
.ball-triangle-path > div:nth-of-type(2)
{
    left: 25px;
}
.ball-triangle-path > div:nth-of-type(3)
{
    top: 50px;
    left: 50px;
}