summaryrefslogtreecommitdiff
path: root/src/components/Loading.module.scss
diff options
context:
space:
mode:
authorHaishan <[email protected]>2018-10-20 20:32:02 +0800
committerHaishan <[email protected]>2018-10-20 20:32:02 +0800
commit133b29c9dac2209a3c88c3289f84ff709d404392 (patch)
treee023785cc82db732c64328a5d99938992eceecfd /src/components/Loading.module.scss
first commit
Diffstat (limited to 'src/components/Loading.module.scss')
-rw-r--r--src/components/Loading.module.scss50
1 files changed, 50 insertions, 0 deletions
diff --git a/src/components/Loading.module.scss b/src/components/Loading.module.scss
new file mode 100644
index 0000000..7166140
--- /dev/null
+++ b/src/components/Loading.module.scss
@@ -0,0 +1,50 @@
+$color1: #2a477a;
+$color2: #dddddd;
+
+@keyframes moveRight {
+ 0% {
+ transform: translate(-50px);
+ }
+
+ 100% {
+ transform: translate(10px);
+ }
+}
+
+@keyframes moveLeft {
+ 0% {
+ transform: translate(50px);
+ }
+
+ 100% {
+ transform: translate(-10px);
+ }
+}
+
+.loading {
+ position: relative;
+ width: 100%;
+ height: 300px;
+ margin: 0 auto;
+ height: 30vh;
+}
+
+.circle {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ position: absolute;
+ top: 50%;
+}
+
+.left {
+ background-color: $color1;
+ left: 50%;
+ animation: moveRight 1s ease-in-out 0s infinite alternate;
+}
+
+.right {
+ background-color: $color2;
+ right: 50%;
+ animation: moveLeft 1s ease-in-out 0s infinite alternate;
+}