.ldld {
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease-in-out
}

    .ldld.running {
        visibility: visible;
        opacity: 1
    }

    .ldld.dark {
        color: rgba(0,0,0,0.5)
    }

    .ldld.light {
        color: rgba(255,255,255,0.5)
    }

    .ldld.default:before, .ldld.full:before, .ldld.ldbtn:before, .ldld.bare:before {
        content: " ";
        display: block;
        background: 0;
        animation: ldld-default .5s ease-in-out infinite;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        margin: 0;
        box-sizing: border-box;
        border: 2px solid #fff;
        border-color: currentColor transparent currentColor transparent
    }

    .ldld.default {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 32px;
        height: 32px
    }

        .ldld.default.sm, .ldld.ldbtn.sm {
            width: 16px;
            height: 16px
        }

        .ldld.bare.em-1, .ldld.default.em-1, .ldld.ldbtn.em-1 {
            width: 1em;
            height: 1em
        }

        .ldld.bare.em-2, .ldld.default.em-2, .ldld.ldbtn.em-2 {
            width: 2em;
            height: 2em
        }

    .ldld.ldbtn {
        width: 32px;
        height: 32px
    }

    .ldld.full {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5)
    }

        .ldld.full:before {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 48px;
            height: 48px
        }

@-moz-keyframes ldld-default {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes ldld-default {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-o-keyframes ldld-default {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes ldld-default {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}