diff --git a/src/client/components/SearchBar.vue b/src/client/components/SearchBar.vue index bb062c6c83448f4598a6df73a003dbb2c0534153..ce7f071b04568bd18e5156a0e9f501e2ced79f4e 100644 --- a/src/client/components/SearchBar.vue +++ b/src/client/components/SearchBar.vue @@ -21,6 +21,10 @@ :disabled="isFetchingAntibodies" @click="fetchAntibodies"> SEARCH + <span + v-if="isFetchingAntibodies" + class="spinner"> + </span> </button> </div> diff --git a/src/client/globals.css b/src/client/globals.css index 2cd5a8a528d8157db676ab2a8f54797d9d59d8a2..a4f930c4c18f16d5e6c38b63679435f3b9080b00 100644 --- a/src/client/globals.css +++ b/src/client/globals.css @@ -23,13 +23,33 @@ font-style: normal; } -.icon-check:before { content: "\e900"; } -.icon-close:before { content: "\e906"; } -.icon-database:before { content: "\e964"; } -.icon-mouse:before { content: "\e903"; } -.icon-rabbit:before { content: "\e902"; } -.icon-search:before { content: "\e901"; } -.icon-y:before { content: "\e904"; } +.icon-check:before { + content: "\e900"; +} + +.icon-close:before { + content: "\e906"; +} + +.icon-database:before { + content: "\e964"; +} + +.icon-mouse:before { + content: "\e903"; +} + +.icon-rabbit:before { + content: "\e902"; +} + +.icon-search:before { + content: "\e901"; +} + +.icon-y:before { + content: "\e904"; +} /* Global styles */ /* ------------------------------------------------------------------------- */ @@ -133,6 +153,11 @@ i { } .search-button { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + background-color: var(--primary); border: 1px solid transparent; color: var(--black); @@ -178,15 +203,13 @@ i { display: inline-block; background-color: var(--primary-translucent); border-radius: var(--radius); - background-image: linear-gradient( - 45deg, - var(--primary) 25%, - transparent 25%, - transparent 50%, - var(--primary) 50%, - var(--primary) 75%, - transparent 75% - ); + background-image: linear-gradient(45deg, + var(--primary) 25%, + transparent 25%, + transparent 50%, + var(--primary) 50%, + var(--primary) 75%, + transparent 75%); background-size: 1em 1em; box-sizing: border-box; animation: bar-stripe 0.5s linear infinite; @@ -196,6 +219,7 @@ i { 0% { background-position: 1em 0; } + 100% { background-position: 0 0; }