From ab599f968f8c8bb117b14ce1cfba7b28644d9b02 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Fri, 16 Oct 2020 16:45:54 -0400 Subject: [PATCH] Kinetic loader --- kinetic-loader/index.html | 14 ++++++++ kinetic-loader/style.css | 69 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+) create mode 100644 kinetic-loader/index.html create mode 100644 kinetic-loader/style.css diff --git a/kinetic-loader/index.html b/kinetic-loader/index.html new file mode 100644 index 0000000..1ebaee5 --- /dev/null +++ b/kinetic-loader/index.html @@ -0,0 +1,14 @@ + + + + + + + Kinetic Loader + + +
+ + + + diff --git a/kinetic-loader/style.css b/kinetic-loader/style.css new file mode 100644 index 0000000..f783c59 --- /dev/null +++ b/kinetic-loader/style.css @@ -0,0 +1,69 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #2c3e50; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.kinetic { + position: relative; + height: 80px; + width: 80px; +} + +.kinetic::after, +.kinetic::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + border: 50px solid transparent; + border-bottom-color: #fff; + animation: rotateA 2s linear infinite 0.5s; +} + +.kinetic::before { + transform: rotate(90deg); + animation: rotateB 2s linear infinite; +} + +@keyframes rotateA { + 0%, + 25% { + transform: rotate(0deg); + } + + 50%, + 75% { + transform: rotate(180deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes rotateB { + 0%, + 25% { + transform: rotate(90deg); + } + + 50%, + 75% { + transform: rotate(270deg); + } + + 100% { + transform: rotate(450deg); + } +}