Skip to content

Instantly share code, notes, and snippets.

@GerHobbelt
Last active January 9, 2021 15:33
Show Gist options
  • Save GerHobbelt/ceb312c764db4f936e04ef085a9672aa to your computer and use it in GitHub Desktop.
Save GerHobbelt/ceb312c764db4f936e04ef085a9672aa to your computer and use it in GitHub Desktop.
HTML+CSS jotdown notes misc

HTML: grey boxes for not-yet-arrived text, etc. (a.k.a. "Skeleton Screens")

HTML+CSS

<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">&nbsp;</div>
          </div>

          <div role="gridcell" class="text-gray-light text-right" style="width:100px;">
              <div class="Skeleton Skeleton--text">&nbsp;</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;
}

Preview

 
 

Refs


Vue

Refs


Debugging / Dev

Refs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment