StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-11-27 09:42:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: use skeleton screen as transclude load animation

Browse source
This commit is contained in:
alistair3149 2024-05-25 03:40:39 -04:00
parent 0a3b30504d
commit a66f6e604f
No known key found for this signature in database
2 changed files with 48 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
modules/ext.tabberNeue.init/ext.tabberNeue.init.less
View file

@ -24,7 +24,13 @@
border-radius: 40px;
margin-top: 1em;
margin-left: 0.75em;
animation-duration: 10s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: skeletonload;
animation-timing-function: linear;
background: #000;
background: linear-gradient( to right, #202122 8%, #54595d 18%, #202122 33% );
/* Use double quote in PHP */
content: '';
}
@ -46,3 +52,13 @@
display: none;
}
}
@keyframes skeletonload {
0% {
background-position: 0 0;
}
100% {
background-position: 100em 0;
}
}

67
modules/ext.tabberNeue/ext.tabberNeue.less
View file

@ -152,36 +152,36 @@
}
&--loading {
/*
* Animation based on dots indicators from Wikimedia
* T266028
*/
.tabber__transclusion {
margin: 0.5em 0; // based on Vector
text-align: center;
white-space: nowrap;
opacity: 0.1;
a {
color: transparent;
}
a,
&::before,
&::after {
display: block;
height: 0.5em;
border-radius: 40px;
margin-top: 1em;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: skeletonload;
animation-timing-function: linear;
background: #000;
background: linear-gradient( to right, #202122 8%, #54595d 18%, #202122 33% );
}
.tabber__loading-indicator,
&::before,
&::after {
display: inline-block;
width: @width-bounce-dot;
height: @width-bounce-dot;
border-radius: 100%;
animation: bounce-delay 1600ms infinite ease-in-out both;
animation-delay: -160ms;
background-color: #36c;
content: '';
}
&::before {
margin-right: @width-bounce-dot / 4;
animation-delay: -330ms;
}
&::after {
margin-left: @width-bounce-dot / 4;
animation-delay: 0ms;
width: 60%;
}
}
}
@ -197,19 +197,6 @@
}
}
@keyframes bounce-delay {
0%,
50%,
100% {
transform: scale( 0.625 );
}
20% {
opacity: 0.87;
transform: scale( 1 );
}
}
@media ( hover: none ) {
// Need extra specificity to override
.tabber {
@ -273,3 +260,13 @@
}
}
}
@keyframes skeletonload {
0% {
background-position: 0 0;
}
100% {
background-position: 100em 0;
}
}