<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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/joogl/pen/dXyNPM?limit=all&page=45&q=mobile" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic);
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
body {
margin: 0;
background: #eee;
font-family: "Roboto", sans-serif;
color: #333;
}
.container {
width: 700px;
margin: 0 auto;
padding: 0 32px;
box-sizing: border-box;
}
.card {
margin: 32px 0;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
background: white;
width: 100%;
min-height: 80px;
display: flex;
}
.card .icon-container {
width: 80px;
display: flex;
justify-content: space-around;
align-items: center;
}
.card .description {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
flex-grow: 1;
flex-basis: 0;
padding: 8px 8px 8px 0;
}
.card .description .name {
font-weight: bold;
font-size: 1.3em;
}
.card .description .name span {
font-size: .6em;
font-weight: normal;
font-style: italic;
color: #bbb;
}
.loading-icon {
border-radius: 50%;
width: 18px;
height: 18px;
border: 0.25rem solid #ddd;
border-top-color: #333;
display: inline-block;
margin: 0 8px;
-webkit-animation-name: spin;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.perpetuum-mobile {
-webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);
animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);
}
.impetus {
-webkit-animation-timing-function: cubic-bezier(0.5, -0.35, 0.5, 1.35);
animation-timing-function: cubic-bezier(0.5, -0.35, 0.5, 1.35);
}
.full-circle {
-webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}
.gravity {
-webkit-animation-timing-function: cubic-bezier(0.5, 0.8, 0.5, 0.2);
animation-timing-function: cubic-bezier(0.5, 0.8, 0.5, 0.2);
}
.overshot {
-webkit-animation-timing-function: cubic-bezier(0.65, 1.5, 0.6, 0.95);
animation-timing-function: cubic-bezier(0.65, 1.5, 0.6, 0.95);
}
.downhill {
-webkit-animation-timing-function: cubic-bezier(0.3, 0.1, 0.3, 0.85);
animation-timing-function: cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
.pendulum {
-webkit-animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65);
animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65);
}
.wtf {
-webkit-animation-timing-function: cubic-bezier(1, -2.3, 1, 2.5);
animation-timing-function: cubic-bezier(1, -2.3, 1, 2.5);
}
@media screen and (max-width: 700px) {
.container {
width: 100%;
}
}</style></head><body>
<!--
Credit where it's due:
Single div loader by @alanshortis
https://codepen.io/alanshortis/pen/eJLVXr
Material shadows
https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.igkgtj6vx
-->
<div class="container">
<div class="card">
<div class="icon-container">
<div class="loading-icon perpetuum-mobile"></div>
</div>
<div class="description">
<div class="name">Perpetuum Mobile</div>
<code>cubic-bezier(0.55, 0.15, 0.45, 0.85)</code>
</div>
</div>
<div class="card">
<div class="icon-container">
<div class="loading-icon impetus"></div>
</div>
<div class="description">
<div class="name">Impetus</div>
<code>cubic-bezier(0.5, -0.35, 0.5, 1.35)</code>
</div>
</div>
<div class="card">
<div class="icon-container">
<div class="loading-icon full-circle"></div>
</div>
<div class="description">
<div class="name">Full Circle</div>
<code>cubic-bezier(0.6, 0, 0.4, 1)</code>
</div>
</div>
<div class="card">
<div class="icon-container">
<div class="loading-icon gravity"></div>
</div>
<div class="description">
<div class="name">Gravity</div>
<code>cubic-bezier(0.5, 0.8, 0.5, 0.2)</code>
</div>
</div>
<div class="card">
<div class="icon-container">
<div class="loading-icon overshot"></div>
</div>
<div class="description">
<div class="name">Overshot</div>
<code>cubic-bezier(0.65, 1.5, 0.6, 0.95)</code>
</div>
</div>
<div class="card">
<div class="icon-container">
<div class="loading-icon downhill"></div>
</div>
<div class="description">
<div class="name">Downhill Is Always Easier</div>
<code>cubic-bezier(0.3, 0.1, 0.3, 0.85)</code>
</div>
</div>
<div class="card">
<div class="icon-container">
<div class="loading-icon pendulum"></div>
</div>
<div class="description">
<div class="name">Pendulum</div>
<code>cubic-bezier(0.3, 1.65, 0.7, -0.65)</code>
</div>
</div>
<div class="card">
<div class="icon-container">
<div class="loading-icon wtf"></div>
</div>
<div class="description">
<div class="name">WTF <span>don't actually use this one :P</span></div>
<code>cubic-bezier(1, -2.3, 1, 2.5)</code>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >// ¯\_| ಠ ∧ ಠ |_/¯
//# sourceURL=pen.js
</script>
</body></html>
