A Pen by Parker Hutchinson

/*Downloaded from https://www.codeseek.co/parkerhutchinson/a-pen-by-parker-hutchinson-dMRadO */
    $width: 100px;
$zoom: 2;
$element-in-out-duration: .2s;

.jom-loader {
    display: block;
    position: absolute;
    z-index: 300;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    background: transparent;
    animation: float 5s ease infinite,
               load-in .3s ease 1;
    #spinner,
    #checkmark {
        opacity: 1;
        transition-property: all;
        transition-duration: $element-in-out-duration;
        transition-timing-function: ease;
    }
    #checkmark {
        fill: #0BD5A7;
        width: 50px;
        position: absolute;
        z-index: 500;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}

// Drawer States
#drawer-container,
#find-a-thing--container {
    &.loading,
    &.loaded {
        .drawer {
            transition-property: all;
            transition-duration: .2s;
            transition-timing-function: ease-in;
        }
        .jom-loader {
            display: block;
        }
    }
    // When We are waiting on a process
    // This is drawer wide, we can't continue until the process is done
    &.loading {
        #spinner {
            opacity: 1; 
        }
        .drawer-bottom button {
            transform: translateY(100%);
        }
        cursor: wait;
    }
    // This State is when something is going on that isn't halting. 
    // Like updating prices which aren't crucial
    &.updating {
        cursor: progress;
        #spinner {
            opacity: 1;
        }
        .jom-loader {
            display: block;
        }
        // Reciept like bottom of drawer with price information
        // This will slide down to be updated,
        // then updated when the class is removed
        .drawer-main-bottom {
            transform: translateY(110%);
        }
        // This is the price total for the cart
        .cart-total {
            transform: translateY(-200%);
        }
        .cart-item-price {
            opacity: 0;
            transition: opacity .2s ease;
        }
        .drawer-bottom button {
            transform: translateY(100%);
        }
    }
    // This is the state when the process was a success
    &.loaded {
        .jom-loader{
            animation: load-out 1s ease-in-out 1;
        }
        #checkmark {
            opacity: 1; 
        }
    }
    // Something went wrong
    &.error {
        .drawer-main {
            animation-name: shake-it-off;
            animation-duration: .5s;
            animation-timing-function: ease;
            animation-iteration-count: 1;
            overflow: hidden;
        }
    }
}
    
.jom-loader {
    width: $width;
    height: $width;
    zoom: $zoom;
}
.circular {
    animation: rotate 2s linear infinite;
    height: $width;
    position: relative;
    width: $width;
}
.outer-path {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    stroke: black;
    animation: 
    outter-dash 3s ease-in-out infinite,
    color 1s linear infinite;
    stroke-linecap: round;
}
.inner-path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke: black;
    animation: inner-dash 5s ease-in-out infinite,
               color 1s linear infinite;
}

/*Downloaded from https://www.codeseek.co/parkerhutchinson/a-pen-by-parker-hutchinson-dMRadO */