mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-09 18:02:39 +00:00
searching animation
This commit is contained in:
@@ -247,7 +247,7 @@ const ArchivePage = createClass({
|
|||||||
if(searching) {
|
if(searching) {
|
||||||
return (
|
return (
|
||||||
<div className='foundBrews searching'>
|
<div className='foundBrews searching'>
|
||||||
<span><h3>Searching</h3><h3 className='searchAnim'>...</h3></span>
|
<h3 className='searchAnim'>Searching</h3>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -122,7 +122,15 @@ body {
|
|||||||
place-items: center;
|
place-items: center;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
h3.searchAnim {
|
h3 { position: relative;}
|
||||||
|
h3.searchAnim::after {
|
||||||
|
content: "";
|
||||||
|
width: max-content;
|
||||||
|
height: 1em;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
translate: 100% -50%;
|
||||||
animation: trailingDots 2s ease infinite;
|
animation: trailingDots 2s ease infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -229,13 +237,13 @@ body {
|
|||||||
|
|
||||||
@keyframes trailingDots {
|
@keyframes trailingDots {
|
||||||
0%,32% {
|
0%,32% {
|
||||||
clip-path:inset(0 66% 0 0);
|
content:'.';
|
||||||
}
|
}
|
||||||
|
|
||||||
33%, 65% {
|
33%, 65% {
|
||||||
clip-path:inset(0 33% 0 0);
|
content:'..';
|
||||||
}
|
}
|
||||||
66%,100% {
|
66%,100% {
|
||||||
clip-path:inset(0 0% 0 0);
|
content:'...';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user