✨Having finished all the functions

Author: Bornew

package-lock.json

@@ -28,8 +28,11 @@
     "@tarojs/taro-swan": "^1.2.1",
     "@tarojs/taro-tt": "^1.2.1",
     "@tarojs/taro-weapp": "^1.2.1",
-    "nervjs": "^1.3.9",
-    "nerv-devtools": "^1.3.9"
+    "axios": "^0.18.0",
+    "base64-img": "^1.0.4",
+    "fs": "0.0.1-security",
+    "nerv-devtools": "^1.3.9",
+    "nervjs": "^1.3.9"
   },
   "devDependencies": {
     "@types/react": "^16.4.6",

package.json

@@ -24,7 +24,9 @@ class App extends Component {
       'pages/index/index',
       'pages/uploadPhoto/uploadPhoto',
       'pages/selectPhoto/selectPhoto',
-      'pages/generatePhoto/generatePhoto'
+      'pages/generatePhoto/generatePhoto',
+      // 'pages/downloadPhoto/downloadPhoto',
+
     ],
     window: {
       backgroundTextStyle: 'light',

src/app.tsx

@@ -43,7 +43,7 @@
   width: 84vw;
   height: 114vw;
   overflow: hidden;
-  z-index: 10;
+  z-index: 1000;
 }
 .photoBg {
   background-size: cover;
@@ -53,7 +53,7 @@
   width: 84vw;
   height: 114vw;
   overflow: hidden;
-  z-index: 100;
+  z-index: 10;
 }
 .photo {
   position: relative;
@@ -70,7 +70,7 @@
   top: 5vh;
   width: 20vw;
   height: auto;
-  z-index: 100;
+  z-index: 1000000;
 }
 .saveText {
   position: absolute;
@@ -123,3 +123,148 @@
     transform: translate(0px, 0px);
   }
 }
+
+
+@color-1: #0079ff;
+@color-2: #ff1b61;
+@color-3: #fff200;
+@color-4: #ffffff;
+
+@ball-size: 25px;
+@jump: 0.75em;
+@diam: 2 * @jump;
+
+@duration: 1.2s;
+
+.loader {
+  position: absolute;
+  top: 50vw;
+  left:50vw;
+  width: 0;
+  height: 0;
+  margin: 4em auto;
+  animation: anim-rotate @duration infinite ease;
+  z-index: 100000;
+
+  /* Variations */
+  //animation: anim-rotate @duration infinite linear;
+  //animation: anim-rotate @duration infinite cubic-bezier(.1,.3,.3,.1);
+  //animation: anim-rotate @duration linear infinite alternate;
+  //animation: anim-rotate 0 infinite;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    width: @ball-size;
+    height: @ball-size;
+    top: 70%;
+    left: 50%;
+    margin-top: -@ball-size / 2;
+    margin-left: -@ball-size / 2;
+    border-radius: @ball-size / 2;
+    opacity: 0.9;
+  }
+
+  &::before {
+    background: @color-1;
+    transform: translate(-@jump, -@jump) scale(1);
+    box-shadow: @diam @diam 0 @color-2;
+    animation: anim-1-2 @duration infinite ease;
+  }
+
+  &:after {
+    background: @color-3;
+    transform: translate(@jump, -@jump) scale(1);
+    box-shadow: -@diam @diam 0 @color-4;
+    animation: anim-3-4 @duration infinite ease;
+  }
+}
+
+@keyframes anim-1-2 {
+  50% {
+    transform: scale(1.3) translate(0, 0);
+    box-shadow: 0 0 0 @color-2;
+    opacity: 0.8;
+  }
+}
+
+@keyframes anim-3-4 {
+  50% {
+    transform: scale(1.3) translate(0, 0);
+    box-shadow: 0 0 0 @color-4;
+    opacity: 0.8;
+  }
+}
+
+@keyframes anim-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(720deg);
+  }
+
+}
+
+/* -------------- loader6 -------------- */
+
+.loader6{
+  position: relative;
+  width: 25px;
+  height: 25px;
+
+  top: 46%;
+  top: -webkit-calc(50% - 6px);
+  top: calc(50% - 6px);
+  left: 46%;
+  left: -webkit-calc(50% - 6px);
+  left: calc(50% - 6px);
+
+  border-radius: 50px;
+  background-color: @color-3;
+  -webkit-transform-origin:  50% 50%;
+  transform-origin:  50% 50% ;
+  -webkit-animation: loader6 1s ease-in-out infinite;
+  animation: loader6 1s ease-in-out infinite;
+  z-index: 10000;
+}
+
+.loader6:before{
+  content: "";
+  position: absolute;
+  background-color: @color-4;
+  top: 0px;
+  left: -60px;
+  height: 25px;
+  width: 25px;
+  border-radius: 12px;
+}
+
+.loader6:after{
+  content: "";
+  position: absolute;
+  background-color: @color-2;
+  top: 0px;
+  left: 60px;
+  height: 25px;
+  width: 25px;
+  border-radius: 12px;
+
+}
+
+
+@-webkit-keyframes loader6{
+  0%{-webkit-transform:rotate(0deg);}
+  50%{-webkit-transform:rotate(180deg);}
+  100%{-webkit-transform:rotate(180deg);}
+}
+
+@keyframes loader6{
+  0%{transform:rotate(0deg);}
+  50%{transform:rotate(180deg);}
+  100%{transform:rotate(180deg);}
+}