css : pure css loading spinner

e5ffb265 · Marc Duez · 514961e2 · e5ffb265
Commit e5ffb265 authored Jun 04, 2014 by Marc Duez
Hide whitespace changes
Inline Side-by-side

Showing with 31 additions and 0 deletions

browser/css/vidjil.less browser/css/vidjil.less +31 -0

No files found.
--- a/browser/css/vidjil.less
+++ b/browser/css/vidjil.less
@@ -1016,4 +1016,35 @@ span .substitution{
 .db_help_p {
    margin-top: 20px;
    margin-left: 20px;
+}
+
+
+.loading_seq {
+    height: 15px;
+    width: 100px;
+    background-image: -webkit-linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%); 
+    background-image: -moz-linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%);
+    background-image: -o-linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%);
+    background-image: linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%);
+    background-size: 50px 50px;
+    -webkit-animation: move 2s linear infinite;
+    -moz-animation: move 2s linear infinite;
+    -o-animation: move 2s linear infinite;
+    animation: move 2s linear infinite;
+}
+
+@-webkit-keyframes move {
+    to { background-position: 50px 50px; }
+}
+
+@-moz-keyframes move {
+    to { background-position: 50px 50px; }
+}
+
+@-o-keyframes move {
+    to { background-position: 50px 50px; }
+}
+
+@-webkit-keyframes move {
+    to { background-position: 50px 50px; }
 }
\ No newline at end of file