<!--CSSPin Wrapper-->

<div class="cp-wrapper">

​

  <!--Header-->

  <h1>CSS<span>PIN</span></h1>

  <p>CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code</p>

  <!--//Header-->

​

  <!--Spinners-->

  <div class="cp-spinners">

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Round Element-->

      <div class="cp-spinner cp-round"></div>

      <!--//Spinner Round Element-->

​

      <!--Caption-->

      <span>Spinner Round</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-round"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Pinwheel Element-->

      <div class="cp-spinner cp-pinwheel"></div>

      <!--//Spinner Pinwheel Element-->

​

      <!--Caption-->

      <span>Spinner Pinwheel</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-pinwheel"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Balls Element-->

      <div class="cp-spinner cp-balls"></div>

      <!--//Spinner Balls Element-->

​

      <!--Caption-->

      <span>Spinner Balls</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-balls"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Bubble Element-->

      <div class="cp-spinner cp-bubble"></div>

      <!--//Spinner Bubble Element-->

​

      <!--Caption-->

      <span>Spinner Bubble</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-bubble"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Flip Element-->

      <div class="cp-spinner cp-flip"></div>

      <!--//Spinner Flip Element-->

​

      <!--Caption-->

      <span>Spinner Flip</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-flip"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Hue Element-->

      <div class="cp-spinner cp-hue"></div>

      <!--//Spinner Hue Element-->

​

      <!--Caption-->

      <span>Spinner Hue</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-hue"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Skeleton Element-->

      <div class="cp-spinner cp-skeleton"></div>

      <!--//Spinner Skeleton Element-->

​

      <!--Caption-->

      <span>Spinner Skeleton</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-skeleton"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Eclipse Element-->

      <div class="cp-spinner cp-eclipse"></div>

      <!--//Spinner Eclipse Element-->

​

      <!--Caption-->

      <span>Spinner Eclipse</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-eclipse"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Boxes Element-->

      <div class="cp-spinner cp-boxes"></div>

      <!--//Spinner Boxes Element-->

​

      <!--Caption-->

      <span>Spinner Boxes</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-boxes"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

    <!--Spinner Block-->

    <div class="cp-spinner-block">

      <!--Spinner Morph Element-->

      <div class="cp-spinner cp-morph"></div>

      <!--//Spinner Morph Element-->

​

      <!--Caption-->

      <span>Spinner Morph</span>

      <!--//Caption-->

​

      <!--Syntax-->

      <pre><div class="cp-spinner cp-morph"></div></pre>

      <!--//Syntax-->

    </div>

    <!--//Spinner Block-->

​

  </div>

  <!--Spinners-->

​

</div>

<!--//CSSPin Wrapper-->

/*Global Variables*/

/*Colors*/

/*Box Size*/

/*Speed*/

/*Global Mixins*/

/*Global Spinner*/

.cp-spinner {

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  position: relative;

}

/*Round Spinner*/

.cp-round:before {

  border-radius: 50%;

  content: " ";

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  border-top: solid 6px #bababa;

  border-right: solid 6px #bababa;

  border-bottom: solid 6px #bababa;

  border-left: solid 6px #bababa;

  position: absolute;

  top: 0;

  left: 0;

}

.cp-round:after {

  border-radius: 50%;

  content: " ";

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  border-top: solid 6px #f56151;

  border-right: solid 6px transparent;

  border-bottom: solid 6px transparent;

  border-left: solid 6px transparent;

  position: absolute;

  top: 0;

  left: 0;

  animation: cp-round-animate 1s ease-in-out infinite;

}

/*Round Spinner Animation*/

