"loader kit"
Bootstrap 4.0.0 Snippet by kiranm

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/viduthalai1947/pen/JkhDK?depth=everything&order=popularity&page=64&q=box&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cf { background-color: #555;} .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } html{ color: #fff; font-family: 'Source Sans Pro', sans-serif; background-color: #59488b; } h1,h2{ color: rgba(255,255,255,0.5); font-size: 40px; font-weight: 200; text-align: center; margin: 40px 0 0 0; } h2{ font-size: 18px; margin: 0; padding: 0; margin: 10px 0; } h1 span{ font-size: 30px; } a{ text-decoration: none; } a:hover{ transition: all linear 0.2s; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } .wrapper{ width: 700px; margin: 0 auto; } .row{ text-align: center; padding: 50px 0; } .span, .span_large{ float: left; width: 100px; background-color: rgba(0,0,0, 0.02); height: 100px; vertical-align: middle; border-radius: 1px; margin-right: 100px; } .span:last-child{ margin-right: 0px; } /* Timer*/ .timer{ width: 24px; height: 24px; background-color: transparent; box-shadow: inset 0px 0px 0px 2px #fff; border-radius: 50%; position: relative; margin: 38px auto;/* Not necessary- its only for layouting*/ } .timer:after, .timer:before{ position: absolute; content:""; background-color: #fff; } .timer:after{ width: 10px; height: 2px; top: 11px; left: 11px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; -webkit-animation: minhand 2s linear infinite; -moz-animation: minhand 2s linear infinite; animation: minhand 2s linear infinite; } .timer:before{ width: 8px; height: 2px; top: 11px; left: 11px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; -webkit-animation: hrhand 8s linear infinite; -moz-animation: hrhand 8s linear infinite; animation: hrhand 8s linear infinite; } @-webkit-keyframes minhand{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-moz-keyframes minhand{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)} } @keyframes minhand{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes hrhand{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-moz-keyframes hrhand{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)} } @keyframes hrhand{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } /*Typing Loader*/ .typing_loader{ width: 6px; height: 6px; border-radius: 50%; -webkit-animation: typing 1s linear infinite alternate; -moz-animation: Typing 1s linear infinite alternate; animation: typing 1s linear infinite alternate; margin: 46px auto; /* Not necessary- its only for layouting*/ position: relative; left: -12px; } @-webkit-keyframes typing{ 0%{ background-color: rgba(255,255,255, 1); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 25%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 75%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,1); } } @-moz-keyframes typing{ 0%{ background-color: rgba(255,255,255, 1); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 25%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 75%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,1); } } @keyframes typing{ 0%{ background-color: rgba(255,255,255, 1); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 25%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 24px 0px 0px 0px rgba(255,255,255,0.2); } 75%{ background-color: rgba(255,255,255, 0.4); box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 24px 0px 0px 0px rgba(255,255,255,1); } } /*Location indicator */ .location_indicator{ margin: 30px auto; position: relative; left: -9px; } .location_indicator:before, .location_indicator:after{ position: absolute; content: ""; } .location_indicator:before{ width: 20px; height: 20px; border-radius: 100% 100% 100% 0; box-shadow: 0px 0px 0px 2px rgba(255,255,255,1); -webkit-animation: mapping 1s linear infinite; -moz-animation: mapping 1s linear infinite; animation: mapping 1s linear infinite; -webkit-transform: rotate(-46deg); -moz-transform: rotate(-46deg); transform: rotate(-46deg); } .location_indicator:after{ width: 30px; height: 10px; border-radius: 100%; left: 44px; background-color: rgba(255, 255, 255, 0.2); top: 24px; z-index: -1; } @-webkit-keyframes mapping{ 0% {top: 0;} 50%{top: -5px;} 100% {top:0; } } @-moz-keyframes mapping{ 0% {top: 0;} 50%{top: -5px;} 100% {top:0; } } @-keyframes mapping{ 0% {top: 0;} 50%{top: -5px;} 100% {top:0; } } /* go in*/ .dashboard{ width: 32px; height: 32px; margin: 30px auto; border: 2px rgba(255,255,255,1) solid; border-radius: 100%; position: relative; overflow: hidden; z-index: 1; } .dashboard:after, .dashboard:before{ position: absolute; content: ""; } .dashboard:after{ width:14px; height: 2px; top: 20px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; background-color: rgba(255,255,255,1); -webkit-animation: dashboard_hand 2s linear infinite alternate; -moz-animation: dashboard_hand 2s linear infinite alternate; animation: dashboard_hand 2s linear infinite alternate; } .dashboard:before{ width: 32px; height: 10px; background-color: rgba(255,255,255,1); top:20px; left: -2px; } @-webkit-keyframes dashboard_hand{ 0%{ -webkit-transform: rotate(-160deg);} 100%{ -webkit-transform: rotate(-20deg);} } @-moz-keyframes dashboard_hand{ 0%{ -moz-transform: rotate(-160deg);} 100%{ -moz-transform: rotate(-20deg);} } @keyframes dashboard_hand{ 0%{ transform: rotate(-160deg);} 100%{ transform: rotate(-20deg);} } /*Battery*/ .battery{ width: 28px; height: 14px; border: 1px #fff solid; border-radius: 2px; position: relative; -webkit-animation: charge 5s linear infinite; -moz-animation: charge 5s linear infinite; animation: charge 5s linear infinite; top: 40px; margin: 0 auto; } .battery:after{ width: 2px; height: 7px; background-color: #fff; border-radius: 0px 1px 1px 0px; position: absolute; content: ""; top: 2px; right: -4px; } @-webkit-keyframes charge{ 0%{box-shadow: inset 0px 0px 0px #fff;} 100%{box-shadow: inset 30px 0px 0px #fff;} } @-moz-keyframes charge{ 0%{box-shadow: inset 0px 0px 0px #fff;} 100%{box-shadow: inset 30px 0px 0px #fff;} } @keyframes charge{ 0%{box-shadow: inset 0px 0px 0px #fff;} 100%{box-shadow: inset 30px 0px 0px #fff;} } .magnifier{ width: 20px; height: 20px; box-shadow: 0px 0px 0px 1px #fff; border-radius: 50%; position: relative; margin: 34px auto; -webkit-animation: magnify 1s linear infinite alternate; -moz-animation: magnify 1s linear infinite alternate; animation: magnify 1s linear infinite alternate; } .magnifier:after, .magnifier:before{ position: absolute; content: ""; } .magnifier:before{ content: "me"; font-size: 12px; left: 2px; text-align: center; top: 2px; } .magnifier:after{ width: 2px; height: 8px; background-color: #fff; bottom: -6px; left: 20px; border-radius: 2px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } @-webkit-keyframes magnify{ 0%{-webkit-transform: scale(1); } 100%{-webkit-transform: scale(1.5);} } @-moz-keyframes magnify{ 0%{-moz-transform: scale(1); } 100%{-moz-transform: scale(1.5);} } @keyframes magnify{ 0%{transform: scale(1); } 100%{transform: scale(1.5);} } /*help*/ .help{ width: 30px; height: 30px; border: 1px #fff solid; border-radius: 50%; -webkit-animation: rotation 1s ease-in-out infinite; -moz-animation: rotation 1s ease-in-out infinite; animation: rotation 1s ease-in-out infinite; margin: 30px auto; } .help:after{ width: 5px; height: 5px; background-color: rgba(255,255,255,1); border-radius: 100%; position: absolute; content: ""; } @-webkit-keyframes rotation{ 0%{-webkit-transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg);} } @-moz-keyframes rotation{ 0%{-moz-transform: rotate(0deg);} 100%{-moz-transform: rotate(360deg);} } @keyframes rotation{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} } /*eye ball*/ .eye{ width: 20px; height: 20px; background-color: rgba(255,255,255,0.8); border-radius: 50%; box-shadow: 30px 0px 0px 0px rgba(255,255,255,0.8); position: relative; margin: 36px 26px; } .eye:after{ background-color: #59488b; width: 10px; height: 10px; box-shadow: 30px 0px 0px 0px #59488b; border-radius: 50%; left: 9px; top: 8px; position: absolute; content: ""; -webkit-animation: eyeball 2s linear infinite alternate; -moz-animation: eyeball 2s linear infinite alternate; animation: eyeball 2s linear infinite alternate; } @-webkit-keyframes eyeball{ 0%{left: 9px;} 100%{left: 1px;} } @-moz-keyframes eyeball{ 0%{left: 9px;} 100%{left: 1px;} } @keyframes eyeball{ 0%{left: 9px;} 100%{left: 1px;} } /*coffee cup*/ .coffee_cup{ width: 20px; height: 24px; border: 1px rgba(255,255,255,1) solid; border-radius: 0px 0px 5px 5px; position: relative; margin: 36px auto; } .coffee_cup:after, .coffee_cup:before{ position: absolute; content: ""; } .coffee_cup:after{ width: 5px; height: 12px; border: 1px #fff solid; border-left: none; border-radius: 0px 20px 20px 0px; left: 20px; } .coffee_cup:before{ width: 1px; height: 6px; background-color: rgba(255,255,255,1); top: -10px; left: 4px; box-shadow: 5px 0px 0px 0px rgba(255,255,255,1), 5px -5px 0px 0px rgba(255,255,255,1), 10px 0px 0px 0px rgba(255,255,255,1); -webkit-animation: steam 1s linear infinite alternate; -moz-animation: steam 1s linear infinite alternate; animation: steam 1s linear infinite alternate; } @-webkit-keyframes steam{ 0%{height: 0px;} 100%{height: 6px;} } @-moz-keyframes steam{ 0%{height: 0px} 100%{height: 6px;} } @keyframes steam{ 0%{height: 0px} 100%{height: 6px;} } /*square*/ .square{ width: 20px; height: 20px; border:1px rgba(255,255,255,1) solid; margin: 36px auto; position: relative; -webkit-animation: fill_color 5s linear infinite; -moz-animation: fill_color 5s linear infinite; animation: fill_color 5s linear infinite; } .square:after{ width: 4px; height: 4px; position: absolute; content: ""; background-color: rgba(255,255,255,1); top: -8px; left: 0px; -webkit-animation: square_check 1s ease-in-out infinite; -moz-animation: square_check 1s ease-in-out infinite; animation: square_check 1s ease-in-out infinite; } @-webkit-keyframes square_check{ 25%{ left: 22px; top: -8px;} 50%{ left: 22px; top: 22px;} 75%{ left: -9px; top: 22px;} 100%{ left: -9px; top: -7px;} } @-moz-keyframes square_check{ 25%{ left: 22px; top: -8px;} 50%{ left: 22px; top: 22px;} 75%{ left: -9px; top: 22px;} 100%{ left: -9px; top: -7px;} } @keyframes square_check{ 25%{ left: 22px; top: -8px;} 50%{ left: 22px; top: 22px;} 75%{ left: -9px; top: 22px;} 100%{ left: -9px; top: -7px;} } @-webkit-keyframes fill_color{ 0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);} 100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);} } @-moz-keyframes fill_color{ 0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);} 100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);} } @keyframes fill_color{ 0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);} 100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);} } /*circle classick*/ .circle{ margin: 40px auto; position: relative; width: 8px; height: 8px; background-color: rgba(255,255,255,.5);; box-shadow: -14px 0px 0px rgba(255,255,255,1); border-radius: 50%; -webkit-animation: circle_classic 1s ease-in-out infinite alternate; -moz-animation: circle_classic 1s ease-in-out infinite alternate; animation: circle_classic 1s ease-in-out infinite alternate; } @-webkit-keyframes circle_classic{ 0%{ opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5);} 100%{opacity: 1; -webkit-transform: rotate(360deg) scale(1.2);} } @-moz-keyframes circle_classic{ 0%{ opacity: 0.1; -moz-transform: rotate(0deg) scale(0.5);} 100%{opacity: 1; -moz-transform: rotate(360deg) scale(1.2);} } @keyframes circle_classic{ 0%{ opacity: 0.1; transform: rotate(0deg) scale(0.5);} 100%{opacity: 1; transform: rotate(360deg) scale(1.2);} } /*cloud*/ .cloud{ margin: 42px 30px; width: 4px; height: 10px; opacity: 0.5; position: relative; box-shadow: 6px 0px 0px 0px rgba(255,255,255,1), 12px 0px 0px 0px rgba(255,255,255,1), 18px 0px 0px 0px rgba(255,255,255,1), 24px 0px 0px 0px rgba(255,255,255,1), 30px 0px 0px 0px rgba(255,255,255,1), 36px 0px 0px 0px rgba(255,255,255,1); -webkit-animation: rain 1s linear infinite alternate; -moz-animation: rain 1s linear infinite alternate; animation: rain 1s linear infinite alternate; } .cloud:after{ width: 40px; height: 10px; position: absolute; content: ""; background-color: rgba(255,255,255,1); top: 0px; opacity: 1; -webkit-animation: line_flow 2s linear infinite reverse; -moz-animation: line_flow 2s linear infinite reverse; animation: line_flow 2s linear infinite reverse; } @-webkit-keyframes rain{ 0%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,1), 12px 0px 0px 0px rgba(255,255,255,0.9), 18px 0px 0px 0px rgba(255,255,255,0.7), 24px 0px 0px 0px rgba(255,255,255,0.6), 30px 0px 0px 0px rgba(255,255,255,0.3), 36px 0px 0px 0px rgba(255,255,255,0.2); } 100%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2), 12px 0px 0px 0px rgba(255,255,255,0.3), 18px 0px 0px 0px rgba(255,255,255,0.6), 24px 0px 0px 0px rgba(255,255,255,0.7), 30px 0px 0px 0px rgba(255,255,255,0.9), 36px 0px 0px 0px rgba(255,255,255,1); opacity: 1; } } @-moz-keyframes rain{ 0%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,1), 12px 0px 0px 0px rgba(255,255,255,0.9), 18px 0px 0px 0px rgba(255,255,255,0.7), 24px 0px 0px 0px rgba(255,255,255,0.6), 30px 0px 0px 0px rgba(255,255,255,0.3), 36px 0px 0px 0px rgba(255,255,255,0.2); } 100%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2), 12px 0px 0px 0px rgba(255,255,255,0.3), 18px 0px 0px 0px rgba(255,255,255,0.6), 24px 0px 0px 0px rgba(255,255,255,0.7), 30px 0px 0px 0px rgba(255,255,255,0.9), 36px 0px 0px 0px rgba(255,255,255,1); opacity: 1; } } @keyframes rain{ 0%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,1), 12px 0px 0px 0px rgba(255,255,255,0.9), 18px 0px 0px 0px rgba(255,255,255,0.7), 24px 0px 0px 0px rgba(255,255,255,0.6), 30px 0px 0px 0px rgba(255,255,255,0.3), 36px 0px 0px 0px rgba(255,255,255,0.2); } 100%{ box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2), 12px 0px 0px 0px rgba(255,255,255,0.3), 18px 0px 0px 0px rgba(255,255,255,0.6), 24px 0px 0px 0px rgba(255,255,255,0.7), 30px 0px 0px 0px rgba(255,255,255,0.9), 36px 0px 0px 0px rgba(255,255,255,1); opacity: 1; } } @-webkit-keyframes line_flow{ 0%{ width: 0px;} 100%{width: 40px;} } @-moz-keyframes line_flow{ 0%{ width: 0px;} 100%{width: 40px;} } @keyframes line_flow{ 0%{ width: 0px;} 100%{width: 40px;} } /* Me */ .aboutme{ width: 700px; padding: 50px 0; border-top: 2px rgba(255,255,255,0.03) solid; } .viduthalai{ background: url(../img/viduthalai.png) no-repeat; width: 100px; height: 100px; border-radius: 0 2px 2px 0; float: left; opacity: 0.5; } .viduthalai:hover{ opacity: 1; } .intro{ float: left; width: 400px; padding-left: 20px; color: rgba(255,255,255,0.5); } .intro a{ color: rgba(255,255,255,0.5); } .intro a:hover{ color: rgba(255,255,255,1); } .intro span, p{ font-size: 15px; font-weight: 200; } .intro h3{ font-size: 20px; font-weight: 200; margin: 0px; } .git{ color: rgba(255,255,255,0.5); float: right; text-align: right; padding: 10px 20px; border-radius: 2px; background-color: rgba(0,0,0,0.3); font-weight: 200; } .git:hover{ background-color: rgba(0,0,0,0.2); }</style></head><body> <div class="wrapper"> <h1>Loaders Kit</h1> <h2 class="cf">Single Element pure CSS Spinners & Loaders</h2> <div class="row cf"> <div class="span"> <div class="timer"></div> </div> <div class="span"> <div class="typing_loader"></div> </div> <div class="span"> <div class="location_indicator"></div> </div> <div class="span"> <div class="dashboard"></div> </div> </div> <div class="row cf"> <div class="span"> <div class="battery"></div> </div> <div class="span"> <div class="magnifier"></div> </div> <div class="span"> <div class="help"></div> </div> <div class="span"> <div class="cloud"></div> </div> </div> <div class="row cf"> <div class="span"> <div class="eye"></div> </div> <div class="span"> <div class="coffee_cup"></div> </div> <div class="span"> <div class="square"></div> </div> <div class="span"> <div class="circle"></div> </div> </div> </div> </body></html>

Related: See More


Questions / Comments: