diff options
Diffstat (limited to 'web/static/app/app.css')
-rw-r--r-- | web/static/app/app.css | 152 |
1 files changed, 151 insertions, 1 deletions
diff --git a/web/static/app/app.css b/web/static/app/app.css index 090ac5e..f21c0dc 100644 --- a/web/static/app/app.css +++ b/web/static/app/app.css @@ -1,3 +1,153 @@ nav.navbar { - margin-bottom: 2rem; + margin-bottom: 2rem; } + +/* + * http://martinwolf.org/2015/01/08/pure-css-savingloading-dots-animation/ + */ +.dl-dots span { + animation-name: dl-dots; + animation-duration: 1.4s; + animation-iteration-count: infinite; + animation-fill-mode: both; +} + +.dl-dots span:nth-child(2) { + animation-delay: .2s; +} + +.dl-dots span:nth-child(3) { + animation-delay: .4s; +} + +@-webkit-keyframes dl-dots { + 0% { + opacity: .2; + } + 20% { + opacity: 1; + } + 100% { + opacity: .2; + } +} + +@-moz-keyframes dl-dots { + 0% { + opacity: .2; + } + 20% { + opacity: 1; + } + 100% { + opacity: .2; + } +} + +@-ms-keyframes dl-dots { + 0% { + opacity: .2; + } + 20% { + opacity: 1; + } + 100% { + opacity: .2; + } +} + +@keyframes dl-dots { + 0% { + opacity: .2; + } + 20% { + opacity: 1; + } + 100% { + opacity: .2; + } +} + +/* + * https://gist.github.com/jankorbel/2336513/cb2f68b59521438ac812ad72c1c93d8f656e49ad + */ +/* +.dl-dots span { + background: transparent; + border-radius: 50%; + box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3); + display: inline-block; + height: 0.6em; + width: 0.6em; + + -webkit-animation: dl-dots 0.8s linear infinite; + -moz-animation: dl-dots 0.8s linear infinite; + -ms-animation: dl-dots 0.8s linear infinite; + animation: dl-dots 0.8s linear infinite; +} + +.dl-dots span:nth-child(1) { + -webkit-animation-delay: 0.4s; + -moz-animation-delay: 0.4s; + -ms-animation-delay: 0.4s; + animation-delay: 0.4s; +} + +.dl-dots span:nth-child(2) { + -webkit-animation-delay: 0.2s; + -moz-animation-delay: 0.2s; + -ms-animation-delay: 0.2s; + animation-delay: 0.2s; +} + +!* + Define the animation for every efing vendor prefix +*! +@-webkit-keyframes dl-dots { + 0% { + background: transparent; + } + 50% { + background: #E4E4E4; + } + 100% { + background: transparent; + } +} + +@-moz-keyframes dl-dots { + 0% { + background: transparent; + } + 50% { + background: #E4E4E4; + } + 100% { + background: transparent; + } +} + +@-ms-keyframes dl-dots { + 0% { + background: transparent; + } + 50% { + background: #E4E4E4; + } + 100% { + background: transparent; + } +} + +@keyframes dl-dots { + 0% { + background: transparent; + } + 50% { + background: #E4E4E4; + } + 100% { + background: transparent; + } +} +*/ |