@keyframes cp-round-animate {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

/*Pinwheel Spinner*/

.cp-pinwheel {

  border-radius: 50%;

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  border-top: solid 24px #0fd6ff;

  border-right: solid 24px #58bd55;

  border-bottom: solid 24px #eb68a1;

  border-left: solid 24px #f3d53f;

  animation: cp-pinwheel-animate 1s linear infinite;

}

/*Pinwheel Spinner Animation*/

@keyframes cp-pinwheel-animate {

  0% {

    border-top-color: #0fd6ff;

    border-right-color: #58bd55;

    border-bottom-color: #eb68a1;

    border-left-color: #f3d53f;

    transform: rotate(0deg);

  }

  25% {

    border-top-color: #eb68a1;

    border-right-color: #f3d53f;

    border-bottom-color: #0fd6ff;

    border-left-color: #58bd55;

  }

  50% {

    border-top-color: #0fd6ff;

    border-right-color: #58bd55;

    border-bottom-color: #eb68a1;

    border-left-color: #f3d53f;

  }

  75% {

    border-top-color: #eb68a1;

    border-right-color: #f3d53f;

    border-bottom-color: #0fd6ff;

    border-left-color: #58bd55;

  }

  100% {

    border-top-color: #0fd6ff;

    border-right-color: #58bd55;

    border-bottom-color: #eb68a1;

    border-left-color: #f3d53f;

    transform: rotate(360deg);

  }

}

/*Balls Spinner*/

.cp-balls {

  animation: cp-balls-animate 1s linear infinite;

}

.cp-balls:before {

  border-radius: 50%;

  content: " ";

  width: 24px;

  height: 24px;

  display: inline-block;

  box-sizing: border-box;

  background-color: #0fd6ff;

  position: absolute;

  top: 0;

  left: 0;

  animation: cp-balls-animate-before 1s ease-in-out infinite;

}

.cp-balls:after {

  border-radius: 50%;

  content: " ";

  width: 24px;

  height: 24px;

  display: inline-block;

  box-sizing: border-box;

  background-color: #eb68a1;

  position: absolute;

  bottom: 0;

  right: 0;

  animation: cp-balls-animate-after 1s ease-in-out infinite;

}

/*Balls Spinner Animation*/

@keyframes cp-balls-animate {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

@keyframes cp-balls-animate-before {

  0% {

    transform: translate(-5px, -5px);

  }

  50% {

    transform: translate(0px, 0px);

  }

  100% {

    transform: translate(-5px, -5px);

  }

}

@keyframes cp-balls-animate-after {

  0% {

    transform: translate(5px, 5px);

  }

  50% {

    transform: translate(0px, 0px);

  }

  100% {

    transform: translate(5px, 5px);

  }

}

/*Bubble Spinner*/

.cp-bubble {

  border-radius: 50%;

  width: 24px;

  height: 24px;

  display: inline-block;

  box-sizing: border-box;

  background: #58bd55;

  animation: cp-bubble-animate 1s linear infinite;

}

.cp-bubble:before {

  border-radius: 50%;

  content: " ";

  width: 24px;

  height: 24px;

  display: inline-block;

  box-sizing: border-box;

  background-color: #58bd55;

  position: absolute;

  left: -30px;

  animation: cp-bubble-animate-before 1s ease-in-out infinite;

}

.cp-bubble:after {

  border-radius: 50%;

  content: " ";

  width: 24px;

  height: 24px;

  display: inline-block;

  box-sizing: border-box;

  background-color: #58bd55;

  position: absolute;

  right: -30px;

  animation: cp-bubble-animate-after 1s ease-in-out infinite;

}

/*Bubble Spinner Animation*/

@keyframes cp-bubble-animate {

  0% {

    opacity: .5;

    transform: scale(1) translateX(0px);

  }

  25% {

    opacity: 1;

    transform: scale(1.1) translateX(-15px);

  }

  50% {

    opacity: 1;

    transform: scale(1.2) translateX(15px);

  }

  100% {

    opacity: .5;

    transform: scale(1) translateX(0px);

  }

}

@keyframes cp-bubble-animate-before {

  0% {

    opacity: .5;

    transform: scale(1);

  }

  25% {

    transform: scale(1.1);

  }

  50%,

  100% {

    opacity: 1;

    transform: scale(1);

  }

}

@keyframes cp-bubble-animate-after {

  0%,

  50% {

    opacity: .5;

    transform: scale(1);

  }

  50% {

    transform: scale(1.1);

  }

  75%,

  100% {

    opacity: 1;

    transform: scale(1);

  }

}

/*Flip Spinner*/

.cp-flip {

  transform-style: preserve-3d;

  perspective: 10em;

}

.cp-flip:before {

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  background: #f56151;

  content: " ";

  position: absolute;

  top: 0;

  left: 0;

  animation: cp-flip-animate-before 2s linear infinite;

}

/*Flip Spinner Animation*/

@keyframes cp-flip-animate-before {

  0% {

    transform: rotateY(0deg) rotateX(0deg);

  }

  25% {

    transform: rotateY(360deg) rotateX(0deg);

  }

  50% {

    transform: rotateY(360deg) rotateX(360deg);

  }

  75% {

    transform: rotateY(0deg) rotateX(360deg);

  }

  100% {

    transform: rotateY(0deg) rotateX(0deg);

  }

}

/*Hue Spinner*/

.cp-hue {

  width: 24px;

  height: 24px;

  display: inline-block;

  box-sizing: border-box;

  background: #f56151;

  border-radius: 50%;

  animation: cp-hue-animate 1s ease-in-out infinite;

}

.cp-hue:before {

  border-radius: 0% 12px 12px 0%;

  content: " ";

  width: 12px;

  height: 24px;

  display: inline-block;

  box-sizing: border-box;

  background: white;

  position: absolute;

  top: 0;

  right: 0;

  animation: cp-hue-animate-before 1s ease-in-out infinite;

}

/*Hue Spinner Animation*/

@keyframes cp-hue-animate {

  0% {

    background: #f56151;

  }

  25% {

    background: #58bd55;

  }

  50% {

    background: #eb68a1;

  }

  75% {

    background: #f3d53f;

  }

  100% {

    background: #f56151;

  }

}

@keyframes cp-hue-animate-before {

  0% {

    transform: rotateY(0deg);

    transform-origin: left center;

    opacity: .5;

  }

  30%,

  70% {

    transform: rotateY(180deg);

    transform-origin: left center;

    opacity: .2;

  }

  100% {

    transform: rotateY(0deg);

    opacity: .5;

  }

}

/*Skeleton Spinner*/

.cp-skeleton {

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  border-radius: 50%;

  border-top: solid 6px #f56151;

  border-right: solid 6px transparent;

  border-bottom: solid 6px transparent;

  border-left: solid 6px transparent;

  animation: cp-skeleton-animate 1s linear infinite;

}

.cp-skeleton:before {

  border-radius: 50%;

  content: " ";

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  border-top: solid 6px transparent;

  border-right: solid 6px transparent;

  border-bottom: solid 6px transparent;

  border-left: solid 6px #f56151;

  position: absolute;

  top: -6px;

  left: -6px;

  transform: rotateZ(-30deg);

}

.cp-skeleton:after {

  border-radius: 50%;

  content: " ";

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  border-top: solid 6px transparent;

  border-right: solid 6px #f56151;

  border-bottom: solid 6px transparent;

  border-left: solid 6px transparent;

  position: absolute;

  top: -6px;

  right: -6px;

  transform: rotateZ(30deg);

}

/*Skeleton Spinner Animation*/

@keyframes cp-skeleton-animate {

  0% {

    transform: rotate(0deg);

    opacity: 1;

  }

  50% {

    opacity: .7;

  }

  100% {

    transform: rotate(360deg);

    opacity: 1;

  }

}

/*Eclipse Spinner*/

.cp-eclipse {

  width: 12px;

  height: 12px;

  display: inline-block;

  box-sizing: border-box;

  border-radius: 50%;

  background: #f3d53f;

  margin: 12px;

  animation: cp-eclipse-animate 1s ease-out infinite;

}

.cp-eclipse:before {

  border-radius: 50%;

  content: " ";

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  border-top: solid 6px transparent;

  border-right: solid 6px #f3d53f;

  border-bottom: solid 6px transparent;

  border-left: solid 6px transparent;

  position: absolute;

  top: -18px;

  left: -18px;

}

.cp-eclipse:after {

  border-radius: 50%;

  content: " ";

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  border-top: solid 6px transparent;

  border-right: solid 6px transparent;

  border-bottom: solid 6px transparent;

  border-left: solid 6px #f3d53f;

  position: absolute;

  top: -18px;

  right: -18px;

}

/*Eclipse Spinner Animation*/

@keyframes cp-eclipse-animate {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

/*Boxes Spinner*/

.cp-boxes:before {

  width: 24px;

  height: 24px;

  display: inline-block;

  box-sizing: border-box;

  content: " ";

  background: #58bd55;

  position: absolute;

  top: 0;

  left: 0;

  animation: cp-boxes-animate-before 1s ease-in-out infinite;

}

.cp-boxes:after {

  width: 24px;

  height: 24px;

  display: inline-block;

  box-sizing: border-box;

  content: " ";

  background: #58bd55;

  position: absolute;

  top: 0;

  right: 0;

  animation: cp-boxes-animate-after 1s ease-in-out infinite;

}

/*Boxes Spinner Animation*/

@keyframes cp-boxes-animate-before {

  0% {

    transform: translateX(-20px) rotate(45deg);

  }

  50% {

    transform: translateX(-7px) rotate(225deg);

  }

  100% {

    transform: translateX(-20px) rotate(45deg);

  }

}

@keyframes cp-boxes-animate-after {

  0% {

    transform: translateX(20px) rotate(45deg);

  }

  50% {

    transform: translateX(7px) rotate(-225deg);

  }

  100% {

    transform: translateX(20px) rotate(45deg);

  }

}

/*Morph Spinner*/

.cp-morph {

  width: 48px;

  height: 48px;

  display: inline-block;

  box-sizing: border-box;

  background: #0fd6ff;

  animation: cp-morph-animate 1s linear infinite;

}

/*Morph Spinner Animation*/

@keyframes cp-morph-animate {

  0% {

    transform: rotate(0deg) scale(1);

    border-radius: 0%;

    background: #f3d53f;

  }

  25%,

  75% {

    transform: rotate(180deg) scale(0.4);

    border-radius: 50%;

    background: #0fd6ff;

  }

  100% {

    transform: rotate(360deg) scale(1);

    border-radius: 0%;

    background: #f3d53f;

  }

}

.cp-wrapper {

  text-align: center;

  margin: 45px auto;

  font-family: 'Roboto Condensed', sans-serif;

}

h1 {

  color: #00ACC1;

  font-size: 2.8em;

}

h1 span {

  color: #00838F;

}

p {

  color: #4a5b6c;

  font-size: 1.2em;

}

p.credits {

  font-size: 1em;

}

p.credits a {

  margin: 0px;

}

a:link,

a:active,

a:visited {

  color: #3F51B5;

  text-decoration: none;

  font-size: 1em;

  text-transform: uppercase;

  border-bottom: dashed 1px #3F51B5;

  margin: 0px 10px;

}

a:hover {

  border-bottom: none;

}

.cp-spinners {

  margin: 10px auto;

}

.cp-spinner-block {

  display: inline-block;

  width: 40%;

  margin: 10px 20px;

}

.cp-spinner-block span {

  color: #4a5b6c;

  display: block;

  padding: 5px 0px;

}

.cp-spinner-block pre {

  font-size: .75em;

  background-color: #f0f0f0;

  padding: 4px 7px;

  border-radius: 2px;

  font-family: "Lucida Console", Monaco, monospace;

  display: inline-block;

  white-space: pre-wrap;

}

@media only screen and (max-width: 1024px) {

  .cp-wrapper {

    width: 100%;

  }

  .cp-spinner-block {

    display: block;

    width: 90%;

    margin: 40px 5%;

  }

}

@media only screen and (min-width: 1025px) and (max-width: 1400px) {

  .cp-wrapper {

    width: 70%;

  }

  .cp-spinner-block {

    margin: 40px auto;

  }

}

@media only screen and (min-width: 1500px) {

  .cp-wrapper {

    width: 90%;

  }

  .cp-spinner-block {

    display: inline-block;

    width: 30%;

    margin: 10px 20px;

  }

}

@media only screen and (min-width: 1700px) {

  .cp-wrapper {

    width: 70%;

  }

  .cp-spinner-block {

    display: inline-block;

    width: 30%;

    margin: 10px 20px;

  }

}

​

​