Merge pull request #105 from ocsigen/style

Style

Author: vasilisp

css/ot_icons.css

@@ -1,10 +1,6 @@
 @keyframes ot-icon-animation-spinning {
     0% { transform: rotate(0deg) ; }
-    100% { transform: rotate(359deg) ; }
-}
-
-.ot-icon-animation-spinning {
-    animation: ot-icon-animation-spinning 1.5s linear infinite ;
+    100% { transform: rotate(360deg) ; }
 }
 
 @keyframes ot-icon-animation-shake {
@@ -75,16 +71,6 @@
     text-align: center ;
 }
 
-.ot-icon-spinner::before {
-    display: block ;
-    width: 1em ;
-    height: 1em ;
-    border: .1em solid #000 ;
-    border-left: .1em solid #777 ;
-    border-bottom: .1em solid #777 ;
-    border-radius: 50% ;
-}
-
 .ot-icon-plus::before {
     position: absolute ;
     left: .15em ;

css/ot_spinner.css

@@ -4,3 +4,21 @@
     justify-content: center ;
     align-items: center ;
 }
+
+.ot-icon-animation-spinning {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+}
+
+.ot-icon-animation-spinning::before {
+    content: "";
+    margin: 1rem;
+    padding: 10px ;
+    background-position: center ;
+    background-repeat: no-repeat ;
+    background-size:contain;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' viewBox='-256 -256 512 512'%3E%3Cg fill='%23ccc'%3E%3Crect id='r' ry='19' height='143' width='52' transform='translate(-26,108)'/%3E%3Cuse xlink:href='%23r' transform='rotate(30)'/%3E%3Cuse xlink:href='%23r' transform='rotate(-30)'/%3E%3Cuse xlink:href='%23r' transform='rotate(60)'/%3E%3Cuse xlink:href='%23r' transform='rotate(-60)'/%3E%3Cuse xlink:href='%23r' transform='rotate(-90)'/%3E%3Cuse xlink:href='%23r' transform='rotate(-120)'/%3E%3Cuse xlink:href='%23r' transform='rotate(-150)'/%3E%3C/g%3E%3Cuse xlink:href='%23r' transform='rotate(90)' fill='%23c5c5c5'/%3E%3Cuse xlink:href='%23r' transform='rotate(120)' fill='%23999'/%3E%3Cuse xlink:href='%23r' transform='rotate(150)' fill='%23878787'/%3E%3Cuse xlink:href='%23r' transform='rotate(180)' fill='%23626262'/%3E%3C/svg%3E");
+    animation: ot-icon-animation-spinning 1s steps(12) infinite;
+}
+.ot-icon-animation-spinning::after { content: normal !important; }

src/widgets/ot_spinner.eliomi

@@ -29,7 +29,11 @@
     It has class "spinning" while the spinner is present.
 
     On server side, it will wait for [th] to be finished before
-    returning its result (and never display a spinner). *)
+    returning its result (and never display a spinner).
+
+    If you want the spinner on both sides, you can use [with_spinner_no_lwt]
+    and [Eliom_content.Html.C.node].
+ *)
 val with_spinner :
   ?a:[< Html_types.div_attrib ] Eliom_content.Html.attrib list ->
   ?fail:(exn ->