github
/
css3-anime
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
css3-anime/anime/loading/09/animations/ball-climbing-dot.html

740 lines
28 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
Ball Climbing Dot » Load Awesome
</title>
<meta name="description" content="An awesome collection of — Pure CSS — Loaders and Spinners">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Ball Climbing Dot » Load Awesome" />
<meta property="og:url" content="http://github.danielcardoso.net/load-awesome/animations/ball-climbing-dot.html" />
<meta property="og:title" content="Ball Climbing Dot » Load Awesome" />
<meta property="og:description" content="An awesome collection of — Pure CSS — Loaders and Spinners" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../assets/style.css" />
<link rel="stylesheet" type="text/css" href="../assets/loaders.css" />
</head>
<body>
<div class="wrapper nano" style="background-color: #3ccad1; color: #3ccad1;">
<div class="nano-content">
<!-- LOADERS_FORK_LINK -->
<header class="absolute">
<div class="la-docs-header-container">
<div class="left">
<h1 class="title">Load <span>Awesome</span></h1>
</div>
<div class="right text-right">
<!-- REMOVE_VIEW_HOME -->
<span class="buttongroup">
<a href="../" class="button button-circle">
Home
</a>
<a href="../animations.html" class="button button-circle active">
Animations
</a>
</span>
<!-- !REMOVE_VIEW_HOME -->
</div>
<div class="cf"></div>
</div>
</header>
<main class="la-docs-social-sharing-container">
<!-- REMOVE_VIEW_HOME -->
<div class="la-docs-info-container text-left" style="margin: 0; padding: 10px 0 0;">
<h2 class="title">Ball Climbing Dot <span>Awesome</span></h2>
</div>
<!-- !REMOVE_VIEW_HOME -->
<!-- SOCIAL_BUTTONS -->
<div class="social-sharing header__share-buttons" data-permalink="http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-climbing-dot.html" data-permalink-github="danielcardoso/load-awesome">
<small class="social-sharing-title">Share: </small>
<!-- https://developers.facebook.com/docs/plugins/share-button/ -->
<a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-climbing-dot.html" class="share-facebook">
<span class="fa fa-facebook"></span>
<span class="share-title">Share</span>
<span class="share-count">0</span>
</a>
<!-- https://dev.twitter.com/docs/intents -->
<a target="_blank" href="http://twitter.com/share?url=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-climbing-dot.html&amp;text='Ball%20Climbing%20Dot'%2C%20an%20awesome%20pure%20%23CSS%20%23Loader%20%23Animation" class="share-twitter">
<span class="fa fa-twitter"></span>
<span class="share-title">Tweet</span>
<span class="share-count">0</span>
</a>
<!-- https://developers.google.com/+/web/share/ -->
<a target="_blank" href="http://plus.google.com/share?url=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-climbing-dot.html" class="share-google">
<!-- Cannot get Google+ share count with JS yet -->
<span class="fa fa-google-plus"></span>
<span class="share-title">+1</span>
<span class="share-count">0</span>
</a>
<span>
<a class="twitter-follow-button" href="https://twitter.com/DanielCardoso" data-show-count="true" data-lang="en">
Follow @DanielCardoso
</a>
<script>
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
</span>
</div>
<!-- !SOCIAL_BUTTONS -->
</main>
<!-- REMOVE_VIEW_HOME -->
<main class="no-padding-bottom">
<a href="ball-circus.html" class="la-docs-prev-next la-docs-goto-prev">
<i class="fa fa-angle-left"></i>
<span>Ball Circus</span>
</a>
<a href="ball-clip-rotate.html" class="la-docs-prev-next la-docs-goto-next">
<i class="fa fa-angle-right"></i>
<span>Ball Clip Rotate</span>
</a>
<div class="items showroom auto-height title">
<div class="item">
&nbsp;
</div>
<div class="item bg-light">
<h2>Dark</h2>
</div>
<div class="item">
<h2>Normal</h2>
</div>
<div class="item bg-light">
<h2>Custom</h2>
</div>
</div>
<div class="items showroom auto-height">
<div class="item">
<h3>Small</h3>
</div>
<div class="item bg-light">
<div class="item-inner">
<div class="item-loader-container">
<div class="la-ball-climbing-dot la-dark la-sm">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-loader-container">
<div class="la-ball-climbing-dot la-sm">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
<div class="item bg-light">
<div class="item-inner">
<div class="item-loader-container">
<div style="color: #fec54f" class="la-ball-climbing-dot la-sm">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
</div>
<div class="items showroom auto-height">
<div class="item">
<h3>Default</h3>
</div>
<div class="item bg-light">
<div class="item-inner">
<div class="item-loader-container">
<div class="la-ball-climbing-dot la-dark">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-loader-container">
<div class="la-ball-climbing-dot">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
<div class="item bg-light">
<div class="item-inner">
<div class="item-loader-container">
<div style="color: #9988cd" class="la-ball-climbing-dot">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
</div>
<div class="items showroom auto-height">
<div class="item">
<h3>2X</h3>
</div>
<div class="item bg-light">
<div class="item-inner">
<div class="item-loader-container">
<div class="la-ball-climbing-dot la-dark la-2x">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-loader-container">
<div class="la-ball-climbing-dot la-2x">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
<div class="item bg-light">
<div class="item-inner">
<div class="item-loader-container">
<div style="color: #a09de5" class="la-ball-climbing-dot la-2x">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
</div>
<div class="items showroom auto-height">
<div class="item">
<h3>3X</h3>
</div>
<div class="item bg-light">
<div class="item-inner">
<div class="item-loader-container">
<div class="la-ball-climbing-dot la-dark la-3x">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-loader-container">
<div class="la-ball-climbing-dot la-3x">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
<div class="item bg-light">
<div class="item-inner">
<div class="item-loader-container">
<div style="color: #f4696b" class="la-ball-climbing-dot la-3x">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="item-title">
<button type="button" data-type="la-docs-modal-trigger">
<i class="fa fa-eye"></i>
View Source
</button>
</div>
</div>
</div>
</main>
<main class="configuration">
<h2>Usage</h2>
<h3>HTML</h3>
<pre><code class="language-markup">&lt;div class="la-ball-climbing-dot"&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h3>CSS</h3>
<pre><code class="language-css">/*!
* Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
* Copyright 2015 Daniel Cardoso &lt;@DanielCardoso&gt;
* Licensed under MIT
*/
.la-ball-climbing-dot,
.la-ball-climbing-dot &gt; div {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.la-ball-climbing-dot {
display: block;
font-size: 0;
color: #fff;
}
.la-ball-climbing-dot.la-dark {
color: #333;
}
.la-ball-climbing-dot &gt; div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.la-ball-climbing-dot {
width: 42px;
height: 32px;
}
.la-ball-climbing-dot &gt; div:nth-child(1) {
position: absolute;
bottom: 32%;
left: 18%;
width: 14px;
height: 14px;
border-radius: 100%;
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-ms-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation: ball-climbing-dot-jump .6s ease-in-out infinite;
-moz-animation: ball-climbing-dot-jump .6s ease-in-out infinite;
-o-animation: ball-climbing-dot-jump .6s ease-in-out infinite;
animation: ball-climbing-dot-jump .6s ease-in-out infinite;
}
.la-ball-climbing-dot &gt; div:not(:nth-child(1)) {
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 2px;
border-radius: 0;
-webkit-transform: translate(60%, 0);
-moz-transform: translate(60%, 0);
-ms-transform: translate(60%, 0);
-o-transform: translate(60%, 0);
transform: translate(60%, 0);
-webkit-animation: ball-climbing-dot-steps 1.8s linear infinite;
-moz-animation: ball-climbing-dot-steps 1.8s linear infinite;
-o-animation: ball-climbing-dot-steps 1.8s linear infinite;
animation: ball-climbing-dot-steps 1.8s linear infinite;
}
.la-ball-climbing-dot &gt; div:not(:nth-child(1)):nth-child(2) {
-webkit-animation-delay: 0ms;
-moz-animation-delay: 0ms;
-o-animation-delay: 0ms;
animation-delay: 0ms;
}
.la-ball-climbing-dot &gt; div:not(:nth-child(1)):nth-child(3) {
-webkit-animation-delay: -600ms;
-moz-animation-delay: -600ms;
-o-animation-delay: -600ms;
animation-delay: -600ms;
}
.la-ball-climbing-dot &gt; div:not(:nth-child(1)):nth-child(4) {
-webkit-animation-delay: -1200ms;
-moz-animation-delay: -1200ms;
-o-animation-delay: -1200ms;
animation-delay: -1200ms;
}
.la-ball-climbing-dot.la-sm {
width: 20px;
height: 16px;
}
.la-ball-climbing-dot.la-sm &gt; div:nth-child(1) {
width: 6px;
height: 6px;
}
.la-ball-climbing-dot.la-sm &gt; div:not(:nth-child(1)) {
width: 6px;
height: 1px;
}
.la-ball-climbing-dot.la-2x {
width: 84px;
height: 64px;
}
.la-ball-climbing-dot.la-2x &gt; div:nth-child(1) {
width: 28px;
height: 28px;
}
.la-ball-climbing-dot.la-2x &gt; div:not(:nth-child(1)) {
width: 28px;
height: 4px;
}
.la-ball-climbing-dot.la-3x {
width: 126px;
height: 96px;
}
.la-ball-climbing-dot.la-3x &gt; div:nth-child(1) {
width: 42px;
height: 42px;
}
.la-ball-climbing-dot.la-3x &gt; div:not(:nth-child(1)) {
width: 42px;
height: 6px;
}
/*
* Animations
*/
@-webkit-keyframes ball-climbing-dot-jump {
0% {
-webkit-transform: scale(1, .7);
transform: scale(1, .7);
}
20% {
-webkit-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
40% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
bottom: 125%;
}
46% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-webkit-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
90% {
-webkit-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
100% {
-webkit-transform: scale(1, .7);
transform: scale(1, .7);
}
}
@-moz-keyframes ball-climbing-dot-jump {
0% {
-moz-transform: scale(1, .7);
transform: scale(1, .7);
}
20% {
-moz-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
40% {
-moz-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
bottom: 125%;
}
46% {
-moz-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-moz-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
90% {
-moz-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
100% {
-moz-transform: scale(1, .7);
transform: scale(1, .7);
}
}
@-o-keyframes ball-climbing-dot-jump {
0% {
-o-transform: scale(1, .7);
transform: scale(1, .7);
}
20% {
-o-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
40% {
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
bottom: 125%;
}
46% {
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-o-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
90% {
-o-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
100% {
-o-transform: scale(1, .7);
transform: scale(1, .7);
}
}
@keyframes ball-climbing-dot-jump {
0% {
-webkit-transform: scale(1, .7);
-moz-transform: scale(1, .7);
-o-transform: scale(1, .7);
transform: scale(1, .7);
}
20% {
-webkit-transform: scale(.7, 1.2);
-moz-transform: scale(.7, 1.2);
-o-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
40% {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
bottom: 125%;
}
46% {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
-webkit-transform: scale(.7, 1.2);
-moz-transform: scale(.7, 1.2);
-o-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
90% {
-webkit-transform: scale(.7, 1.2);
-moz-transform: scale(.7, 1.2);
-o-transform: scale(.7, 1.2);
transform: scale(.7, 1.2);
}
100% {
-webkit-transform: scale(1, .7);
-moz-transform: scale(1, .7);
-o-transform: scale(1, .7);
transform: scale(1, .7);
}
}
@-webkit-keyframes ball-climbing-dot-steps {
0% {
top: 0;
right: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100%;
right: 100%;
opacity: 0;
}
}
@-moz-keyframes ball-climbing-dot-steps {
0% {
top: 0;
right: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100%;
right: 100%;
opacity: 0;
}
}
@-o-keyframes ball-climbing-dot-steps {
0% {
top: 0;
right: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100%;
right: 100%;
opacity: 0;
}
}
@keyframes ball-climbing-dot-steps {
0% {
top: 0;
right: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100%;
right: 100%;
opacity: 0;
}
}
</code></pre>
</main>
<!-- !REMOVE_VIEW_HOME -->
<main class="la-docs-footer">
<footer>
<ul class="la-docs-footer-links">
<li>
Load Awesome 1.1.0
</li>
<li>·</li>
<li>Created by <a href="https://twitter.com/DanielCardoso" target="_blank">@DanielCardoso</a></li>
<li>·</li>
<li>Licensed under
<a rel="license" href="https://github.com/danielcardoso/load-awesome/blob/master/LICENSE" target="_blank">
MIT
</a>
</li>
</ul>
<ul class="la-docs-footer-links">
<li><a href="https://github.com/danielcardoso/load-awesome" target="_blank">GitHub Project</a></li>
<li>·</li>
<li><a href="https://github.com/danielcardoso/load-awesome/blob/master/CHANGELOG" target="_blank">Changelog</a></li>
<li>·</li>
<li><a href="https://github.com/danielcardoso/load-awesome/issues" target="_blank">Issues</a></li>
<li>·</li>
<li><a href="https://github.com/danielcardoso/load-awesome/releases" target="_blank">Releases</a></li>
</ul>
</footer>
</main>
</div>
</div>
<!-- REMOVE_VIEW_HOME -->
<div class="la-docs-modal">
<div class="la-docs-modal-body">
<h3>HTML Markup</h3>
<div class="la-docs-modal-content"></div>
<button type="button" class="la-docs-modal-close">Close Me!</button>
</div>
</div>
<div class="la-docs-modal-dropdown"></div>
<!-- !REMOVE_VIEW_HOME -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../assets/plugins.min.js"></script>
<script src="../assets/script.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink