575 lines
24 KiB
HTML
575 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>
|
|
Ball Circus » 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 Circus » Load Awesome" />
|
|
<meta property="og:url" content="http://github.danielcardoso.net/load-awesome/animations/ball-circus.html" />
|
|
<meta property="og:title" content="Ball Circus » 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: #BDB6D4; color: #BDB6D4;">
|
|
<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 Circus <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-circus.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-circus.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-circus.html&text='Ball%20Circus'%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-circus.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-beat.html" class="la-docs-prev-next la-docs-goto-prev">
|
|
<i class="fa fa-angle-left"></i>
|
|
<span>Ball Beat</span>
|
|
</a>
|
|
<a href="ball-climbing-dot.html" class="la-docs-prev-next la-docs-goto-next">
|
|
<i class="fa fa-angle-right"></i>
|
|
<span>Ball Climbing Dot</span>
|
|
</a>
|
|
<div class="items showroom auto-height title">
|
|
<div class="item">
|
|
|
|
</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-circus la-dark la-sm">
|
|
<div></div>
|
|
<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-circus la-sm">
|
|
<div></div>
|
|
<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: #79bbb5" class="la-ball-circus la-sm">
|
|
<div></div>
|
|
<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-circus la-dark">
|
|
<div></div>
|
|
<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-circus">
|
|
<div></div>
|
|
<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: #98bff6" class="la-ball-circus">
|
|
<div></div>
|
|
<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-circus la-dark la-2x">
|
|
<div></div>
|
|
<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-circus la-2x">
|
|
<div></div>
|
|
<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: #64d6e2" class="la-ball-circus la-2x">
|
|
<div></div>
|
|
<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-circus la-dark la-3x">
|
|
<div></div>
|
|
<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-circus la-3x">
|
|
<div></div>
|
|
<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: #9784ed" class="la-ball-circus la-3x">
|
|
<div></div>
|
|
<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"><div class="la-ball-circus">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div></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 <@DanielCardoso>
|
|
* Licensed under MIT
|
|
*/
|
|
.la-ball-circus,
|
|
.la-ball-circus > div {
|
|
position: relative;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.la-ball-circus {
|
|
display: block;
|
|
font-size: 0;
|
|
color: #fff;
|
|
}
|
|
.la-ball-circus.la-dark {
|
|
color: #333;
|
|
}
|
|
.la-ball-circus > div {
|
|
display: inline-block;
|
|
float: none;
|
|
background-color: currentColor;
|
|
border: 0 solid currentColor;
|
|
}
|
|
.la-ball-circus {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.la-ball-circus > div {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
display: block;
|
|
width: 16px;
|
|
width: 100%;
|
|
height: 16px;
|
|
height: 100%;
|
|
border-radius: 100%;
|
|
opacity: .5;
|
|
-webkit-animation: ball-circus-position 2.5s infinite cubic-bezier(.25, 0, .75, 1), ball-circus-size 2.5s infinite cubic-bezier(.25, 0, .75, 1);
|
|
-moz-animation: ball-circus-position 2.5s infinite cubic-bezier(.25, 0, .75, 1), ball-circus-size 2.5s infinite cubic-bezier(.25, 0, .75, 1);
|
|
-o-animation: ball-circus-position 2.5s infinite cubic-bezier(.25, 0, .75, 1), ball-circus-size 2.5s infinite cubic-bezier(.25, 0, .75, 1);
|
|
animation: ball-circus-position 2.5s infinite cubic-bezier(.25, 0, .75, 1), ball-circus-size 2.5s infinite cubic-bezier(.25, 0, .75, 1);
|
|
}
|
|
.la-ball-circus > div:nth-child(1) {
|
|
-webkit-animation-delay: 0s, -.5s;
|
|
-moz-animation-delay: 0s, -.5s;
|
|
-o-animation-delay: 0s, -.5s;
|
|
animation-delay: 0s, -.5s;
|
|
}
|
|
.la-ball-circus > div:nth-child(2) {
|
|
-webkit-animation-delay: -.5s, -1s;
|
|
-moz-animation-delay: -.5s, -1s;
|
|
-o-animation-delay: -.5s, -1s;
|
|
animation-delay: -.5s, -1s;
|
|
}
|
|
.la-ball-circus > div:nth-child(3) {
|
|
-webkit-animation-delay: -1s, -1.5s;
|
|
-moz-animation-delay: -1s, -1.5s;
|
|
-o-animation-delay: -1s, -1.5s;
|
|
animation-delay: -1s, -1.5s;
|
|
}
|
|
.la-ball-circus > div:nth-child(4) {
|
|
-webkit-animation-delay: -1.5s, -2s;
|
|
-moz-animation-delay: -1.5s, -2s;
|
|
-o-animation-delay: -1.5s, -2s;
|
|
animation-delay: -1.5s, -2s;
|
|
}
|
|
.la-ball-circus > div:nth-child(5) {
|
|
-webkit-animation-delay: -2s, -2.5s;
|
|
-moz-animation-delay: -2s, -2.5s;
|
|
-o-animation-delay: -2s, -2.5s;
|
|
animation-delay: -2s, -2.5s;
|
|
}
|
|
.la-ball-circus.la-sm {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
.la-ball-circus.la-sm > div {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
.la-ball-circus.la-2x {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.la-ball-circus.la-2x > div {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.la-ball-circus.la-3x {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.la-ball-circus.la-3x > div {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
/*
|
|
* Animations
|
|
*/
|
|
@-webkit-keyframes ball-circus-position {
|
|
50% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
@-moz-keyframes ball-circus-position {
|
|
50% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
@-o-keyframes ball-circus-position {
|
|
50% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
@keyframes ball-circus-position {
|
|
50% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
@-webkit-keyframes ball-circus-size {
|
|
50% {
|
|
-webkit-transform: scale(.3, .3);
|
|
transform: scale(.3, .3);
|
|
}
|
|
}
|
|
@-moz-keyframes ball-circus-size {
|
|
50% {
|
|
-moz-transform: scale(.3, .3);
|
|
transform: scale(.3, .3);
|
|
}
|
|
}
|
|
@-o-keyframes ball-circus-size {
|
|
50% {
|
|
-o-transform: scale(.3, .3);
|
|
transform: scale(.3, .3);
|
|
}
|
|
}
|
|
@keyframes ball-circus-size {
|
|
50% {
|
|
-webkit-transform: scale(.3, .3);
|
|
-moz-transform: scale(.3, .3);
|
|
-o-transform: scale(.3, .3);
|
|
transform: scale(.3, .3);
|
|
}
|
|
}
|
|
</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> |