Pure CSS loaders

5/12/2017 - 10:39 AM

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />

style.scss

// Variables
$grid-support: 'true';
$header-size: 6rem;
$footer-size: 7rem;
$icon-size-default: 2rem;
$white: #fff;
$dark-grey: #2f3538;
$base-bg: #2c3e50;
$animation-duration: 1.5s;

* {
  box-sizing: border-box;
}

:root {
  position: relative;
  min-height: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 10px;

  @if ($grid-support == 'true') {
    body {
      height: 100%;
      min-height: .1rem;
    }
  } @else {
    body {
      height: 100%;
      min-height: .1rem;
      margin-bottom: $footer-size;
    }
  }
}

body {
  margin: 0;
  background-color: $base-bg;
  font-size: 1.6rem;
}

a {
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}

.icons-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-content: center;
  justify-content: center;
  width: $icon-size-default;
  height: $icon-size-default;
  font-size: $icon-size-default;
  line-height: 100%;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;

  &-svg {
    display: inline-flex;
    width: 100%;
    height: 100%;
    pointer-events: none;

    &-reference {
      width: 100%;
      height: 100%;
      fill: currentColor;
    }
  }
}

.wrapper {
  @if ($grid-support == 'true') {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: $header-size 100% $footer-size;
    grid-template-areas: 'header' 'main' 'footer';
  }
  min-height: 100vh;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  @if ($grid-support == 'true') {
    grid-area: header;
  }
}

.page-title {
  margin: 0;
  color: $white;
  font-size: 2.2rem;
  line-height: 3rem;
}

.main-content {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  width: 100%;
  max-width: 96rem;
  padding: 5rem 2rem;
  @if ($grid-support == 'true') {
    grid-area: main;
  }
}

.loader {
  &-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 0 1 33.3333%;
    padding: 2rem 1rem;
  }

  &-title {
    margin: 0;
    color: $white;
    font-size: 1.8rem;
    line-height: 2.2rem;
  }

  &-source {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0 none;
    background-color: transparent;
    color: $white;
    font-size: 1.4rem;

    &:hover {
      cursor: pointer;
    }

    .icon {
      margin-right: .5rem;
    }
  }

  &-spin {
    position: relative;
    width: 6rem;
    height: 6rem;
  }
}

.main-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;

  @if ($grid-support == 'true') {
    grid-area: footer;
  } @else {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: $footer-size;
  }
}

.profile {
  position: relative;
  display: flex;
  align-items: center;
  height: 4.5rem;
  padding-left: 5rem;
  color: $white;
  font-size: 1.4rem;
  line-height: 2.1rem;

  &::before {
    position: absolute;
    content: '';
    top: 0;
    left: .2rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 100%;
    background: {
      image: url('https://pbs.twimg.com/profile_images/623441813756579840/pLlQ0Bcl.jpg');
      position: center center;
      size: 100%;
    };
    box-shadow: 0 0 0 .2rem $white;
  }

  &:hover .underline {
    transform: scaleX(1);
  }

  span:not(.underline) {
    margin-left: .5rem;
  }

  &-link {
    margin-left: .5rem;
    color: $white;
    font-size: 1.6rem;
  }

  .underline {
    position: absolute;
    display: block;
    width: calc(100% - 5.5rem);
    height: .2rem;
    right: 0;
    bottom: .8rem;
    background-color: $white;
    transition: all .25s ease-in-out 0s;
    transform: scaleX(0);
  }
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  max-width: 60rem;
  max-height: 60rem;
  border: .2rem solid $dark-grey;
  background-color: $white;
  transform: translate(-50%, -50%);
  z-index: 1050;

  code {
    display: block;
    width: 100%;
    padding: 1rem;
    background-color: rgba($base-bg, .75);
  }

  pre {
    margin: 0;
    color: $white;
    font-size: 1.2rem;
    line-height: 1.6rem;
  }

  &-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($white, .8);
    z-index: 1040;
  }

  &-header {
    display: flex;
    justify-content: space-between;
    height: 4rem;
    padding: 1rem;
    border-bottom: .1rem solid $dark-grey;
  }

  &-title {
    margin: 0;
    color: $dark-grey;
    font-size: 1.8rem;
    line-height: 2.2rem;
  }

  &-body {
    height: calc(100% - 6.1rem);
    margin: 1rem 0;
    padding: 0 1rem;
    color: $dark-grey;
    font-size: 1.4rem;
    line-height: 2rem;
    overflow: auto;
  }

  .close {
    padding: 0;
    border: 0 none;
    background-color: transparent;

    &:hover {
      cursor: pointer;
    }
  }
}

.hide {
  display: none;
}

.pulse {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 100%;
  background-color: $white;
  opacity: 1;
  animation: pulse $animation-duration infinite ease-in-out;
}

.double-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 100%;
  background-color: $white;
  opacity: .4;
  animation: double-pulse $animation-duration infinite ease-out;

  &:nth-of-type(2) {
    animation-delay: -350ms;
  }
}

.circle {
  display: inline-block;
  margin: 2.4rem;
  outline: 0 none;
  border-radius: 100%;
  font-size: 1.2rem;
  width: 1em;
  height: 1em;
  animation: circle $animation-duration infinite ease;
}

.fade-circle {
  display: inline-block;
  margin: 2.4rem;
  outline: 0 none;
  border-radius: 100%;
  font-size: 1.2rem;
  width: 1em;
  height: 1em;
  animation: fade-circle $animation-duration infinite ease;
}

.rectangle {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: $white;
  animation: rectangle $animation-duration infinite ease-in-out;
}

.rectangle-bounce {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  transition: all 300ms ease-in-out 0s;
  z-index: 1;

  .rect-1,
  .rect-2,
  .rect-3,
  .rect-4,
  .rect-5 {
    width: 15%;
    height: 100%;
    background-color: $white;
    animation: rectangle-bounce $animation-duration infinite ease-in-out;
  }

  .rect-2 {
    animation-delay: -$animation-duration + .1;
  }
  .rect-3 {
    animation-delay: -$animation-duration + .2;
  }
  .rect-4 {
    animation-delay: -$animation-duration + .3;
  }
  .rect-5 {
    animation-delay: -$animation-duration + .4;
  }
}

.threes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .three {
    display: inline-flex;
    width: 30%;
    height: 30%;
    border-radius: 100%;
    background-color: $white;
    animation: three $animation-duration infinite ease-in-out both;

    &-1 {
      animation-delay: -320ms;
    }

    &-2 {
      animation-delay: -160ms;
    }
  }
}

.cubes {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100%;
  transition: all 300ms ease-in-out 0s;
  z-index: 1;

  .cube {
    width: 33.3333%;
    height: 33.3333%;
    background-color: $white;
    animation: cubes $animation-duration infinite ease-in-out;

    &-1 {
      animation-delay: .2s;
    }

    &-2 {
      animation-delay: .3s;
    }

    &-3 {
      animation-delay: .4s;
    }

    &-4 {
      animation-delay: .1s;
    }

    &-5 {
      animation-delay: .2s;
    }

    &-6 {
      animation-delay: .3s;
    }

    &-7 {
      animation-delay: 0s;
    }

    &-8 {
      animation-delay: .1s;
    }

    &-9 {
      animation-delay: .2s;
    }
  }
}

.diamonds {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100%;
  transform: rotateZ(45deg);

  .diamond {
    position: relative;
    height: 50%;
    flex-basis: 50%;
    transform: scale(1.1);

    &::before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $white;
      animation: diamond 2.4s infinite linear both;
      transform-origin: 100% 100%;
    }

    &-2 {
      transform: scale(1.1) rotateZ(90deg);

      &::before {
        animation-delay: 300ms;
      }
    }

    &-3 {
      transform: scale(1.1) rotateZ(180deg);

      &::before {
        animation-delay: 600ms;
      }
    }

    &-4 {
      transform: scale(1.1) rotateZ(270deg);

      &::before {
        animation-delay: 900ms;
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: .8;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes double-pulse {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes circle {
   0%,
   100% {
     box-shadow: 0em -2em 0em 0em $white, 1.4em -1.4em 0em 0em rgba($white, 0.2), 2em 0em 0em 0em rgba($white, 0.2), 1.4em 1.4em 0em 0em rgba($white, 0.2), 0em 2em 0em 0em rgba($white, 0.2), -1.4em 1.4em 0em 0em rgba($white, 0.4), -2em 0em 0em 0em rgba($white, 0.6), -1.4em -1.4em 0em 0em rgba($white, 0.8);
   }

   12.5% {
     box-shadow: 0em -2em 0em 0em rgba($white, 0.8), 1.4em -1.4em 0em 0em $white, 2em 0em 0em 0em rgba($white, 0.2), 1.4em 1.4em 0em 0em rgba($white, 0.2), 0em 2em 0em 0em rgba($white, 0.2), -1.4em 1.4em 0em 0em rgba($white, 0.2), -2em 0em 0em 0em rgba($white, 0.4), -1.4em -1.4em 0em 0em rgba($white, 0.6);
   }

   25% {
     box-shadow: 0em -2em 0em 0em rgba($white, 0.6), 1.4em -1.4em 0em 0em rgba($white, 0.8), 2em 0em 0em 0em $white, 1.4em 1.4em 0em 0em rgba($white, 0.2), 0em 2em 0em 0em rgba($white, 0.2), -1.4em 1.4em 0em 0em rgba($white, 0.2), -2em 0em 0em 0em rgba($white, 0.2), -1.4em -1.4em 0em 0em rgba($white, 0.4);
   }

   37.5% {
     box-shadow: 0em -2em 0em 0em rgba($white, 0.4), 1.4em -1.4em 0em 0em rgba($white, 0.6), 2em 0em 0em 0em rgba($white, 0.8), 1.4em 1.4em 0em 0em $white, 0em 2em 0em 0em rgba($white, 0.2), -1.4em 1.4em 0em 0em rgba($white, 0.2), -2em 0em 0em 0em rgba($white, 0.2), -1.4em -1.4em 0em 0em rgba($white, 0.2);
   }
   50% {
     box-shadow: 0em -2em 0em 0em rgba($white, 0.2), 1.4em -1.4em 0em 0em rgba($white, 0.4), 2em 0em 0em 0em rgba($white, 0.6), 1.4em 1.4em 0em 0em rgba($white, 0.8), 0em 2em 0em 0em $white, -1.4em 1.4em 0em 0em rgba($white, 0.2), -2em 0em 0em 0em rgba($white, 0.2), -1.4em -1.4em 0em 0em rgba($white, 0.2);
   }
   62.5% {
     box-shadow: 0em -2em 0em 0em rgba($white, 0.2), 1.4em -1.4em 0em 0em rgba($white, 0.2), 2em 0em 0em 0em rgba($white, 0.4), 1.4em 1.4em 0em 0em rgba($white, 0.6), 0em 2em 0em 0em rgba($white, 0.8), -1.4em 1.4em 0em 0em $white, -2em 0em 0em 0em rgba($white, 0.2), -1.4em -1.4em 0em 0em rgba($white, 0.2);
   }

   75% {
     box-shadow: 0em -2em 0em 0em rgba($white, 0.2), 1.4em -1.4em 0em 0em rgba($white, 0.2), 2em 0em 0em 0em rgba($white, 0.2), 1.4em 1.4em 0em 0em rgba($white, 0.4), 0em 2em 0em 0em rgba($white, 0.6), -1.4em 1.4em 0em 0em rgba($white, 0.8), -2em 0em 0em 0em $white, -1.4em -1.4em 0em 0em rgba($white, 0.2);
   }

   87.5% {
     box-shadow: 0em -2em 0em 0em rgba($white, 0.2), 1.4em -1.4em 0em 0em rgba($white, 0.2), 2em 0em 0em 0em rgba($white, 0.2), 1.4em 1.4em 0em 0em rgba($white, 0.2), 0em 2em 0em 0em rgba($white, 0.4), -1.4em 1.4em 0em 0em rgba($white, 0.6), -2em 0em 0em 0em rgba($white, 0.8), -1.4em -1.4em 0em 0em $white;
   }
 }

@keyframes fade-circle {
  0%,
  100% {
    box-shadow: 0em -2em 0em 0em $white, 1.4em -1.4em 0em 0em rgba($white, 0), 2em 0em 0em 0em rgba($white, 0), 1.4em 1.4em 0em 0em rgba($white, 0), 0em 2em 0em 0em rgba($white, 0.2), -1.4em 1.4em 0em 0em rgba($white, 0.4), -2em 0em 0em 0em rgba($white, 0.6), -1.4em -1.4em 0em 0em rgba($white, 0.8);
  }

  12.5% {
    box-shadow: 0em -2em 0em 0em rgba($white, 0.8), 1.4em -1.4em 0em 0em $white, 2em 0em 0em 0em rgba($white, 0), 1.4em 1.4em 0em 0em rgba($white, 0), 0em 2em 0em 0em rgba($white, 0), -1.4em 1.4em 0em 0em rgba($white, 0.2), -2em 0em 0em 0em rgba($white, 0.4), -1.4em -1.4em 0em 0em rgba($white, 0.6);
  }

  25% {
    box-shadow: 0em -2em 0em 0em rgba($white, 0.6), 1.4em -1.4em 0em 0em rgba($white, 0.8), 2em 0em 0em 0em $white, 1.4em 1.4em 0em 0em rgba($white, 0), 0em 2em 0em 0em rgba($white, 0), -1.4em 1.4em 0em 0em rgba($white, 0), -2em 0em 0em 0em rgba($white, 0.2), -1.4em -1.4em 0em 0em rgba($white, 0.4);
  }

  37.5% {
    box-shadow: 0em -2em 0em 0em rgba($white, 0.4), 1.4em -1.4em 0em 0em rgba($white, 0.6), 2em 0em 0em 0em rgba($white, 0.8), 1.4em 1.4em 0em 0em $white, 0em 2em 0em 0em rgba($white, 0), -1.4em 1.4em 0em 0em rgba($white, 0), -2em 0em 0em 0em rgba($white, 0), -1.4em -1.4em 0em 0em rgba($white, 0.2);
  }
  50% {
    box-shadow: 0em -2em 0em 0em rgba($white, 0.2), 1.4em -1.4em 0em 0em rgba($white, 0.4), 2em 0em 0em 0em rgba($white, 0.6), 1.4em 1.4em 0em 0em rgba($white, 0.8), 0em 2em 0em 0em $white, -1.4em 1.4em 0em 0em rgba($white, 0), -2em 0em 0em 0em rgba($white, 0), -1.4em -1.4em 0em 0em rgba($white, 0);
  }
  62.5% {
    box-shadow: 0em -2em 0em 0em rgba($white, 0), 1.4em -1.4em 0em 0em rgba($white, 0.2), 2em 0em 0em 0em rgba($white, 0.4), 1.4em 1.4em 0em 0em rgba($white, 0.6), 0em 2em 0em 0em rgba($white, 0.8), -1.4em 1.4em 0em 0em $white, -2em 0em 0em 0em rgba($white, 0), -1.4em -1.4em 0em 0em rgba($white, 0);
  }

  75% {
    box-shadow: 0em -2em 0em 0em rgba($white, 0), 1.4em -1.4em 0em 0em rgba($white, 0), 2em 0em 0em 0em rgba($white, 0.2), 1.4em 1.4em 0em 0em rgba($white, 0.4), 0em 2em 0em 0em rgba($white, 0.6), -1.4em 1.4em 0em 0em rgba($white, 0.8), -2em 0em 0em 0em $white, -1.4em -1.4em 0em 0em rgba($white, 0);
  }

  87.5% {
    box-shadow: 0em -2em 0em 0em rgba($white, 0), 1.4em -1.4em 0em 0em rgba($white, 0), 2em 0em 0em 0em rgba($white, 0), 1.4em 1.4em 0em 0em rgba($white, 0.2), 0em 2em 0em 0em rgba($white, 0.4), -1.4em 1.4em 0em 0em rgba($white, 0.6), -2em 0em 0em 0em rgba($white, 0.8), -1.4em -1.4em 0em 0em $white;
  }
}

@keyframes rectangle {
  0% {
    transform:perspective(12rem) rotateX(0deg) rotateY(0deg)
  }
  50% {
    transform:perspective(12rem) rotateX(-180.1deg) rotateY(0deg)
  }
  100% {
    transform:perspective(12rem) rotateX(-180deg) rotateY(-179.9deg)
  }
}

@keyframes rectangle-bounce {
  0%, 40%, 100% {
    transform:scaleY(0.4);
  }
  20% {
    transform:scaleY(1);
  }
}

@keyframes three {
  0%, 80%, 100% {
    transform: scale(0)
  }
  40% {
    transform: scale(1);
  }
}

@keyframes cubes {
  0%, 70%, 100% {
    transform:scale3d(1, 1, 1);
  }
  35% {
    transform:scale3d(0, 0, 1);
  }
}

@keyframes diamond {
  0%, 10% {
    transform:perspective(14rem) rotateX(-180deg);
    opacity:0
  }
  25%, 75% {
    transform:perspective(14rem) rotateX(0deg);
    opacity:1
  }
  90%, 100% {
    transform:perspective(14rem) rotateY(180deg);
    opacity:0
  }
}

script.js

(function ($) {
  'use strict';

  var $modal         = $('.modal');
  var $modalBackdrop = $('.modal-backdrop');

  $(document).ready(function () {
    $modalBackdrop.on('click', function () {
      $modal.addClass('hide');
      $modalBackdrop.toggleClass('hide');
    });
  });

  $(document).on('click', '[data-modal-id]', function () {
    var $modalId = $(this).attr('data-modal-id');

    $('#' + $modalId).toggleClass('hide');
    $modalBackdrop.toggleClass('hide');
  });

})(jQuery);

pure-css-loaders.markdown

Rendered
Source

Pure CSS loaders

A Pen by IvanKhartov on CodePen.

License.

scripts

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

index.pug

doctype html
html
  head
    meta(charset="utf-8")
  body
    .wrapper
      header.main-header
        h1.page-title Single Element CSS Loaders
      main.main-content
        section.loader-section
          h2.loader-title Pulse
          div.loader-spin
            .pulse
          button.loader-source(title="View source code" data-modal-id="pulse")
            span.icon
              svg.icon-svg(aria-hidden="true" focusable="false" role="img")
                use.icon-svg-reference(href="#icon-code" xlink:href="#icon-code")
            span Source
        section.loader-section
          h2.loader-title Double pulse
          div.loader-spin
            .double-pulse
            .double-pulse
          button.loader-source(title="View source code" data-modal-id="doublePulse")
            span.icon
              svg.icon-svg(aria-hidden="true" focusable="false" role="img")
                use.icon-svg-reference(href="#icon-code" xlink:href="#icon-code")
            span Source
        section.loader-section
          h2.loader-title Circle
          div.loader-spin
            .circle
          button.loader-source(title="View source code" data-modal-id="circle")
            span.icon
              svg.icon-svg(aria-hidden="true" focusable="false" role="img")
                use.icon-svg-reference(href="#icon-code" xlink:href="#icon-code")
            span Source
        section.loader-section
          h2.loader-title Fade circle
          div.loader-spin
            .fade-circle
          button.loader-source(title="View source code" data-modal-id="fadeCircle")
            span.icon
              svg.icon-svg(aria-hidden="true" focusable="false" role="img")
                use.icon-svg-reference(href="#icon-code" xlink:href="#icon-code")
            span Source
        section.loader-section
          h2.loader-title Rectangle
          div.loader-spin
            .rectangle
          button.loader-source(title="View source code" data-modal-id="rectangle")
            span.icon
              svg.icon-svg(aria-hidden="true" focusable="false" role="img")
                use.icon-svg-reference(href="#icon-code" xlink:href="#icon-code")
            span Source
        section.loader-section
          h2.loader-title Rectangle bounce
          div.loader-spin
            .rectangle-bounce
              .rect-1
              .rect-2
              .rect-3
              .rect-4
              .rect-5
          button.loader-source(title="View source code" data-modal-id="rectangle-bounce")
            span.icon
              svg.icon-svg(aria-hidden="true" focusable="false" role="img")
                use.icon-svg-reference(href="#icon-code" xlink:href="#icon-code")
            span Source
        section.loader-section
          h2.loader-title Three
          div.loader-spin
            .threes
              .three.three-1
              .three.three-2
              .three.three-3
          button.loader-source(title="View source code" data-modal-id="three")
            span.icon
              svg.icon-svg(aria-hidden="true" focusable="false" role="img")
                use.icon-svg-reference(href="#icon-code" xlink:href="#icon-code")
            span Source
        section.loader-section
          h2.loader-title Cubes
          div.loader-spin
            .cubes
              .cube.cube-1
              .cube.cube-2
              .cube.cube-3
              .cube.cube-4
              .cube.cube-5
              .cube.cube-6
              .cube.cube-7
              .cube.cube-8
              .cube.cube-9
          button.loader-source(title="View source code" data-modal-id="cubes")
            span.icon
              svg.icon-svg(aria-hidden="true" focusable="false" role="img")
                use.icon-svg-reference(href="#icon-code" xlink:href="#icon-code")
            span Source
        section.loader-section
          h2.loader-title Diamond
          div.loader-spin
            .diamonds
              .diamond.diamond-1
              .diamond.diamond-2
              .diamond.diamond-4
              .diamond.diamond-3
          button.loader-source(title="View source code" data-modal-id="diamond")
            span.icon
              svg.icon-svg(aria-hidden="true" focusable="false" role="img")
                use.icon-svg-reference(href="#icon-code" xlink:href="#icon-code")
            span Source
      footer.main-footer
        .profile
          span Created by
          a.profile-link(href="https://twitter.com/IvanKhartov" target="_blank")
            strong @IvanKhartov
          span with	&hearts;
          span.underline
    section#pulse(class="modal hide")
      header.modal-header
        h3.modal-title Pulse - Source code
        button.close(title="Close" data-modal-id="pulse")
          span.icon
            svg.icon-svg(aria-hidden="true" focusable="false" role="img")
              use.icon-svg-reference(href="#icon-close" xlink:href="#icon-close")
      div.modal-body
        h4 HTML code
        code
          pre &lsaquo;div class="pulse"&rsaquo;&lsaquo;/div&rsaquo;
        h4 SCSS code
        code
          pre
            | $loader-size: 5rem;
            | $animation-duration: 1.5s;
            | 
            | .pulse {
            |    width: $loader-size;
            |    height: $loader-size;
            |    margin: 0 auto;
            |    border-radius: 100%;
            |    background-color: white;
            |    opacity: 1;
            |    animation: pulse $animation-duration infinite ease-in-out;
            | }
            | 
            | @keyframes pulse {
            |   0% {
            |     transform: scale(0);
            |     opacity: .8;
            |   }
            |   100% {
            |     transform: scale(1);
            |     opacity: 0;
            |   }
            | }
    section#doublePulse(class="modal hide")
      header.modal-header
        h3.modal-title Double pulse - Source code
        button.close(title="Close" data-modal-id="doublePulse")
          span.icon
            svg.icon-svg(aria-hidden="true" focusable="false" role="img")
              use.icon-svg-reference(href="#icon-close" xlink:href="#icon-close")
      div.modal-body
        h4 HTML code
        code
          pre
            | &lsaquo;div class="loader"&rsaquo;
            |   &lsaquo;div class="double-pulse"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="double-pulse"&rsaquo;&lsaquo;/div&rsaquo;
            | &lsaquo;/div&rsaquo;
        h4 SCSS code
        code
          pre
            | $loader-size: 5rem;
            | $animation-duration: 1.5s;
            | 
            | .loader {
            |   position: relative;
            | }
            | 
            | .double-pulse {
            |   position: absolute;
            |   top: 0;
            |   left: 0;
            |   width: $loader-size;
            |   height: $loader-size;
            |   margin: 0 auto;
            |   border-radius: 100%;
            |   background-color: white;
            |   opacity: .4;
            |   animation: double-pulse $animation-duration infinite ease-out;
            | 
            |   &:nth-of-type(2) {
            |     animation-delay: -350ms;
            |   }
            | }
            | 
            | @keyframes double-pulse {
            |   0% {
            |     transform: scale(0);
            |   }
            |   100% {
            |     transform: scale(1);
            |     opacity: 0;
            |   }
            | }
    section#circle(class="modal hide")
      header.modal-header
        h3.modal-title Circle - Source code
        button.close(title="Close" data-modal-id="circle")
          span.icon
            svg.icon-svg(aria-hidden="true" focusable="false" role="img")
              use.icon-svg-reference(href="#icon-close" xlink:href="#icon-close")
      div.modal-body
        h4 HTML code
        code
          pre
            | &lsaquo;div class="circle"&rsaquo;&lsaquo;/div&rsaquo;
        h4 SCSS code
        code
          pre
            | $animation-duration: 1.5s;
            | 
            | .circle {
            |   display: inline-block;
            |   margin: 2.4rem;
            |   outline: 0 none;
            |   border-radius: 100%;
            |   font-size: 1.2rem;
            |   width: 1em;
            |   height: 1em;
            |   animation: circle $animation-duration infinite ease;
            | }
            | 
            | @keyframes circle {
            |   0%,
            |   100% {
            |     box-shadow: 0em -2em 0em 0em white,
            |                 1.4em -1.4em 0em 0em rgba(white, 0.2),
            |                 2em 0em 0em 0em rgba(white, 0.2),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 0em 2em 0em 0em rgba(white, 0.2),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.4),
            |                 -2em 0em 0em 0em rgba(white, 0.6),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.8);
            |   }
            |   
            |   12.5% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.8),
            |                 1.4em -1.4em 0em 0em white,
            |                 2em 0em 0em 0em rgba(white, 0.2),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 0em 2em 0em 0em rgba(white, 0.2),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 -2em 0em 0em 0em rgba(white, 0.4),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.6);
            |   }
            | 
            |   25% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.6),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.8),
            |                 2em 0em 0em 0em white,
            |                 1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 0em 2em 0em 0em rgba(white, 0.2),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 -2em 0em 0em 0em rgba(white, 0.2),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.4);
            |   }
            | 
            |   37.5% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.4),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.6),
            |                 2em 0em 0em 0em rgba(white, 0.8),
            |                 1.4em 1.4em 0em 0em white,
            |                 0em 2em 0em 0em rgba(white, 0.2),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 -2em 0em 0em 0em rgba(white, 0.2),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.2);
            |   }
            |  
            |   50% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.4),
            |                 2em 0em 0em 0em rgba(white, 0.6),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.8),
            |                 0em 2em 0em 0em white,
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 -2em 0em 0em 0em rgba(white, 0.2),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.2);
            |   }
            |  
            |   62.5% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.2),
            |                 2em 0em 0em 0em rgba(white, 0.4),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.6),
            |                 0em 2em 0em 0em rgba(white, 0.8),
            |                 -1.4em 1.4em 0em 0em white,
            |                 -2em 0em 0em 0em rgba(white, 0.2),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.2);
            |   }
            | 
            |   75% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.2),
            |                 2em 0em 0em 0em rgba(white, 0.2),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.4),
            |                 0em 2em 0em 0em rgba(white, 0.6),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.8),
            |                 -2em 0em 0em 0em white,
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.2);
            |   }
            | 
            |   87.5% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.2),
            |                 2em 0em 0em 0em rgba(white, 0.2),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 0em 2em 0em 0em rgba(white, 0.4),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.6),
            |                 -2em 0em 0em 0em rgba(white, 0.8),
            |                 -1.4em -1.4em 0em 0em white;
            |   }
            |}
    section#fadeCircle(class="modal hide")
      header.modal-header
        h3.modal-title Fade circle - Source code
        button.close(title="Close" data-modal-id="fadeCircle")
          span.icon
            svg.icon-svg(aria-hidden="true" focusable="false" role="img")
              use.icon-svg-reference(href="#icon-close" xlink:href="#icon-close")
      div.modal-body
        h4 HTML code
        code
          pre &lsaquo;div class="fade-circle"&rsaquo;&lsaquo;/div&rsaquo;
        h4 SCSS code
        code
          pre
            | $animation-duration: 1.5s;
            | 
            | .fade-circle {
            |   display: inline-block;
            |   margin: 2.4rem;
            |   outline: 0 none;
            |   border-radius: 100%;
            |   font-size: 1.2rem;
            |   width: 1em;
            |   height: 1em;
            |   animation: fade-circle $animation-duration infinite ease;
            | }
            | 
            | @keyframes fade-circle {
            |   0%,
            |   100% {
            |     box-shadow: 0em -2em 0em 0em white,
            |                 1.4em -1.4em 0em 0em rgba(white, 0),
            |                 2em 0em 0em 0em rgba(white, 0),
            |                 1.4em 1.4em 0em 0em rgba(white, 0),
            |                 0em 2em 0em 0em rgba(white, 0.2),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.4),
            |                 -2em 0em 0em 0em rgba(white, 0.6),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.8);
            |   }
            | 
            |   12.5% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.8),
            |                 1.4em -1.4em 0em 0em white,
            |                 2em 0em 0em 0em rgba(white, 0),
            |                 1.4em 1.4em 0em 0em rgba(white, 0),
            |                 0em 2em 0em 0em rgba(white, 0),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 -2em 0em 0em 0em rgba(white, 0.4),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.6);
            |   }
            | 
            |   25% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.6),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.8),
            |                 2em 0em 0em 0em white,
            |                 1.4em 1.4em 0em 0em rgba(white, 0),
            |                 0em 2em 0em 0em rgba(white, 0),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0),
            |                 -2em 0em 0em 0em rgba(white, 0.2),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.4);
            |   }
            | 
            |   37.5% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.4),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.6),
            |                 2em 0em 0em 0em rgba(white, 0.8),
            |                 1.4em 1.4em 0em 0em white,
            |                 0em 2em 0em 0em rgba(white, 0),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0),
            |                 -2em 0em 0em 0em rgba(white, 0),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0.2);
            |   }
            | 
            |   50% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.4),
            |                 2em 0em 0em 0em rgba(white, 0.6),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.8),
            |                 0em 2em 0em 0em white,
            |                 -1.4em 1.4em 0em 0em rgba(white, 0),
            |                 -2em 0em 0em 0em rgba(white, 0),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0);
            |   }
            | 
            |   62.5% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0),
            |                 1.4em -1.4em 0em 0em rgba(white, 0.2),
            |                 2em 0em 0em 0em rgba(white, 0.4),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.6),
            |                 0em 2em 0em 0em rgba(white, 0.8),
            |                 -1.4em 1.4em 0em 0em white,
            |                 -2em 0em 0em 0em rgba(white, 0),
            |                 -1.4em -1.4em 0em 0em rgba(white, 0);
            |   }
            | 
            |   75% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0),
            |                 1.4em -1.4em 0em 0em rgba(white, 0),
            |                 2em 0em 0em 0em rgba(white, 0.2),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.4),
            |                 0em 2em 0em 0em rgba(white, 0.6),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.8),
            |                 -2em 0em 0em 0em white,
            |                 -1.4em -1.4em 0em 0em rgba(white, 0);
            |   }
            | 
            |   87.5% {
            |     box-shadow: 0em -2em 0em 0em rgba(white, 0),
            |                 1.4em -1.4em 0em 0em rgba(white, 0),
            |                 2em 0em 0em 0em rgba(white, 0),
            |                 1.4em 1.4em 0em 0em rgba(white, 0.2),
            |                 0em 2em 0em 0em rgba(white, 0.4),
            |                 -1.4em 1.4em 0em 0em rgba(white, 0.6),
            |                 -2em 0em 0em 0em rgba(white, 0.8),
            |                 -1.4em -1.4em 0em 0em white;
            |   }
            | }
    section#rectangle(class="modal hide")
      header.modal-header
        h3.modal-title Rectangle - Source code
        button.close(title="Close" data-modal-id="rectangle")
          span.icon
            svg.icon-svg(aria-hidden="true" focusable="false" role="img")
              use.icon-svg-reference(href="#icon-close" xlink:href="#icon-close")
      div.modal-body
        h4 HTML code
        code
          pre &lsaquo;div class="rectangle"&rsaquo;&lsaquo;/div&rsaquo;
        h4 SCSS code
        code
          pre
            | $loader-size: 5rem;
            | $animation-duration: 1.5s;
            | 
            | .rectangle {
            |   width: $loader-size;
            |   height: $loader-size;
            |   margin: 0 auto;
            |   background-color: white;
            |   animation: rectangle $animation-duration infinite ease-in-out;
            | }
            | 
            | @keyframes rectangle {
            |   0% {
            |     transform:perspective(12rem) rotateX(0deg) rotateY(0deg)
            |   }
            |   50% {
            |     transform:perspective(12rem) rotateX(-180.1deg) rotateY(0deg)
            |   }
            |   100% {
            |     transform:perspective(12rem) rotateX(-180deg) rotateY(-179.9deg)
            |   }
            | }
    section#rectangle-bounce(class="modal hide")
      header.modal-header
        h3.modal-title Rectangle bounce - Source code
        button.close(title="Close" data-modal-id="rectangle-bounce")
          span.icon
            svg.icon-svg(aria-hidden="true" focusable="false" role="img")
              use.icon-svg-reference(href="#icon-close" xlink:href="#icon-close")
      div.modal-body
        h4 HTML code
        code
          pre
            | &lsaquo;div class="rectangle-bounce"&rsaquo;
            |   &lsaquo;div class="rect-1"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="rect-2"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="rect-3"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="rect-4"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="rect-5"&rsaquo;&lsaquo;/div&rsaquo;
            | &lsaquo;/div&rsaquo;
        h4 SCSS code
        code
          pre
            | $loader-size: 5rem;
            | $animation-duration: 1.5s;
            | 
            | .rectangle-bounce {
            |   position: relative;
            |   display: flex;
            |   justify-content: space-between;
            |   width: $loader-size;
            |   height: $loader-size;
            |   transition: all 300ms ease-in-out 0s;
            |   z-index: 1;
            | 
            |   .rect-1,
            |   .rect-2,
            |   .rect-3,
            |   .rect-4,
            |   .rect-5 {
            |     width: 15%;
            |     height: 100%;
            |     background-color: white;
            |     animation: rectangle-bounce $animation-duration infinite ease-in-out;
            |   }
            | 
            |   .rect-2 {
            |     animation-delay: -$animation-duration + .1;
            |   }
            |   .rect-3 {
            |     animation-delay: -$animation-duration + .2;
            |   }
            |   .rect-4 {
            |     animation-delay: -$animation-duration + .3;
            |   }
            |   .rect-5 {
            |     animation-delay: -$animation-duration + .4;
            |   }
            | } 
            | 
            | @keyframes rectangle-bounce {
            |   0%, 40%, 100% {
            |     transform:scaleY(0.4);
            |   }
            |   20% {
            |     transform:scaleY(1);
            |   }
            | }
    section#three(class="modal hide")
      header.modal-header
        h3.modal-title Three - Source code
        button.close(title="Close" data-modal-id="three")
          span.icon
            svg.icon-svg(aria-hidden="true" focusable="false" role="img")
              use.icon-svg-reference(href="#icon-close" xlink:href="#icon-close")
      div.modal-body
        h4 HTML code
        code
          pre
            | &lsaquo;div class="three"&rsaquo;
            |   &lsaquo;div class="three-1"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="three-2"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="three-3"&rsaquo;&lsaquo;/div&rsaquo;
            | &lsaquo;/div&rsaquo;
        h4 SCSS code
        code
          pre
            | $loader-size: 5rem;
            | $animation-duration: 1.5s;
            | 
            | .threes {
            |   display: flex;
            |   align-items: center;
            |   justify-content: space-between;
            |   width: $loader-size;
            |   height: $loader-size;
            | 
            |   .three {
            |     display: inline-flex;
            |     width: 30%;
            |     height: 30%;
            |     border-radius: 100%;
            |     background-color: white;
            |     animation: three $animation-duration infinite ease-in-out both;
            | 
            |     &-1 {
            |       animation-delay: -320ms;
            |     }
            | 
            |     &-2 {
            |       animation-delay: -160ms;
            |     }
            |   }
            | }
            | 
            | @keyframes three {
            |   0%, 80%, 100% {
            |     transform:scale(0)
            |   }
            |   40% {
            |     transform:scale(1);
            |   }
            | }
    section#cubes(class="modal hide")
      header.modal-header
        h3.modal-title Cubes - Source code
        button.close(title="Close" data-modal-id="cubes")
          span.icon
            svg.icon-svg(aria-hidden="true" focusable="false" role="img")
              use.icon-svg-reference(href="#icon-close" xlink:href="#icon-close")
      div.modal-body
        h4 HTML code
        code
          pre
            | &lsaquo;div class="cubes"&rsaquo;
            |   &lsaquo;div class="cube cube-1"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="cube cube-2"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="cube cube-3"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="cube cube-4"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="cube cube-5"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="cube cube-6"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="cube cube-7"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="cube cube-8"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="cube cube-9"&rsaquo;&lsaquo;/div&rsaquo;
            | &lsaquo;/div&rsaquo;
        h4 SCSS code
        code
          pre
            | $loader-size: 5rem;
            | $animation-duration: 1.5s;
            | 
            | .cubes {
            |   position: relative;
            |   display: flex;
            |   flex-flow: row wrap;
            |   width: $loader-size;
            |   height: $loader-size;
            |   transition: all 300ms ease-in-out 0s;
            |   z-index: 1;
            | 
            |   .cube {
            |     width: 33.3333%;
            |     height: 33.3333%;
            |     background-color: white;
            |     animation: cubes $animation-duration infinite ease-in-out;
            | 
            |     &-1 {
            |       animation-delay: .2s;
            |     }
            | 
            |     &-2 {
            |       animation-delay: .3s;
            |     }
            | 
            |     &-3 {
            |       animation-delay: .4s;
            |     }
            | 
            |     &-4 {
            |       animation-delay: .1s;
            |     }
            | 
            |     &-5 {
            |       animation-delay: .2s;
            |     }
            | 
            |     &-6 {
            |       animation-delay: .3s;
            |     }
            | 
            |     &-7 {
            |       animation-delay: 0s;
            |     }
            | 
            |     &-8 {
            |       animation-delay: .1s;
            |     }
            | 
            |     &-9 {
            |       animation-delay: .2s;
            |     }
            |   }
            | }
            | 
            | @keyframes cubes {
            |   0%, 70%, 100% {
            |     transform:scale3d(1, 1, 1);
            |   }
            |   35% {
            |     transform:scale3d(0, 0, 1);
            |   }
            | }
    section#diamond(class="modal hide")
      header.modal-header
        h3.modal-title Diamond - Source code
        button.close(title="Close" data-modal-id="diamond")
          span.icon
            svg.icon-svg(aria-hidden="true" focusable="false" role="img")
              use.icon-svg-reference(href="#icon-close" xlink:href="#icon-close")
      div.modal-body
        h4 HTML code
        code
          pre
            | &lsaquo;div class="diamonds"&rsaquo;
            |   &lsaquo;div class="diamond diamond-1"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="diamond diamond-2"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="diamond diamond-3"&rsaquo;&lsaquo;/div&rsaquo;
            |   &lsaquo;div class="diamond diamond-4"&rsaquo;&lsaquo;/div&rsaquo;
            | &lsaquo;/div&rsaquo;
        h4 SCSS code
        code
          pre
            | $loader-size: 5rem;
            | $animation-duration: 2.4s;
            | 
            | .diamonds {
            |   display: flex;
            |   flex-flow: row wrap;
            |   width: $loader-size;
            |   height: $loader-size;
            |   transform: rotateZ(45deg);
            | 
            |   .diamond {
            |     position: relative;
            |     height: 50%;
            |     flex-basis: 50%;
            |     transform: scale(1.1);
            | 
            |     &::before {
            |       position: absolute;
            |       content: '';
            |       top: 0;
            |       left: 0;
            |       width: 100%;
            |       height: 100%;
            |       background-color: $white;
            |       animation: diamond $animation-duration infinite linear both;
            |       transform-origin: 100% 100%;
            |     }
            | 
            |     &-2 {
            |       transform: scale(1.1) rotateZ(90deg);
            | 
            |       &::before {
            |         animation-delay: 300ms;
            |       }
            |     }
            | 
            |     &-3 {
            |       transform: scale(1.1) rotateZ(180deg);
            | 
            |       &::before {
            |         animation-delay: 600ms;
            |       }
            |     }
            | 
            |     &-4 {
            |       transform: scale(1.1) rotateZ(270deg);
            | 
            |       &::before {
            |         animation-delay: 900ms;
            |       }
            |     }
            |   }
            | }
            | 
            | @keyframes diamond {
            |   0%, 10% {
            |     transform:perspective(14rem) rotateX(-180deg);
            |     opacity:0
            |   }
            |   25%, 75% {
            |     transform:perspective(14rem) rotateX(0deg);
            |     opacity:1
            |   }
            |   90%, 100% {
            |     transform:perspective(14rem) rotateY(180deg);
            |     opacity:0
            |   }
            | }
    div.modal-backdrop.hide
    svg.icons-svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink")
      symbol#icon-code(viewBox="0 0 24 24")
        path(d="M0 0h24v24H0V0z" fill="none")
        path(d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z")
      symbol#icon-close(viewBox="0 0 24 24")
        path(d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z")
        path(d="M0 0h24v24H0z" fill="none")

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Pure CSS loaders

Pure CSS loaders