.dui-preloader {
    display: inline-block;
    position: relative;
    width: var(--dui-preloader-size);
    height: var(--dui-preloader-size);
    animation: container-rotate 1568ms linear infinite;
}

.dui-preloader.dui-xl {
    width: var(--dui-preloader-size-xlg);
    height: var(--dui-preloader-size-xlg);
}

.dui-preloader.dui-lg {
    width: var(--dui-preloader-size-lg);
    height: var(--dui-preloader-size-lg);
}

.dui-preloader.dui-md {
    width: var(--dui-preloader-size-md);
    height: var(--dui-preloader-size-md);
}

.dui-preloader.dui-sm {
    width: var(--dui-preloader-size-sm);
    height: var(--dui-preloader-size-sm);
}

.dui-preloader.dui-xs {
    width: var(--dui-preloader-size-xsm);
    height: var(--dui-preloader-size-xsm);
}

.dui-pl-spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    border-color: var(--dui-fg, var(--dui-preloader-color));
    opacity: 1;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.dui-pl-circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

.dui-pl-circle-left,
.dui-pl-circle-right {
    width: 200%;
    height: 100%;
    border-width: var(--dui-preloader-thinckness);
    border-style: solid;
    border-color: inherit;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.dui-pl-circle-left {
    left: 0;
    border-right-color: transparent;
    transform: rotate(129deg);
    animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.dui-pl-circle-right {
    left: -100%;
    border-left-color: transparent;
    transform: rotate(-129deg);
    animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.dui-pl-right {
    float: right;
}