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

658 lines
27 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 Square Spin » 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 Square Spin » Load Awesome" />
<meta property="og:url" content="http://github.danielcardoso.net/load-awesome/animations/ball-square-spin.html" />
<meta property="og:title" content="Ball Square Spin » 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: #9988cd; color: #9988cd;">
<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 Square Spin <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-square-spin.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-square-spin.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-square-spin.html&amp;text='Ball%20Square%20Spin'%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-square-spin.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-square-clockwise-spin.html" class="la-docs-prev-next la-docs-goto-prev">
<i class="fa fa-angle-left"></i>
<span>Ball Square Clockwise Spin</span>
</a>
<a href="ball-triangle-path.html" class="la-docs-prev-next la-docs-goto-next">
<i class="fa fa-angle-right"></i>
<span>Ball Triangle Path</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-square-spin la-dark la-sm">
<div></div>
<div></div>
<div></div>
<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-square-spin la-sm">
<div></div>
<div></div>
<div></div>
<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: #fec54f" class="la-ball-square-spin la-sm">
<div></div>
<div></div>
<div></div>
<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-square-spin la-dark">
<div></div>
<div></div>
<div></div>
<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-square-spin">
<div></div>
<div></div>
<div></div>
<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: #dfbc94" class="la-ball-square-spin">
<div></div>
<div></div>
<div></div>
<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-square-spin la-dark la-2x">
<div></div>
<div></div>
<div></div>
<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-square-spin la-2x">
<div></div>
<div></div>
<div></div>
<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: #87c4a3" class="la-ball-square-spin la-2x">
<div></div>
<div></div>
<div></div>
<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-square-spin la-dark la-3x">
<div></div>
<div></div>
<div></div>
<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-square-spin la-3x">
<div></div>
<div></div>
<div></div>
<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: #9988cd" class="la-ball-square-spin la-3x">
<div></div>
<div></div>
<div></div>
<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">&lt;div class="la-ball-square-spin"&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;&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-square-spin,
.la-ball-square-spin &gt; div {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.la-ball-square-spin {
display: block;
font-size: 0;
color: #fff;
}
.la-ball-square-spin.la-dark {
color: #333;
}
.la-ball-square-spin &gt; div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.la-ball-square-spin {
width: 26px;
height: 26px;
}
.la-ball-square-spin &gt; div {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
margin-left: -6px;
border-radius: 100%;
-webkit-animation: ball-square-spin 1s infinite ease-in-out;
-moz-animation: ball-square-spin 1s infinite ease-in-out;
-o-animation: ball-square-spin 1s infinite ease-in-out;
animation: ball-square-spin 1s infinite ease-in-out;
}
.la-ball-square-spin &gt; div:nth-child(1) {
top: 0;
left: 0;
-webkit-animation-delay: -1.125s;
-moz-animation-delay: -1.125s;
-o-animation-delay: -1.125s;
animation-delay: -1.125s;
}
.la-ball-square-spin &gt; div:nth-child(2) {
top: 0;
left: 50%;
-webkit-animation-delay: -1.25s;
-moz-animation-delay: -1.25s;
-o-animation-delay: -1.25s;
animation-delay: -1.25s;
}
.la-ball-square-spin &gt; div:nth-child(3) {
top: 0;
left: 100%;
-webkit-animation-delay: -1.375s;
-moz-animation-delay: -1.375s;
-o-animation-delay: -1.375s;
animation-delay: -1.375s;
}
.la-ball-square-spin &gt; div:nth-child(4) {
top: 50%;
left: 100%;
-webkit-animation-delay: -1.5s;
-moz-animation-delay: -1.5s;
-o-animation-delay: -1.5s;
animation-delay: -1.5s;
}
.la-ball-square-spin &gt; div:nth-child(5) {
top: 100%;
left: 100%;
-webkit-animation-delay: -1.625s;
-moz-animation-delay: -1.625s;
-o-animation-delay: -1.625s;
animation-delay: -1.625s;
}
.la-ball-square-spin &gt; div:nth-child(6) {
top: 100%;
left: 50%;
-webkit-animation-delay: -1.75s;
-moz-animation-delay: -1.75s;
-o-animation-delay: -1.75s;
animation-delay: -1.75s;
}
.la-ball-square-spin &gt; div:nth-child(7) {
top: 100%;
left: 0;
-webkit-animation-delay: -1.875s;
-moz-animation-delay: -1.875s;
-o-animation-delay: -1.875s;
animation-delay: -1.875s;
}
.la-ball-square-spin &gt; div:nth-child(8) {
top: 50%;
left: 0;
-webkit-animation-delay: -2s;
-moz-animation-delay: -2s;
-o-animation-delay: -2s;
animation-delay: -2s;
}
.la-ball-square-spin.la-sm {
width: 12px;
height: 12px;
}
.la-ball-square-spin.la-sm &gt; div {
width: 6px;
height: 6px;
margin-top: -3px;
margin-left: -3px;
}
.la-ball-square-spin.la-2x {
width: 52px;
height: 52px;
}
.la-ball-square-spin.la-2x &gt; div {
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
.la-ball-square-spin.la-3x {
width: 78px;
height: 78px;
}
.la-ball-square-spin.la-3x &gt; div {
width: 36px;
height: 36px;
margin-top: -18px;
margin-left: -18px;
}
/*
* Animation
*/
@-webkit-keyframes ball-square-spin {
0%,
40%,
100% {
-webkit-transform: scale(.4);
transform: scale(.4);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes ball-square-spin {
0%,
40%,
100% {
-moz-transform: scale(.4);
transform: scale(.4);
}
70% {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes ball-square-spin {
0%,
40%,
100% {
-o-transform: scale(.4);
transform: scale(.4);
}
70% {
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes ball-square-spin {
0%,
40%,
100% {
-webkit-transform: scale(.4);
-moz-transform: scale(.4);
-o-transform: scale(.4);
transform: scale(.4);
}
70% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
</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