Skip to content

Instantly share code, notes, and snippets.

@theWhiteFox

theWhiteFox/index.pug

Last active March 21, 2022 09:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save theWhiteFox/c38e349d95fca710f6e99b3f236249ac to your computer and use it in GitHub Desktop.
Save theWhiteFox/c38e349d95fca710f6e99b3f236249ac to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS loaders
Raw
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 ♥
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 ‹div class="pulse"›‹/div›
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
| ‹div class="loader"›
| ‹div class="double-pulse"›‹/div›
| ‹div class="double-pulse"›‹/div›
| ‹/div›
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
| ‹div class="circle"›‹/div›
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 ‹div class="fade-circle"›‹/div›
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 ‹div class="rectangle"›‹/div›
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
| ‹div class="rectangle-bounce"›
| ‹div class="rect-1"›‹/div›
| ‹div class="rect-2"›‹/div›
| ‹div class="rect-3"›‹/div›
| ‹div class="rect-4"›‹/div›
| ‹div class="rect-5"›‹/div›
| ‹/div›
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
| ‹div class="three"›
| ‹div class="three-1"›‹/div›
| ‹div class="three-2"›‹/div›
| ‹div class="three-3"›‹/div›
| ‹/div›
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
| ‹div class="cubes"›
| ‹div class="cube cube-1"›‹/div›
| ‹div class="cube cube-2"›‹/div›
| ‹div class="cube cube-3"›‹/div›
| ‹div class="cube cube-4"›‹/div›
| ‹div class="cube cube-5"›‹/div›
| ‹div class="cube cube-6"›‹/div›
| ‹div class="cube cube-7"›‹/div›
| ‹div class="cube cube-8"›‹/div›
| ‹div class="cube cube-9"›‹/div›
| ‹/div›
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
| ‹div class="diamonds"›
| ‹div class="diamond diamond-1"›‹/div›
| ‹div class="diamond diamond-2"›‹/div›
| ‹div class="diamond diamond-3"›‹/div›
| ‹div class="diamond diamond-4"›‹/div›
| ‹/div›
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")
Raw
pure-css-loaders
Pure CSS loaders
----------------
A [Pen](https://codepen.io/IvanKhartov/pen/KmgzpX) by [IvanKhartov](http://codepen.io/IvanKhartov) on [CodePen](http://codepen.io/).
[License](https://codepen.io/IvanKhartov/pen/KmgzpX/license).
Raw
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);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
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
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment