From 915b50a753da202596ec1f92cbb973b6d2cf3763 Mon Sep 17 00:00:00 2001 From: Elijah Madden Date: Wed, 14 Dec 2016 10:47:46 +0900 Subject: [PATCH 1/2] Animations that use only one child-div will hide any extra child-divs. --- css/ball-scale-ripple.css | 4 ++++ css/ball-scale-ripple.min.css | 3 +-- css/ball-scale.css | 4 ++++ css/ball-scale.min.css | 3 +-- css/square-spin.css | 4 ++++ css/square-spin.min.css | 3 +-- css/timer.css | 4 ++++ css/timer.min.css | 3 +-- css/triangle-skew-spin.css | 4 ++++ css/triangle-skew-spin.min.css | 3 +-- 10 files changed, 25 insertions(+), 10 deletions(-) diff --git a/css/ball-scale-ripple.css b/css/ball-scale-ripple.css index 58db0d2..3d162e2 100644 --- a/css/ball-scale-ripple.css +++ b/css/ball-scale-ripple.css @@ -11,6 +11,10 @@ box-sizing: border-box; } +.la-ball-scale-ripple > div:not(:first-child) { + display: none; +} + .la-ball-scale-ripple { display: block; font-size: 0; diff --git a/css/ball-scale-ripple.min.css b/css/ball-scale-ripple.min.css index 7451039..50333e1 100644 --- a/css/ball-scale-ripple.min.css +++ b/css/ball-scale-ripple.min.css @@ -2,5 +2,4 @@ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT - */ -.la-ball-scale-ripple,.la-ball-scale-ripple>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-scale-ripple{display:block;font-size:0;color:#fff}.la-ball-scale-ripple.la-dark{color:#333}.la-ball-scale-ripple>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-scale-ripple{width:32px;height:32px}.la-ball-scale-ripple>div{width:32px;height:32px;background:transparent;border-width:2px;border-radius:100%;opacity:0;-webkit-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);-moz-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);-o-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);animation:ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8)}.la-ball-scale-ripple.la-sm{width:16px;height:16px}.la-ball-scale-ripple.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-scale-ripple.la-2x{width:64px;height:64px}.la-ball-scale-ripple.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-scale-ripple.la-3x{width:96px;height:96px}.la-ball-scale-ripple.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-scale-ripple{0%{opacity:1;-webkit-transform:scale(0.1);transform:scale(0.1)}70%{opacity:.65;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0}}@-moz-keyframes ball-scale-ripple{0%{opacity:1;-moz-transform:scale(0.1);transform:scale(0.1)}70%{opacity:.65;-moz-transform:scale(1);transform:scale(1)}100%{opacity:0}}@-o-keyframes ball-scale-ripple{0%{opacity:1;-o-transform:scale(0.1);transform:scale(0.1)}70%{opacity:.65;-o-transform:scale(1);transform:scale(1)}100%{opacity:0}}@keyframes ball-scale-ripple{0%{opacity:1;-webkit-transform:scale(0.1);-moz-transform:scale(0.1);-o-transform:scale(0.1);transform:scale(0.1)}70%{opacity:.65;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{opacity:0}} + */.la-ball-scale-ripple,.la-ball-scale-ripple>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-scale-ripple>div:not(:first-child){display:none}.la-ball-scale-ripple{display:block;font-size:0;color:#fff}.la-ball-scale-ripple.la-dark{color:#333}.la-ball-scale-ripple>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-scale-ripple{width:32px;height:32px}.la-ball-scale-ripple>div{width:32px;height:32px;background:transparent;border-width:2px;border-radius:100%;opacity:0;-webkit-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);-moz-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);-o-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8)}.la-ball-scale-ripple.la-sm{width:16px;height:16px}.la-ball-scale-ripple.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-scale-ripple.la-2x{width:64px;height:64px}.la-ball-scale-ripple.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-scale-ripple.la-3x{width:96px;height:96px}.la-ball-scale-ripple.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-scale-ripple{0%{opacity:1;-webkit-transform:scale(.1);transform:scale(.1)}70%{opacity:.65;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0}}@-moz-keyframes ball-scale-ripple{0%{opacity:1;-moz-transform:scale(.1);transform:scale(.1)}70%{opacity:.65;-moz-transform:scale(1);transform:scale(1)}100%{opacity:0}}@-o-keyframes ball-scale-ripple{0%{opacity:1;-o-transform:scale(.1);transform:scale(.1)}70%{opacity:.65;-o-transform:scale(1);transform:scale(1)}100%{opacity:0}}@keyframes ball-scale-ripple{0%{opacity:1;-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);transform:scale(.1)}70%{opacity:.65;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{opacity:0}} diff --git a/css/ball-scale.css b/css/ball-scale.css index 0699aaf..9c5ac01 100644 --- a/css/ball-scale.css +++ b/css/ball-scale.css @@ -11,6 +11,10 @@ box-sizing: border-box; } +.la-ball-scale > div:not(:first-child) { + display: none; +} + .la-ball-scale { display: block; font-size: 0; diff --git a/css/ball-scale.min.css b/css/ball-scale.min.css index 23fbc6e..7d13f9d 100644 --- a/css/ball-scale.min.css +++ b/css/ball-scale.min.css @@ -2,5 +2,4 @@ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT - */ -.la-ball-scale,.la-ball-scale>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-scale{display:block;font-size:0;color:#fff}.la-ball-scale.la-dark{color:#333}.la-ball-scale>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-scale{width:32px;height:32px}.la-ball-scale>div{width:32px;height:32px;border-radius:100%;opacity:0;-webkit-animation:ball-scale 1s 0s ease-in-out infinite;-moz-animation:ball-scale 1s 0s ease-in-out infinite;-o-animation:ball-scale 1s 0s ease-in-out infinite;animation:ball-scale 1s 0s ease-in-out infinite}.la-ball-scale.la-sm{width:16px;height:16px}.la-ball-scale.la-sm>div{width:16px;height:16px}.la-ball-scale.la-2x{width:64px;height:64px}.la-ball-scale.la-2x>div{width:64px;height:64px}.la-ball-scale.la-3x{width:96px;height:96px}.la-ball-scale.la-3x>div{width:96px;height:96px}@-webkit-keyframes ball-scale{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}100%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-scale{0%{opacity:1;-moz-transform:scale(0);transform:scale(0)}100%{opacity:0;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-scale{0%{opacity:1;-o-transform:scale(0);transform:scale(0)}100%{opacity:0;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-scale{0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{opacity:0;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}} + */.la-ball-scale,.la-ball-scale>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-scale>div:not(:first-child){display:none}.la-ball-scale{display:block;font-size:0;color:#fff}.la-ball-scale.la-dark{color:#333}.la-ball-scale>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-scale{width:32px;height:32px}.la-ball-scale>div{width:32px;height:32px;border-radius:100%;opacity:0;-webkit-animation:ball-scale 1s 0s ease-in-out infinite;-moz-animation:ball-scale 1s 0s ease-in-out infinite;-o-animation:ball-scale 1s 0s ease-in-out infinite;animation:ball-scale 1s 0s ease-in-out infinite}.la-ball-scale.la-sm{width:16px;height:16px}.la-ball-scale.la-sm>div{width:16px;height:16px}.la-ball-scale.la-2x{width:64px;height:64px}.la-ball-scale.la-2x>div{width:64px;height:64px}.la-ball-scale.la-3x{width:96px;height:96px}.la-ball-scale.la-3x>div{width:96px;height:96px}@-webkit-keyframes ball-scale{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}100%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-scale{0%{opacity:1;-moz-transform:scale(0);transform:scale(0)}100%{opacity:0;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-scale{0%{opacity:1;-o-transform:scale(0);transform:scale(0)}100%{opacity:0;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-scale{0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{opacity:0;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}} diff --git a/css/square-spin.css b/css/square-spin.css index 0b43aa4..ef6f8ec 100644 --- a/css/square-spin.css +++ b/css/square-spin.css @@ -11,6 +11,10 @@ box-sizing: border-box; } +.la-square-spin > div:not(:first-child) { + display: none; +} + .la-square-spin { display: block; font-size: 0; diff --git a/css/square-spin.min.css b/css/square-spin.min.css index 0b55c2d..cdff384 100644 --- a/css/square-spin.min.css +++ b/css/square-spin.min.css @@ -2,5 +2,4 @@ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT - */ -.la-square-spin,.la-square-spin>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-square-spin{display:block;font-size:0;color:#fff}.la-square-spin.la-dark{color:#333}.la-square-spin>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-square-spin{width:32px;height:32px}.la-square-spin>div{width:100%;height:100%;border-radius:0;-webkit-animation:square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;-moz-animation:square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;-o-animation:square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;animation:square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite}.la-square-spin.la-sm{width:16px;height:16px}.la-square-spin.la-2x{width:64px;height:64px}.la-square-spin.la-3x{width:96px;height:96px}@-webkit-keyframes square-spin{0%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}}@-moz-keyframes square-spin{0%{-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-moz-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}}@-o-keyframes square-spin{0%{transform:perspective(100px) rotateX(0) rotateY(0)}25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{transform:perspective(100px) rotateX(0) rotateY(360deg)}}@keyframes square-spin{0%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(360deg);-moz-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}} + */.la-square-spin,.la-square-spin>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-square-spin>div:not(:first-child){display:none}.la-square-spin{display:block;font-size:0;color:#fff}.la-square-spin.la-dark{color:#333}.la-square-spin>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-square-spin{width:32px;height:32px}.la-square-spin>div{width:100%;height:100%;border-radius:0;-webkit-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;-moz-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;-o-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}.la-square-spin.la-sm{width:16px;height:16px}.la-square-spin.la-2x{width:64px;height:64px}.la-square-spin.la-3x{width:96px;height:96px}@-webkit-keyframes square-spin{0%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}}@-moz-keyframes square-spin{0%{-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-moz-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}}@-o-keyframes square-spin{0%{transform:perspective(100px) rotateX(0) rotateY(0)}25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{transform:perspective(100px) rotateX(0) rotateY(360deg)}}@keyframes square-spin{0%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(360deg);-moz-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}} diff --git a/css/timer.css b/css/timer.css index 2bf4fab..8ecca37 100644 --- a/css/timer.css +++ b/css/timer.css @@ -11,6 +11,10 @@ box-sizing: border-box; } +.la-timer > div:not(:first-child) { + display: none; +} + .la-timer { display: block; font-size: 0; diff --git a/css/timer.min.css b/css/timer.min.css index 32147b3..6db5ade 100644 --- a/css/timer.min.css +++ b/css/timer.min.css @@ -2,5 +2,4 @@ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT - */ -.la-timer,.la-timer>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-timer{display:block;font-size:0;color:#fff}.la-timer.la-dark{color:#333}.la-timer>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-timer{width:32px;height:32px}.la-timer>div{width:32px;height:32px;background:transparent;border-width:2px;border-radius:100%}.la-timer>div:before,.la-timer>div:after{position:absolute;top:14px;left:14px;display:block;width:2px;margin-top:-1px;margin-left:-1px;content:"";background:currentColor;border-radius:2px;-webkit-transform-origin:1px 1px 0;-moz-transform-origin:1px 1px 0;-ms-transform-origin:1px 1px 0;-o-transform-origin:1px 1px 0;transform-origin:1px 1px 0;-webkit-animation:timer-loader 1250ms infinite linear;-moz-animation:timer-loader 1250ms infinite linear;-o-animation:timer-loader 1250ms infinite linear;animation:timer-loader 1250ms infinite linear;-webkit-animation-delay:-625ms;-moz-animation-delay:-625ms;-o-animation-delay:-625ms;animation-delay:-625ms}.la-timer>div:before{height:12px}.la-timer>div:after{height:8px;-webkit-animation-duration:15s;-moz-animation-duration:15s;-o-animation-duration:15s;animation-duration:15s;-webkit-animation-delay:-7.5s;-moz-animation-delay:-7.5s;-o-animation-delay:-7.5s;animation-delay:-7.5s}.la-timer.la-sm{width:16px;height:16px}.la-timer.la-sm>div{width:16px;height:16px;border-width:1px}.la-timer.la-sm>div:before,.la-timer.la-sm>div:after{top:7px;left:7px;width:1px;margin-top:-.5px;margin-left:-.5px;border-radius:1px;-webkit-transform-origin:0.5px 0.5px 0;-moz-transform-origin:0.5px 0.5px 0;-ms-transform-origin:0.5px 0.5px 0;-o-transform-origin:0.5px 0.5px 0;transform-origin:0.5px 0.5px 0}.la-timer.la-sm>div:before{height:6px}.la-timer.la-sm>div:after{height:4px}.la-timer.la-2x{width:64px;height:64px}.la-timer.la-2x>div{width:64px;height:64px;border-width:4px}.la-timer.la-2x>div:before,.la-timer.la-2x>div:after{top:28px;left:28px;width:4px;margin-top:-2px;margin-left:-2px;border-radius:4px;-webkit-transform-origin:2px 2px 0;-moz-transform-origin:2px 2px 0;-ms-transform-origin:2px 2px 0;-o-transform-origin:2px 2px 0;transform-origin:2px 2px 0}.la-timer.la-2x>div:before{height:24px}.la-timer.la-2x>div:after{height:16px}.la-timer.la-3x{width:96px;height:96px}.la-timer.la-3x>div{width:96px;height:96px;border-width:6px}.la-timer.la-3x>div:before,.la-timer.la-3x>div:after{top:42px;left:42px;width:6px;margin-top:-3px;margin-left:-3px;border-radius:6px;-webkit-transform-origin:3px 3px 0;-moz-transform-origin:3px 3px 0;-ms-transform-origin:3px 3px 0;-o-transform-origin:3px 3px 0;transform-origin:3px 3px 0}.la-timer.la-3x>div:before{height:36px}.la-timer.la-3x>div:after{height:24px}@-webkit-keyframes timer-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes timer-loader{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes timer-loader{0%{-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes timer-loader{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}} + */.la-timer,.la-timer>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-timer>div:not(:first-child){display:none}.la-timer{display:block;font-size:0;color:#fff}.la-timer.la-dark{color:#333}.la-timer>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-timer{width:32px;height:32px}.la-timer>div{width:32px;height:32px;background:transparent;border-width:2px;border-radius:100%}.la-timer>div:before,.la-timer>div:after{position:absolute;top:14px;left:14px;display:block;width:2px;margin-top:-1px;margin-left:-1px;content:"";background:currentColor;border-radius:2px;-webkit-transform-origin:1px 1px 0;-moz-transform-origin:1px 1px 0;-ms-transform-origin:1px 1px 0;-o-transform-origin:1px 1px 0;transform-origin:1px 1px 0;-webkit-animation:timer-loader 1250ms infinite linear;-moz-animation:timer-loader 1250ms infinite linear;-o-animation:timer-loader 1250ms infinite linear;animation:timer-loader 1250ms infinite linear;-webkit-animation-delay:-625ms;-moz-animation-delay:-625ms;-o-animation-delay:-625ms;animation-delay:-625ms}.la-timer>div:before{height:12px}.la-timer>div:after{height:8px;-webkit-animation-duration:15s;-moz-animation-duration:15s;-o-animation-duration:15s;animation-duration:15s;-webkit-animation-delay:-7.5s;-moz-animation-delay:-7.5s;-o-animation-delay:-7.5s;animation-delay:-7.5s}.la-timer.la-sm{width:16px;height:16px}.la-timer.la-sm>div{width:16px;height:16px;border-width:1px}.la-timer.la-sm>div:before,.la-timer.la-sm>div:after{top:7px;left:7px;width:1px;margin-top:-.5px;margin-left:-.5px;border-radius:1px;-webkit-transform-origin:.5px .5px 0;-moz-transform-origin:.5px .5px 0;-ms-transform-origin:.5px .5px 0;-o-transform-origin:.5px .5px 0;transform-origin:.5px .5px 0}.la-timer.la-sm>div:before{height:6px}.la-timer.la-sm>div:after{height:4px}.la-timer.la-2x{width:64px;height:64px}.la-timer.la-2x>div{width:64px;height:64px;border-width:4px}.la-timer.la-2x>div:before,.la-timer.la-2x>div:after{top:28px;left:28px;width:4px;margin-top:-2px;margin-left:-2px;border-radius:4px;-webkit-transform-origin:2px 2px 0;-moz-transform-origin:2px 2px 0;-ms-transform-origin:2px 2px 0;-o-transform-origin:2px 2px 0;transform-origin:2px 2px 0}.la-timer.la-2x>div:before{height:24px}.la-timer.la-2x>div:after{height:16px}.la-timer.la-3x{width:96px;height:96px}.la-timer.la-3x>div{width:96px;height:96px;border-width:6px}.la-timer.la-3x>div:before,.la-timer.la-3x>div:after{top:42px;left:42px;width:6px;margin-top:-3px;margin-left:-3px;border-radius:6px;-webkit-transform-origin:3px 3px 0;-moz-transform-origin:3px 3px 0;-ms-transform-origin:3px 3px 0;-o-transform-origin:3px 3px 0;transform-origin:3px 3px 0}.la-timer.la-3x>div:before{height:36px}.la-timer.la-3x>div:after{height:24px}@-webkit-keyframes timer-loader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes timer-loader{0%{-moz-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes timer-loader{0%{-o-transform:rotate(0);transform:rotate(0)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes timer-loader{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}} diff --git a/css/triangle-skew-spin.css b/css/triangle-skew-spin.css index 8c85cce..e607b6c 100644 --- a/css/triangle-skew-spin.css +++ b/css/triangle-skew-spin.css @@ -11,6 +11,10 @@ box-sizing: border-box; } +.la-triangle-skew-spin > div:not(:first-child) { + display: none; +} + .la-triangle-skew-spin { display: block; font-size: 0; diff --git a/css/triangle-skew-spin.min.css b/css/triangle-skew-spin.min.css index 91d63d8..0a35ef5 100644 --- a/css/triangle-skew-spin.min.css +++ b/css/triangle-skew-spin.min.css @@ -2,5 +2,4 @@ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT - */ -.la-triangle-skew-spin,.la-triangle-skew-spin>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-triangle-skew-spin{display:block;font-size:0;color:#fff}.la-triangle-skew-spin.la-dark{color:#333}.la-triangle-skew-spin>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-triangle-skew-spin{width:32px;height:16px}.la-triangle-skew-spin>div{width:0;height:0;background:transparent;border:none;border-style:solid;border-width:16px;border-top-width:0;border-right-color:transparent;border-left-color:transparent;-webkit-animation:triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;-moz-animation:triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;-o-animation:triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;animation:triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite}.la-triangle-skew-spin.la-sm{width:16px;height:8px}.la-triangle-skew-spin.la-sm>div{border-width:8px;border-top-width:0}.la-triangle-skew-spin.la-2x{width:64px;height:32px}.la-triangle-skew-spin.la-2x>div{border-width:32px;border-top-width:0}.la-triangle-skew-spin.la-3x{width:96px;height:48px}.la-triangle-skew-spin.la-3x>div{border-width:48px;border-top-width:0}@-webkit-keyframes triangle-skew-spin{0%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}}@-moz-keyframes triangle-skew-spin{0%{-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-moz-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}}@-o-keyframes triangle-skew-spin{0%{transform:perspective(100px) rotateX(0) rotateY(0)}25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{transform:perspective(100px) rotateX(0) rotateY(360deg)}}@keyframes triangle-skew-spin{0%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(360deg);-moz-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}} + */.la-triangle-skew-spin,.la-triangle-skew-spin>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-triangle-skew-spin>div:not(:first-child){display:none}.la-triangle-skew-spin{display:block;font-size:0;color:#fff}.la-triangle-skew-spin.la-dark{color:#333}.la-triangle-skew-spin>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-triangle-skew-spin{width:32px;height:16px}.la-triangle-skew-spin>div{width:0;height:0;background:transparent;border:0;border-style:solid;border-width:16px;border-top-width:0;border-right-color:transparent;border-left-color:transparent;-webkit-animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;-moz-animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;-o-animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}.la-triangle-skew-spin.la-sm{width:16px;height:8px}.la-triangle-skew-spin.la-sm>div{border-width:8px;border-top-width:0}.la-triangle-skew-spin.la-2x{width:64px;height:32px}.la-triangle-skew-spin.la-2x>div{border-width:32px;border-top-width:0}.la-triangle-skew-spin.la-3x{width:96px;height:48px}.la-triangle-skew-spin.la-3x>div{border-width:48px;border-top-width:0}@-webkit-keyframes triangle-skew-spin{0%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}}@-moz-keyframes triangle-skew-spin{0%{-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-moz-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}}@-o-keyframes triangle-skew-spin{0%{transform:perspective(100px) rotateX(0) rotateY(0)}25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{transform:perspective(100px) rotateX(0) rotateY(360deg)}}@keyframes triangle-skew-spin{0%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);-moz-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);-moz-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);-moz-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);-moz-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(360deg);-moz-transform:perspective(100px) rotateX(0) rotateY(360deg);transform:perspective(100px) rotateX(0) rotateY(360deg)}} From e716d2a35c38331e0efe7a6f704b7bd65e5c9918 Mon Sep 17 00:00:00 2001 From: Elijah Madden Date: Wed, 14 Dec 2016 11:01:35 +0900 Subject: [PATCH 2/2] Missed one --- css/square-loader.css | 4 ++++ css/square-loader.min.css | 3 +-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/css/square-loader.css b/css/square-loader.css index 9edb358..334f192 100644 --- a/css/square-loader.css +++ b/css/square-loader.css @@ -11,6 +11,10 @@ box-sizing: border-box; } +.la-square-loader > div:not(:first-child) { + display: none; +} + .la-square-loader { display: block; font-size: 0; diff --git a/css/square-loader.min.css b/css/square-loader.min.css index 92cd30f..010f0a0 100644 --- a/css/square-loader.min.css +++ b/css/square-loader.min.css @@ -2,5 +2,4 @@ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT - */ -.la-square-loader,.la-square-loader>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-square-loader{display:block;font-size:0;color:#fff}.la-square-loader.la-dark{color:#333}.la-square-loader>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-square-loader{width:32px;height:32px}.la-square-loader>div{width:100%;height:100%;background:transparent;border-width:2px;border-radius:0;-webkit-animation:square-loader 2s infinite ease;-moz-animation:square-loader 2s infinite ease;-o-animation:square-loader 2s infinite ease;animation:square-loader 2s infinite ease}.la-square-loader>div:after{display:inline-block;width:100%;vertical-align:top;content:"";background-color:currentColor;-webkit-animation:square-loader-inner 2s infinite ease-in;-moz-animation:square-loader-inner 2s infinite ease-in;-o-animation:square-loader-inner 2s infinite ease-in;animation:square-loader-inner 2s infinite ease-in}.la-square-loader.la-sm{width:16px;height:16px}.la-square-loader.la-sm>div{border-width:1px}.la-square-loader.la-2x{width:64px;height:64px}.la-square-loader.la-2x>div{border-width:4px}.la-square-loader.la-3x{width:96px;height:96px}.la-square-loader.la-3x>div{border-width:6px}@-webkit-keyframes square-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}25%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}75%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes square-loader{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}25%{-moz-transform:rotate(180deg);transform:rotate(180deg)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}75%{-moz-transform:rotate(360deg);transform:rotate(360deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes square-loader{0%{-o-transform:rotate(0deg);transform:rotate(0deg)}25%{-o-transform:rotate(180deg);transform:rotate(180deg)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}75%{-o-transform:rotate(360deg);transform:rotate(360deg)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes square-loader{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}25%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}75%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes square-loader-inner{0%{height:0}25%{height:0}50%{height:100%}75%{height:100%}100%{height:0}}@-moz-keyframes square-loader-inner{0%{height:0}25%{height:0}50%{height:100%}75%{height:100%}100%{height:0}}@-o-keyframes square-loader-inner{0%{height:0}25%{height:0}50%{height:100%}75%{height:100%}100%{height:0}}@keyframes square-loader-inner{0%{height:0}25%{height:0}50%{height:100%}75%{height:100%}100%{height:0}} + */.la-square-loader,.la-square-loader>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-square-loader>div:not(:first-child){display:none}.la-square-loader{display:block;font-size:0;color:#fff}.la-square-loader.la-dark{color:#333}.la-square-loader>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-square-loader{width:32px;height:32px}.la-square-loader>div{width:100%;height:100%;background:transparent;border-width:2px;border-radius:0;-webkit-animation:square-loader 2s infinite ease;-moz-animation:square-loader 2s infinite ease;-o-animation:square-loader 2s infinite ease;animation:square-loader 2s infinite ease}.la-square-loader>div:after{display:inline-block;width:100%;vertical-align:top;content:"";background-color:currentColor;-webkit-animation:square-loader-inner 2s infinite ease-in;-moz-animation:square-loader-inner 2s infinite ease-in;-o-animation:square-loader-inner 2s infinite ease-in;animation:square-loader-inner 2s infinite ease-in}.la-square-loader.la-sm{width:16px;height:16px}.la-square-loader.la-sm>div{border-width:1px}.la-square-loader.la-2x{width:64px;height:64px}.la-square-loader.la-2x>div{border-width:4px}.la-square-loader.la-3x{width:96px;height:96px}.la-square-loader.la-3x>div{border-width:6px}@-webkit-keyframes square-loader{0%{-webkit-transform:rotate(0);transform:rotate(0)}25%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}75%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes square-loader{0%{-moz-transform:rotate(0);transform:rotate(0)}25%{-moz-transform:rotate(180deg);transform:rotate(180deg)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}75%{-moz-transform:rotate(360deg);transform:rotate(360deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes square-loader{0%{-o-transform:rotate(0);transform:rotate(0)}25%{-o-transform:rotate(180deg);transform:rotate(180deg)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}75%{-o-transform:rotate(360deg);transform:rotate(360deg)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes square-loader{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}25%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}75%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes square-loader-inner{0%{height:0}25%{height:0}50%{height:100%}75%{height:100%}100%{height:0}}@-moz-keyframes square-loader-inner{0%{height:0}25%{height:0}50%{height:100%}75%{height:100%}100%{height:0}}@-o-keyframes square-loader-inner{0%{height:0}25%{height:0}50%{height:100%}75%{height:100%}100%{height:0}}@keyframes square-loader-inner{0%{height:0}25%{height:0}50%{height:100%}75%{height:100%}100%{height:0}}