From 2f4ddcfd91cc29f83c51e2aea9317957eed49cca Mon Sep 17 00:00:00 2001
From: antriksh123 <33229117+antriksh123@users.noreply.github.com>
Date: Sat, 1 Aug 2020 14:25:16 +0530
Subject: [PATCH 1/3] :memo: Updated
---
spinkit.css | 44 +++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 43 insertions(+), 1 deletion(-)
diff --git a/spinkit.css b/spinkit.css
index dca5031..5218468 100644
--- a/spinkit.css
+++ b/spinkit.css
@@ -572,4 +572,46 @@
} 100% {
transform: rotate(-360deg);
}
-}
\ No newline at end of file
+}
+
+@keyframes sk-ball {
+ 0%, 100% {
+ animation-timing-function: cubic-bezier(0.45,0,0.9,0.55)
+ }
+ 0% {
+ transform: translate(0,0)
+ }
+ 50% {
+ transform: translate(0,92px);
+ animation-timing-function: cubic-bezier(0,0.45,0.55,0.9);
+ }
+ 100% {
+ transform: translate(0,0);
+ }
+}
+
+.sk-ball-circle {
+ position: absolute;
+ width: 55.2px;
+ height: 55.2px;
+ border-radius: 50%;
+ background: black;
+ left: 64.4px;
+ top: 18.400000000000002px;
+ animation: sk-ball 0.9803921568627451s linear infinite;
+}
+.sk-ball-container {
+ width: 184px;
+ height: 184px;
+ display: inline-block;
+ overflow: hidden;
+}
+.sk-ball {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ transform: translateZ(0) scale(1);
+ backface-visibility: hidden;
+ transform-origin: 0 0; /* see note above */
+}
+.sk-ball-circle { box-sizing: content-box; }
From e0386cbfb4826512d963ddf616d538a7deb7cf63 Mon Sep 17 00:00:00 2001
From: antriksh123 <33229117+antriksh123@users.noreply.github.com>
Date: Sat, 1 Aug 2020 14:26:36 +0530
Subject: [PATCH 2/3] Updates Spinkit.css
Added ball bouncing animation to the file
---
spinkit.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/spinkit.css b/spinkit.css
index 5218468..69e628a 100644
--- a/spinkit.css
+++ b/spinkit.css
@@ -149,7 +149,7 @@
height: var(--sk-size);
display: flex;
justify-content: space-between;
-}
+}
.sk-wave-rect {
background-color: var(--sk-color);
From d4ddf7bd290362d35d53991c418eef4370fad1c7 Mon Sep 17 00:00:00 2001
From: antriksh123 <33229117+antriksh123@users.noreply.github.com>
Date: Sat, 1 Aug 2020 14:31:34 +0530
Subject: [PATCH 3/3] Updated examples.html with SpinKit.css
Added the html for bouncing ball animation
---
examples.html | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/examples.html b/examples.html
index 139c4df..a329d70 100644
--- a/examples.html
+++ b/examples.html
@@ -128,6 +128,14 @@
+
+
-