github
/
css3-anime
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
css3-anime/anime/loading/09/animations/line-spin-clockwise-fade-ro...

707 lines
30 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>
Line Spin Clockwise Fade Rotating » 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="Line Spin Clockwise Fade Rotating » Load Awesome" />
<meta property="og:url" content="http://github.danielcardoso.net/load-awesome/animations/line-spin-clockwise-fade-rotating.html" />
<meta property="og:title" content="Line Spin Clockwise Fade Rotating » 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: #9787ea; color: #9787ea;">
<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">Line Spin Clockwise Fade Rotating <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%2Fline-spin-clockwise-fade-rotating.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%2Fline-spin-clockwise-fade-rotating.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%2Fline-spin-clockwise-fade-rotating.html&amp;text='Line%20Spin%20Clockwise%20Fade%20Rotating'%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%2Fline-spin-clockwise-fade-rotating.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="line-spin-clockwise-fade.html" class="la-docs-prev-next la-docs-goto-prev">
<i class="fa fa-angle-left"></i>
<span>Line Spin Clockwise Fade</span>
</a>
<a href="line-spin-fade.html" class="la-docs-prev-next la-docs-goto-next">
<i class="fa fa-angle-right"></i>
<span>Line Spin Fade</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-line-spin-clockwise-fade-rotating 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-line-spin-clockwise-fade-rotating 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: #e794ae" class="la-line-spin-clockwise-fade-rotating 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-line-spin-clockwise-fade-rotating 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-line-spin-clockwise-fade-rotating">
<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: #a09de5" class="la-line-spin-clockwise-fade-rotating">
<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-line-spin-clockwise-fade-rotating 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-line-spin-clockwise-fade-rotating 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: #ef9f64" class="la-line-spin-clockwise-fade-rotating 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-line-spin-clockwise-fade-rotating 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-line-spin-clockwise-fade-rotating 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: #9787ea" class="la-line-spin-clockwise-fade-rotating 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-line-spin-clockwise-fade-rotating"&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-line-spin-clockwise-fade-rotating,
.la-line-spin-clockwise-fade-rotating &gt; div {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.la-line-spin-clockwise-fade-rotating {
display: block;
font-size: 0;
color: #fff;
}
.la-line-spin-clockwise-fade-rotating.la-dark {
color: #333;
}
.la-line-spin-clockwise-fade-rotating &gt; div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.la-line-spin-clockwise-fade-rotating {
width: 32px;
height: 32px;
-webkit-animation: line-spin-clockwise-fade-rotating-rotate 6s infinite linear;
-moz-animation: line-spin-clockwise-fade-rotating-rotate 6s infinite linear;
-o-animation: line-spin-clockwise-fade-rotating-rotate 6s infinite linear;
animation: line-spin-clockwise-fade-rotating-rotate 6s infinite linear;
}
.la-line-spin-clockwise-fade-rotating &gt; div {
position: absolute;
width: 2px;
height: 10px;
margin: 2px;
margin-top: -5px;
margin-left: -1px;
border-radius: 0;
-webkit-animation: line-spin-clockwise-fade-rotating 1s infinite ease-in-out;
-moz-animation: line-spin-clockwise-fade-rotating 1s infinite ease-in-out;
-o-animation: line-spin-clockwise-fade-rotating 1s infinite ease-in-out;
animation: line-spin-clockwise-fade-rotating 1s infinite ease-in-out;
}
.la-line-spin-clockwise-fade-rotating &gt; div:nth-child(1) {
top: 15%;
left: 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-delay: -.875s;
-moz-animation-delay: -.875s;
-o-animation-delay: -.875s;
animation-delay: -.875s;
}
.la-line-spin-clockwise-fade-rotating &gt; div:nth-child(2) {
top: 25.2512626585%;
left: 74.7487373415%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation-delay: -.75s;
-moz-animation-delay: -.75s;
-o-animation-delay: -.75s;
animation-delay: -.75s;
}
.la-line-spin-clockwise-fade-rotating &gt; div:nth-child(3) {
top: 50%;
left: 85%;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation-delay: -.625s;
-moz-animation-delay: -.625s;
-o-animation-delay: -.625s;
animation-delay: -.625s;
}
.la-line-spin-clockwise-fade-rotating &gt; div:nth-child(4) {
top: 74.7487373415%;
left: 74.7487373415%;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-animation-delay: -.5s;
-moz-animation-delay: -.5s;
-o-animation-delay: -.5s;
animation-delay: -.5s;
}
.la-line-spin-clockwise-fade-rotating &gt; div:nth-child(5) {
top: 84.9999999974%;
left: 50.0000000004%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation-delay: -.375s;
-moz-animation-delay: -.375s;
-o-animation-delay: -.375s;
animation-delay: -.375s;
}
.la-line-spin-clockwise-fade-rotating &gt; div:nth-child(6) {
top: 74.7487369862%;
left: 25.2512627193%;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
-webkit-animation-delay: -.25s;
-moz-animation-delay: -.25s;
-o-animation-delay: -.25s;
animation-delay: -.25s;
}
.la-line-spin-clockwise-fade-rotating &gt; div:nth-child(7) {
top: 49.9999806189%;
left: 15.0000039834%;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-animation-delay: -.125s;
-moz-animation-delay: -.125s;
-o-animation-delay: -.125s;
animation-delay: -.125s;
}
.la-line-spin-clockwise-fade-rotating &gt; div:nth-child(8) {
top: 25.2506949798%;
left: 25.2513989292%;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
.la-line-spin-clockwise-fade-rotating.la-sm {
width: 16px;
height: 16px;
}
.la-line-spin-clockwise-fade-rotating.la-sm &gt; div {
width: 1px;
height: 4px;
margin-top: -2px;
margin-left: 0;
}
.la-line-spin-clockwise-fade-rotating.la-2x {
width: 64px;
height: 64px;
}
.la-line-spin-clockwise-fade-rotating.la-2x &gt; div {
width: 4px;
height: 20px;
margin-top: -10px;
margin-left: -2px;
}
.la-line-spin-clockwise-fade-rotating.la-3x {
width: 96px;
height: 96px;
}
.la-line-spin-clockwise-fade-rotating.la-3x &gt; div {
width: 6px;
height: 30px;
margin-top: -15px;
margin-left: -3px;
}
/*
* Animations
*/
@-webkit-keyframes line-spin-clockwise-fade-rotating-rotate {
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-moz-keyframes line-spin-clockwise-fade-rotating-rotate {
100% {
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-o-keyframes line-spin-clockwise-fade-rotating-rotate {
100% {
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes line-spin-clockwise-fade-rotating-rotate {
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes line-spin-clockwise-fade-rotating {
50% {
opacity: .2;
}
100% {
opacity: 1;
}
}
@-moz-keyframes line-spin-clockwise-fade-rotating {
50% {
opacity: .2;
}
100% {
opacity: 1;
}
}
@-o-keyframes line-spin-clockwise-fade-rotating {
50% {
opacity: .2;
}
100% {
opacity: 1;
}
}
@keyframes line-spin-clockwise-fade-rotating {
50% {
opacity: .2;
}
100% {
opacity: 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