.TruckLoader {
    position: relative;
    width: 150px;
    height: 40px;
    background: #444;
    animation: put-put 2s infinite, move-truck 10s infinite;
    background-size: 100% auto;
    border-radius: 4px;
    -webkit-box-reflect: below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 0.1)));
}

    .TruckLoader:before, .TruckLoader:after {
        content: '';
        display: block;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        border: 2px solid #fff;
        background: #333;
        position: absolute;
        bottom: -10px;
    }

    .TruckLoader:before {
        left: 6px;
    }

    .TruckLoader:after {
        right: 6px;
    }

.TruckLoader-cab {
    position: absolute;
    left: -35px;
    bottom: 0;
    width: 33px;
    height: 25px;
    background: #333;
    border-radius: 40% 0 4px 4px;
    -webkit-box-reflect: below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 0.1)));
}

    .TruckLoader-cab:before, .TruckLoader-cab:after {
        position: absolute;
        content: '';
        display: block;
        background: #333;
    }

    .TruckLoader-cab:before {
        width: 20px;
        height: 15px;
        top: -15px;
        right: 0;
        border-radius: 100% 0 0 0;
    }

    .TruckLoader-cab:after {
        border-radius: 50%;
        width: 16px;
        height: 16px;
        background: #444;
        left: 5px;
        border: 2px solid #fff;
        background: #333;
        position: absolute;
        bottom: -10px;
    }

.TruckLoader-smoke, .TruckLoader-smoke:after, .TruckLoader-smoke:before {
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    right: -1px;
    bottom: -5px;
    border-radius: 50%;
    background: #333;
}

.TruckLoader-smoke {
    animation: smoke-1 2s infinite;
}

    .TruckLoader-smoke:after {
        animation: smoke-2 3s infinite;
    }

    .TruckLoader-smoke:before {
        animation: smoke-3 4s infinite;
    }

@-webkit-keyframes put-put {
    0% {
        margin-top: 0px;
        height: 50px;
    }

    5% {
        margin-top: -2px;
        height: 52px;
    }

    20% {
        margin-top: -1px;
        height: 50px;
    }

    35% {
        margin-top: 1px;
        height: 49px;
    }

    40% {
        margin-top: -1px;
        height: 51px;
    }

    60% {
        margin-top: 1px;
        height: 49px;
    }

    75% {
        margin-top: 0px;
        height: 50px;
    }

    80% {
        margin-top: -4px;
        height: 52px;
    }

    100% {
        margin-top: 1px;
        height: 49px;
    }
}

@-webkit-keyframes smoke-1 {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 0.9;
    }

    100% {
        right: -30px;
        bottom: 5px;
        width: 30px;
        height: 30px;
        opacity: 0;
    }
}

@-webkit-keyframes smoke-2 {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 0.9;
    }

    100% {
        right: -60px;
        bottom: 8px;
        width: 25px;
        height: 25px;
        opacity: 0;
    }
}

@-webkit-keyframes smoke-3 {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 0.9;
    }

    100% {
        right: -40px;
        bottom: 2px;
        width: 35px;
        height: 35px;
        opacity: 0;
    }
}

@-webkit-keyframes move-truck {
    0% {
        margin-left: 90%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        margin-left: 45%;
    }

    90% {
        opacity: 1;
    }

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


.TruckLoader-sm {
    position: relative;
    width: 50px;
    height: 25px;
    background: #444;
    animation: put-put-sm 2s infinite, move-truck-sm 10s infinite;
    background-size: 100% auto;
    border-radius: 4px;
    -webkit-box-reflect: below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 0.1)));
}

    .TruckLoader-sm:before, .TruckLoader-sm:after {
        content: '';
        display: block;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        border: 1px solid #fff;
        background: #333;
        position: absolute;
        bottom: -10px;
    }

    .TruckLoader-sm:before {
        left: 6px;
    }

    .TruckLoader-sm:after {
        right: 6px;
    }

.TruckLoader-sm-cab {
    position: absolute;
    left: -17px;
    bottom: 0;
    width: 15px;
    height: 10px;
    background: #333;
    border-radius: 40% 0 2px 2px;
    -webkit-box-reflect: below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 0.1)));
}

    .TruckLoader-sm-cab:before, .TruckLoader-sm-cab:after {
        position: absolute;
        content: '';
        display: block;
        background: #333;
    }

    .TruckLoader-sm-cab:before {
        width: 7px;
        height: 10px;
        top: -7px;
        right: 0;
        border-radius: 100% 0 0 0;
    }

    .TruckLoader-sm-cab:after {
        border-radius: 50%;
        width: 8px;
        height: 8px;
        background: #444;
        left: 5px;
        border: 1px solid #fff;
        background: #333;
        position: absolute;
        bottom: -10px;
    }

.TruckLoader-sm-smoke, .TruckLoader-sm-smoke:after, .TruckLoader-sm-smoke:before {
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    right: -1px;
    bottom: -5px;
    border-radius: 50%;
    background: #333;
}

.TruckLoader-sm-smoke {
    animation: smoke-1 2s infinite;
}

    .TruckLoader-sm-smoke:after {
        animation: smoke-2 3s infinite;
    }

    .TruckLoader-sm-smoke:before {
        animation: smoke-3 4s infinite;
    }

@-webkit-keyframes put-put-sm {
    0% {
        margin-top: 0px;
        height: 25px;
    }

    5% {
        margin-top: -2px;
        height: 27px;
    }

    20% {
        margin-top: -1px;
        height: 25px;
    }

    35% {
        margin-top: 1px;
        height: 24px;
    }

    40% {
        margin-top: -1px;
        height: 26px;
    }

    60% {
        margin-top: 1px;
        height: 24px;
    }

    75% {
        margin-top: 0px;
        height: 25px;
    }

    80% {
        margin-top: -4px;
        height: 27px;
    }

    100% {
        margin-top: 1px;
        height: 24px;
    }
}


@-webkit-keyframes move-truck-sm {
    0% {
        margin-left: 90%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        margin-left: 45%;
    }

    90% {
        opacity: 1;
    }

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