A Pen by Parker Hutchinson

Thumbnail
This awesome code was written by parkerhutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright parkerhutchinson ©
  • HTML
  • CSS
  • JavaScript
    <div class="jom-loader loaded">
<svg id="spinner" class="circular">
	<circle class="outer-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
	<circle class="inner-path" cx="50" cy="50" r="13" fill="none" stroke-width="1.5" stroke-miterlimit="10"/>
	<!-- <filter id="blur-effect-1">
		<feGaussianBlur stdDeviation=".4" />
	</filter> -->
</svg>
</div>

/*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 */
    

Comments