Simple page loaders using CSS animations

In this example below you will see how to do a Simple page loaders using CSS animations with some HTML / CSS and Javascript

A range of example animated loading symbols using CSS

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simple page loaders using CSS animations</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:300,400'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      *, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 14px;
  padding: 0;
  margin: 0;
  background: #eaeaea;
  max-width: 1200px;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6, p {
  font-weight: 300;
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}

div.hero {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background-image: linear-gradient(to right bottom, #F29FD1 0%, #C7EAFD 100%);
}
div.hero div.container {
  color: #FFF;
  opacity: 0.6;
}

div.container {
  padding: 30px;
}

h1.title {
  border-bottom: 2px solid #C7EAFD;
}

div.panel {
  background: #FFF;
  padding: 20px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0px 3px 0px 0px #ddd;
  margin: 0 0 20px 0;
}

div.loader.loader-1 {
  position: relative;
  margin: 0 auto;
  height: 160px;
  width: 160px;
}
div.loader.loader-1:before {
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  line-height: 160px;
  text-align: center;
  font-size: 1.2em;
  animation: pulse 1s infinite alternate;
}
div.loader.loader-1 div.circle {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0;
  left: 0;
  background: #C7EAFD;
  animation: loading 2s infinite;
}
div.loader.loader-2 {
  position: relative;
  margin: 0 auto;
  height: 50px;
  width: 160px;
}
div.loader.loader-2:before {
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 1.2em;
  animation: pulse 0.75s infinite alternate;
}
div.loader.loader-2 div.circle {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
}
div.loader.loader-2 div.circle.circle-1 {
  top: 0;
  left: 0;
  background: #F29FD1;
  animation: slide-right 1.5s infinite;
}
div.loader.loader-2 div.circle.circle-2 {
  top: 0;
  left: 140px;
  background: #C7EAFD;
  animation: slide-left 1.5s infinite;
}
div.loader.loader-3 {
  position: relative;
  margin: 0 auto;
  height: 30px;
  width: 160px;
}
div.loader.loader-3:before {
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 1.2em;
  animation: pulse 1s infinite alternate;
  color: #FFF;
}
div.loader.loader-3 div.bar {
  width: 100%;
  height: 30px;
  background-image: linear-gradient(to top, #F29FD1 0%, #C7EAFD 100%);
  overflow: hidden;
}
div.loader.loader-3 div.bar div.stripes {
  width: 200%;
  height: 30px;
  background-size: 50px 50px;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  animation: background 2s linear infinite;
}

@keyframes background {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -92%;
  }
}
@keyframes slide-right {
  0% {
    left: 0;
  }
  50% {
    left: 140px;
  }
  100% {
    left: 0;
  }
}
@keyframes slide-left {
  0% {
    left: 140px;
  }
  50% {
    left: 0;
  }
  100% {
    left: 140px;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
@keyframes loading {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 120px;
    left: 0;
  }
  50% {
    top: 120px;
    left: 120px;
  }
  75% {
    top: 0px;
    left: 120px;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  
<div class="hero">
  <div class="container">
    <h1>Simple page loaders using CSS animations</h1>
    <p>A range of example animated loading symbols using CSS</p>
  </div>
</div>
<div class="container">
  <h1 class="title">Loader #1</h1>
  <div class="panel">
    <div class="loader loader-1">
      <div class="circle"></div>
    </div>
  </div>
  <h1 class="title">Loader #2</h1>
  <div class="panel">
    <div class="loader loader-2">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
    </div>
  </div>
  <h1 class="title">Loader #3</h1>
  <div class="panel">
    <div class="loader loader-3">
      <div class="bar">
        <div class="stripes"></div>
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/simple-page-loaders-using-css-animations-Jjoqp */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 14px;
  padding: 0;
  margin: 0;
  background: #eaeaea;
  max-width: 1200px;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6, p {
  font-weight: 300;
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}

div.hero {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background-image: linear-gradient(to right bottom, #F29FD1 0%, #C7EAFD 100%);
}
div.hero div.container {
  color: #FFF;
  opacity: 0.6;
}

div.container {
  padding: 30px;
}

h1.title {
  border-bottom: 2px solid #C7EAFD;
}

div.panel {
  background: #FFF;
  padding: 20px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0px 3px 0px 0px #ddd;
  margin: 0 0 20px 0;
}

div.loader.loader-1 {
  position: relative;
  margin: 0 auto;
  height: 160px;
  width: 160px;
}
div.loader.loader-1:before {
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  line-height: 160px;
  text-align: center;
  font-size: 1.2em;
  animation: pulse 1s infinite alternate;
}
div.loader.loader-1 div.circle {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0;
  left: 0;
  background: #C7EAFD;
  animation: loading 2s infinite;
}
div.loader.loader-2 {
  position: relative;
  margin: 0 auto;
  height: 50px;
  width: 160px;
}
div.loader.loader-2:before {
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 1.2em;
  animation: pulse 0.75s infinite alternate;
}
div.loader.loader-2 div.circle {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
}
div.loader.loader-2 div.circle.circle-1 {
  top: 0;
  left: 0;
  background: #F29FD1;
  animation: slide-right 1.5s infinite;
}
div.loader.loader-2 div.circle.circle-2 {
  top: 0;
  left: 140px;
  background: #C7EAFD;
  animation: slide-left 1.5s infinite;
}
div.loader.loader-3 {
  position: relative;
  margin: 0 auto;
  height: 30px;
  width: 160px;
}
div.loader.loader-3:before {
  content: 'Loading...';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 1.2em;
  animation: pulse 1s infinite alternate;
  color: #FFF;
}
div.loader.loader-3 div.bar {
  width: 100%;
  height: 30px;
  background-image: linear-gradient(to top, #F29FD1 0%, #C7EAFD 100%);
  overflow: hidden;
}
div.loader.loader-3 div.bar div.stripes {
  width: 200%;
  height: 30px;
  background-size: 50px 50px;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  animation: background 2s linear infinite;
}

@keyframes background {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -92%;
  }
}
@keyframes slide-right {
  0% {
    left: 0;
  }
  50% {
    left: 140px;
  }
  100% {
    left: 0;
  }
}
@keyframes slide-left {
  0% {
    left: 140px;
  }
  50% {
    left: 0;
  }
  100% {
    left: 140px;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
@keyframes loading {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 120px;
    left: 0;
  }
  50% {
    top: 120px;
    left: 120px;
  }
  75% {
    top: 0px;
    left: 120px;
  }
}

Comments