From 4ea0b6f5a0f2c972d48f23d1413a9b573bb6ec9c Mon Sep 17 00:00:00 2001 From: Jakub Pawlowicz Date: Mon, 31 Oct 2016 21:32:30 +0100 Subject: [PATCH] See #260 - adds progress spinner. --- docs/css/home.css | 25 +++++++++++++++++++++++++ docs/img/spinner.svg | 19 +++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 docs/img/spinner.svg diff --git a/docs/css/home.css b/docs/css/home.css index 37ca5cb7..002132b9 100644 --- a/docs/css/home.css +++ b/docs/css/home.css @@ -1,3 +1,12 @@ +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li, nav, ol, p, section, span, textarea, ul { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -57,6 +66,22 @@ a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li, background-color: hsl(0, 0%, 98%); } +.dropped-files__file:not(.dropped-files__file--optimized) { + position: relative; +} + +.dropped-files__file:not(.dropped-files__file--optimized):after { + animation: rotate 1.25s linear infinite; + background: url(../img/spinner.svg) center center / 1.25rem 1.25rem no-repeat; + content: " "; + display: block; + height: 100%; + position: absolute; + right: 0.25rem; + top: 0; + width: 1.5rem; +} + .dropped-files__file:not(.dropped-files__file--optimized) > .dropped-files__file__action { display: none; } diff --git a/docs/img/spinner.svg b/docs/img/spinner.svg new file mode 100644 index 00000000..9fa848f6 --- /dev/null +++ b/docs/img/spinner.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + -- 2.34.1