HTML: grey boxes for not-yet-arrived text, etc. (a.k.a. "Skeleton Screens") < div role ="row " class ="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
< div role ="gridcell " class ="mr-3 flex-shrink-0 " style ="width: 16px; ">
< svg aria-label ="Directory " class ="octicon octicon-file-directory text-color-icon-directory " height ="16 " viewBox ="0 0 16 16 " version ="1.1 " width ="16 " role ="img "> < path fill-rule ="evenodd " d ="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z "> </ path > </ svg >
</ div >
< div role ="rowheader " class ="flex-auto min-width-0 col-md-2 mr-3 ">
< span class ="css-truncate css-truncate-target d-block width-fit "> < a class ="js-navigation-open link-gray-dark " title ="thirdparty " href ="/ccxvii/mupdf/tree/master/thirdparty "> thirdparty</ a > </ span >
</ div >
< div role ="gridcell " class ="flex-auto min-width-0 d-none d-md-block col-5 mr-3 ">
< div class ="Skeleton Skeleton--text col-7 "> </ div >
</ div >
< div role ="gridcell " class ="text-gray-light text-right " style ="width:100px; ">
< div class ="Skeleton Skeleton--text "> </ div >
</ div >
</ div > // skeleton-loading.scss
.Skeleton--text {
-webkit-clip-path : inset (4px 0 4px 0 round 3px 3px 3px 3px );
clip-path : inset (4px 0 4px 0 round 3px 3px 3px 3px );
}
.Skeleton {
color : transparent;
background-image : linear-gradient (270deg , rgba (0 , 0 , 0 , .1 ), rgba (0 , 0 , 0 , .05 ), rgba (0 , 0 , 0 , .05 ), rgba (0 , 0 , 0 , .1 ));
background-size : 400% 100% ;
animation : skeleton-loading 8s ease-in-out infinite;
}
* box-sizing : border-box;
}
.text-right {
text-align : right !important ;
}
.text-gray-light {
color : var (--color-text-tertiary ) !important ;
}
.Box-row {
list-style-type : none;
} 