CSS Loading Spinners

CSS Loading Spinners.markdown

CSS Loading Spinners

A collection of spinners using CSS, keyframes and basic animation. No JS.

A Pen by Beau on CodePen.

License.

index.html

<header>CSS LOADING SPINNERS</header>
<table>
  <tr>
		<td>
      <div class="box">
        <div class="boxinner"></div>
      </div>
    </td>
		<td>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
    </td>
		<td>
        <div class="circle"></div>
    </td>
		<td>
        <div class="wavecontainer">
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
        </div>
    </td>
		<td>
        <div class="barcontainer">
          <div class="circleloader">
            <div class="bounce"></div>
          </div>
        </div>
     </td>
	</tr>
	<tr>
		<td>
        <div class="switchbox">
          <div class="switch"></div>
          <div class="switch" id="switch2"></div>
        </div>
     </td>
		<td>
        <div class="bouncybox">
          <div class="bouncy"></div>
        </div>
     </td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

style.css

body {
  background-color: #16a085;
  }

header {
  width: 100%;
  text-align: center;
  font-family: Arial;
  color: #FFF;
  font-size: 40pt;
}

table {
  padding: 20px;
  margin-left: auto; 
  margin-right: auto;
  }

td {
  padding: 50px;
}

td{
  width: 80px;
  height: 80px;
}
.box, .boxinner {
  -webkit-box-sizing:border-box;
  border: 4px solid #FFF;
  text-align: left;
}

.box {
  width: 80px;
  height: 80px;
  -webkit-animation: spin 3s infinite linear;
}

.wavecontainer {
  width: 80px;
}

.boxinner {
  width: 60px;
  height: 60px;
  margin: 6px auto;
  -webkit-animation: pulse 1.5s infinite linear;
  -webkit-animation-timing-function: ease;
}

.line1, .line2, .line3, .line4 {
  margin-left: 10px;
  position: absolute;
  width: 60px;
  height: 4px;
  background-color: #FFF;
  -webkit-animation: spin 1.5s infinite linear;
  -webkit-animation-timing-function: ease;
}

.line2 {
  -webkit-animation-delay: 0.1s;
}

.line3 {
  -webkit-animation-delay: 0.2s;
}

.line4 {
  -webkit-animation-delay: 0.3s;
}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  -webkit-box-sizing: border-box;
  border: solid 10px rgba(255, 255, 255, 0.2);
  border-top-color: #FFF;
  -webkit-animation: spin 1s infinite linear;
}

.wave {
  margin-top: 15px;
  float: left;
  width: 18px;
  height: 40px;
  -webkit-box-sizing: border-box;
  border: 2px solid #FFF;
  margin-left: -2px;
  -webkit-animation: slide 0.6s infinite linear;
}

.wave:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.wave:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.wave:nth-child(2n+1) {
  -webkit-animation-delay: 0.3s;
}

.circleloader {
  -webkit-border-radius: 16px;
  width: 80px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.4);
}

.bounce {
  position: absolute;
  -webkit-border-radius: 16px;
  margin: 4px;
  width: 20px;
  height: 12px;
  background-color: #FFF;
  -webkit-animation: push 1s infinite linear;
}

.switchbox {
  position: relative;
  width: 80px;
  height: 80px;
}

.switchbox {
  -webkit-animation: spin 2s infinite linear; 
}

.switch {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background-color: #FFF;
  border-radius: 20px;
  -webkit-animation: cross 2s infinite linear;
}

#switch2 {
  -webkit-animation-delay: -1s;
}

.bouncybox {
  height: 100px;
  width: 40px;
  margin-left: 20px;
}

.bouncy {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: #ecf0f1;
  -webkit-animation: bouncy 2s infinite ease-in-out;
}

@-webkit-keyframes bouncy {
  40% {
    height: 40px;
  }
  50% {
    transform: translate(0, 65px);
    height: 34px;
    border-radius: 20px;
  }
  65% {
    height: 40px; 
  }
}

@-webkit-keyframes push {
  50% {
    margin-left: 56px;
  }
}

@-webkit-keyframes slide {
  50% {
    margin-top: 25px;
  }
}

@-webkit-keyframes pulse { 
  50% { 
    border-width: 30px;
  } 
}

@-webkit-keyframes spin { 
  100% { 
    -webkit-transform: rotate(360deg); 
  } 
} 

@-webkit-keyframes cross {
  50% {
    margin-left: 60px;
  }
}