Skeletons for designing layouts

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex">
  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">
      <div class="uk-width-1-1">
        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">Skeletons for designing layouts</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding-small uk-border-rounded">
          
          <div class="uk-margin-small-top uk-text-bold">Lines</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-skeleton">
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
            </div>
          </div>
          <div class="uk-margin-small-top uk-text-bold">Lines with animation</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-skeleton uk-skeleton-animation">
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
            </div>
          </div>
          <div class="uk-margin-small-top uk-text-bold">Rounded lines</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-skeleton uk-skeleton-rounded">
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
            </div>
          </div>
          <div class="uk-margin-small-top uk-text-bold">Lines small</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-skeleton uk-skeleton-small">
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
            </div>
          </div>
          <div class="uk-margin-small-top uk-text-bold">Lines with paragraph</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-skeleton">
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-paragraph">
                <div class="uk-skeleton-line"></div>
                <div class="uk-skeleton-line"></div>
                <div class="uk-skeleton-line"></div>
              </div>
            </div>
          </div>
          <div class="uk-margin-small-top uk-text-bold">Square with Lines</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-skeleton">
              <div class="uk-skeleton-square">
                <div class="uk-skeleton-line"></div>
                <div class="uk-skeleton-line"></div>
              </div>
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
              <div class="uk-skeleton-line"></div>
            </div>
          </div>
          
        </div>
      </div>
      <div class="uk-text-mini uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

/* Snippets style */
body { background-color: #ebebeb; }
.uk-box-shadow-remove { box-shadow: none; }
.uk-text-mini { font-size: 8px; }
/* Style */
.uk-skeleton-line {
  height: 1em;
  margin-bottom: .5em;
  overflow: hidden;
  background-color: #fff;
  background-image: linear-gradient(to right, rgba(0,0,0,.08) 0, rgba(0,0,0,.15) 15%, rgba(0,0,0,.08) 30%);
  background-size: 400% 100%;
}
.uk-skeleton-line:not(:first-child) {
  margin-top: .5em;
}
.uk-skeleton-line:nth-child(1) {
  width: 100%
}
.uk-skeleton-line:nth-child(2) {
  width: 65%
}
.uk-skeleton-line:nth-child(3) {
  width: 75%
}
.uk-skeleton-line:nth-child(4) {
  width: 90%
}
.uk-skeleton-line:nth-child(5) {
  width: 55%
}
.uk-skeleton-paragraph {
  margin-top: 25px;
}
.uk-skeleton-paragraph .uk-skeleton-line:nth-child(1) {
  width: 95%
}
.uk-skeleton-square {
  margin-bottom: 2rem;
  padding-left: 3.5em;
  position: relative;
}
.uk-skeleton-square:after {
  position: absolute;
  content: '';
  display: inline-block;
  height: 2.5em;
  width: 2.5em;
  background-image: linear-gradient(to right, rgba(0,0,0,.08) 0, rgba(0,0,0,.15) 15%, rgba(0,0,0,.08) 30%);
  background-size: 400% 100%;
  top: 0;
  left: 0;
}
.uk-skeleton-small .uk-skeleton-line {
  height: .7em;
}
.uk-skeleton-small .uk-skeleton-square {
  margin-bottom: 1.5rem;
  padding-left: 3em;
}
.uk-skeleton-small .uk-skeleton-square:after {
  height: 2em;
  width: 2em;
}
.uk-skeleton-rounded .uk-skeleton-line {
  border-radius: 5px;
}
.uk-skeleton-rounded .uk-skeleton-square:after {
  border-radius: 5px;
}
.uk-skeleton-animation .uk-skeleton-line {
  animation: animation 8s ease-in-out infinite;
}
@keyframes animation {
  0% { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

Information

Detailed overview of a selected code snippet

antonius

26.03.2025, 15:46:07

28.03.2025, 11:16:26

uk-border, uk-box, uk-card, uk-container, uk-flex, uk-margin, uk-padding, uk-placeholder, uk-skeleton, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!