diff options
| author | s1n <[email protected]> | 2019-07-28 16:21:57 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2019-07-28 16:21:57 -0700 |
| commit | 937ccf32fa76c4778b99fe0526b00a97c67e74cb (patch) | |
| tree | df860827318a5b8404cb339cd97aaa1630a5acb3 /css/main.css | |
| parent | add loading animation for slower devices (diff) | |
| download | s1n.pw-admin-937ccf32fa76c4778b99fe0526b00a97c67e74cb.tar.xz s1n.pw-admin-937ccf32fa76c4778b99fe0526b00a97c67e74cb.zip | |
update css to fit loading animation
Diffstat (limited to 'css/main.css')
| -rw-r--r-- | css/main.css | 69 |
1 files changed, 67 insertions, 2 deletions
diff --git a/css/main.css b/css/main.css index e4beab5..4d28317 100644 --- a/css/main.css +++ b/css/main.css @@ -1,5 +1,5 @@ body {
- background: none
+ background: none;
}
.bobAnimate-container {
position: absolute;
@@ -16,4 +16,69 @@ body { transition-timing-function: ease-in-out;
transition: margin-left 2s;
}
-
\ No newline at end of file +
+/* Loader */
+
+/* body {
+ text-align: center;
+ padding-top: 20%;
+ background: #fdfdfd;
+} */
+
+.loader-wrapper {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: #fdfdfd;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.loader {
+ width: 100px;
+ height: 100px;
+ display: inline-table;
+ box-sizing: border-box;
+ position: relative;
+ border-spacing: 0.3em;
+}
+.loader row {
+ display: table-row;
+}
+.loader row span {
+ display: table-cell;
+ position: relative;
+ background: #1d1f20;
+ opacity: 0;
+ -webkit-animation: flicker 0.5985999999999999s ease-out infinite alternate;
+}
+
+@-webkit-keyframes flicker {
+ from, 20% {
+ opacity: 0;
+ }
+ 100%, to {
+ opacity: 1;
+ }
+}
+
+
+
+.loader row:nth-child(1) span:nth-child(1) { -webkit-animation-delay: .50s; }
+.loader row:nth-child(1) span:nth-child(2) { -webkit-animation-delay: .70s; }
+.loader row:nth-child(1) span:nth-child(3) { -webkit-animation-delay: .60s; }
+.loader row:nth-child(2) span:nth-child(1) { -webkit-animation-delay: .20s; }
+.loader row:nth-child(2) span:nth-child(2) { -webkit-animation-delay: .80s; }
+.loader row:nth-child(2) span:nth-child(3) { -webkit-animation-delay: .90s; }
+.loader row:nth-child(3) span:nth-child(1) { -webkit-animation-delay: .10s; }
+.loader row:nth-child(3) span:nth-child(2) { -webkit-animation-delay: .30s; }
+.loader row:nth-child(3) span:nth-child(3) { -webkit-animation-delay: .40s; }
+
+
+
+
+
+
|