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

561 lines
24 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 Clip Rotate Multiple » 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 Clip Rotate Multiple » Load Awesome" />
<meta property="og:url" content="http://github.danielcardoso.net/load-awesome/animations/ball-clip-rotate-multiple.html" />
<meta property="og:title" content="Ball Clip Rotate Multiple » 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: #87c4a3; color: #87c4a3;">
<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 Clip Rotate Multiple <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-clip-rotate-multiple.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-clip-rotate-multiple.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-clip-rotate-multiple.html&amp;text='Ball%20Clip%20Rotate%20Multiple'%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-clip-rotate-multiple.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-clip-rotate.html" class="la-docs-prev-next la-docs-goto-prev">
<i class="fa fa-angle-left"></i>
<span>Ball Clip Rotate</span>
</a>
<a href="ball-clip-rotate-pulse.html" class="la-docs-prev-next la-docs-goto-next">
<i class="fa fa-angle-right"></i>
<span>Ball Clip Rotate Pulse</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-clip-rotate-multiple la-dark la-sm">
<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-clip-rotate-multiple la-sm">
<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: #e794ae" class="la-ball-clip-rotate-multiple la-sm">
<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-clip-rotate-multiple la-dark">
<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-clip-rotate-multiple">
<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: #63c5ab" class="la-ball-clip-rotate-multiple">
<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-clip-rotate-multiple la-dark la-2x">
<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-clip-rotate-multiple la-2x">
<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: #BDB6D4" class="la-ball-clip-rotate-multiple la-2x">
<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-clip-rotate-multiple la-dark la-3x">
<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-clip-rotate-multiple la-3x">
<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-clip-rotate-multiple la-3x">
<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-clip-rotate-multiple"&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-clip-rotate-multiple,
.la-ball-clip-rotate-multiple &gt; div {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.la-ball-clip-rotate-multiple {
display: block;
font-size: 0;
color: #fff;
}
.la-ball-clip-rotate-multiple.la-dark {
color: #333;
}
.la-ball-clip-rotate-multiple &gt; div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.la-ball-clip-rotate-multiple {
width: 32px;
height: 32px;
}
.la-ball-clip-rotate-multiple &gt; div {
position: absolute;
top: 50%;
left: 50%;
background: transparent;
border-style: solid;
border-width: 2px;
border-radius: 100%;
-webkit-animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
-moz-animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
-o-animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
}
.la-ball-clip-rotate-multiple &gt; div:first-child {
position: absolute;
width: 32px;
height: 32px;
border-right-color: transparent;
border-left-color: transparent;
}
.la-ball-clip-rotate-multiple &gt; div:last-child {
width: 16px;
height: 16px;
border-top-color: transparent;
border-bottom-color: transparent;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
-o-animation-direction: reverse;
animation-direction: reverse;
}
.la-ball-clip-rotate-multiple.la-sm {
width: 16px;
height: 16px;
}
.la-ball-clip-rotate-multiple.la-sm &gt; div {
border-width: 1px;
}
.la-ball-clip-rotate-multiple.la-sm &gt; div:first-child {
width: 16px;
height: 16px;
}
.la-ball-clip-rotate-multiple.la-sm &gt; div:last-child {
width: 8px;
height: 8px;
}
.la-ball-clip-rotate-multiple.la-2x {
width: 64px;
height: 64px;
}
.la-ball-clip-rotate-multiple.la-2x &gt; div {
border-width: 4px;
}
.la-ball-clip-rotate-multiple.la-2x &gt; div:first-child {
width: 64px;
height: 64px;
}
.la-ball-clip-rotate-multiple.la-2x &gt; div:last-child {
width: 32px;
height: 32px;
}
.la-ball-clip-rotate-multiple.la-3x {
width: 96px;
height: 96px;
}
.la-ball-clip-rotate-multiple.la-3x &gt; div {
border-width: 6px;
}
.la-ball-clip-rotate-multiple.la-3x &gt; div:first-child {
width: 96px;
height: 96px;
}
.la-ball-clip-rotate-multiple.la-3x &gt; div:last-child {
width: 48px;
height: 48px;
}
/*
* Animation
*/
@-webkit-keyframes ball-clip-rotate-multiple-rotate {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@-moz-keyframes ball-clip-rotate-multiple-rotate {
0% {
-moz-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
-moz-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
-moz-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@-o-keyframes ball-clip-rotate-multiple-rotate {
0% {
-o-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
-o-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
-o-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes ball-clip-rotate-multiple-rotate {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
-moz-transform: translate(-50%, -50%) rotate(0deg);
-o-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
-moz-transform: translate(-50%, -50%) rotate(180deg);
-o-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
-moz-transform: translate(-50%, -50%) rotate(360deg);
-o-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
</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