ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 13:55:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styling for preloader on bottles page

Browse source
This commit is contained in:
Thomas Smith 2023-01-20 15:08:26 -05:00
parent 4c096732e8
commit ad4f39269a
3 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/assets/scripts/bottles.jsx
View file

@ -13,7 +13,7 @@ function Bottles() {
if (isLoading) return (
<div id="bottle-preloader" className="flex">
<div id="bottle-status" className="justify-content-center mx-auto">
<div id="bottle-status" className="my-auto">
<i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
<div id="bottle-loading-text"><p className="grid-gray">steeping...</p></div>
</div>

30
src/layouts/page/bottles.html
View file

@ -40,6 +40,36 @@
.expand{
cursor: pointer;
}
.tea-icon{
display:block;
text-align:center;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
#bottle-preloader {
width: 100%;
height: 200px;
background: #1a1a1a;
}
#bottle-status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-position: center;
margin: -100px 0 0 -100px;
}
#bottle-loading-text {
font-size: 20px;
text-align: center;
animation: pulse 1s infinite !important;
}
@media screen and (max-width: 576px) {

5
src/layouts/partials/bottle-preloader.html
View file

@ -24,6 +24,11 @@
#bottle-status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-position: center;
margin: -100px 0 0 -100px;
}
#bottle-loading-text {
font-size: 20px;