Shimmerdeedoodah

In this example below you will see how to do a Shimmerdeedoodah with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by andydietz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andydietz ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Shimmerdeedoodah</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="container shimmer">
  <h3>Here is the Header</h3>
  <h3>Here is another header</h3>
  <div class="spacer"></div>
  <input placeholder='input' type="text">
  <select name="testselect" id="">
    <option value="A">Amazing thing!</option>
  </select>
  <input type="checkbox">
  <input type="radio">
  <textarea name="something" id="" width='100%' rows="5"></textarea>
  <p><span>Here is some text.  It is wrapped in a span tag so it's style can be overriden.</span></p>
  <div class="spacer"><span>This is truly some amazing text.</span></div>
  <div class="spacer">This is text that doesn't have an override.  We can't override the base styling of divs, but we can override everything else.</div>
  <div class="spacer"><button>This is an amazing button.</button></div>
  
  <table>
    <thead>
      <th>Table Heading</th>
      <th>Second table heading</th>
    </thead>
    <tbody>
      <tr>
        <td>Something Amazing</td>
        <td>Something Else</td>
      </tr>
    </tbody>
  </table>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/andydietz/shimmerdeedoodah-EEmZVy */
body {
  background-color: white;
}

td {
  border: 1px solid black;
}

.container {
  margin: 0px auto;
  width: 400px;
  min-height: 170px;
  margin-top: 5vh;
  position: relative;
}

.spacer {
  min-height: 24px;
  width: 100%;
  margin-bottom: 5px;
}

.shimmer {
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: transparent;
}
.shimmer span,
.shimmer input,
.shimmer input::-webkit-input-placeholder,
.shimmer select,
.shimmer h1,
.shimmer h2,
.shimmer h3,
.shimmer h4,
.shimmer h5,
.shimmer h6,
.shimmer textarea,
.shimmer i,
.shimmer img,
.shimmer button,
.shimmer th, .shimmer td {
  background-color: #eee;
  color: #eee;
  border: none;
  border-radius: 1px;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
.shimmer span,
.shimmer input,
.shimmer input:-ms-input-placeholder,
.shimmer select,
.shimmer h1,
.shimmer h2,
.shimmer h3,
.shimmer h4,
.shimmer h5,
.shimmer h6,
.shimmer textarea,
.shimmer i,
.shimmer img,
.shimmer button,
.shimmer th, .shimmer td {
  background-color: #eee;
  color: #eee;
  border: none;
  border-radius: 1px;
  pointer-events: none;
  -ms-user-select: none;
      user-select: none;
}
.shimmer span,
.shimmer input,
.shimmer input::-ms-input-placeholder,
.shimmer select,
.shimmer h1,
.shimmer h2,
.shimmer h3,
.shimmer h4,
.shimmer h5,
.shimmer h6,
.shimmer textarea,
.shimmer i,
.shimmer img,
.shimmer button,
.shimmer th, .shimmer td {
  background-color: #eee;
  color: #eee;
  border: none;
  border-radius: 1px;
  pointer-events: none;
  -ms-user-select: none;
      user-select: none;
}
.shimmer span,
.shimmer input,
.shimmer input::placeholder,
.shimmer select,
.shimmer h1,
.shimmer h2,
.shimmer h3,
.shimmer h4,
.shimmer h5,
.shimmer h6,
.shimmer textarea,
.shimmer i,
.shimmer img,
.shimmer button,
.shimmer th, .shimmer td {
  background-color: #eee;
  color: #eee;
  border: none;
  border-radius: 1px;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.shimmer h1, .shimmer h2, .shimmer h3, .shimmer h4, .shimmer h5, .shimmer h6 {
  display: table;
}
.shimmer input[type='radio'], .shimmer input[type='checkbox'] {
  display: none;
}

.shimmer:after {
  content: "";
  position: absolute;
  top: 0%;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.5) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 200% 100%;
  background-clip: text;
  -webkit-animation-name: shimmer;
          animation-name: shimmer;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
}

@-webkit-keyframes shimmer {
  0% {
    background-position: top right;
  }
  100% {
    background-position: top left;
  }
}

@keyframes shimmer {
  0% {
    background-position: top right;
  }
  100% {
    background-position: top left;
  }
}

Comments