add pencil loader code

resources/styles/dependencies/animations.scss

@@ -3338,3 +3338,13 @@
     fill: #513B56;
   }
 }
+
+//pencil loader animation
+@keyframes linePencil {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-150px);
+  }
+}

resources/styles/partials/loader.scss

@@ -12,7 +12,7 @@
   z-index: 999;
 }
 
-// Loader CSS
+// full with loader CSS
 svg#loader-icon {
   height: 100px;
   width: 100px;
@@ -30,3 +30,13 @@ svg#loader-icon {
 #loader-pen3 {
   animation: pen3 2s infinite ease;
 }
+
+// btn prncil loader
+svg#loader-pencil {
+  fill: $color-primary-darker;
+  width: 60px;
+}
+
+#loader-line {
+  animation: linePencil .8s infinite linear;
+}

src/uxbox/ui/dashboard/projects.cljs

@@ -199,7 +199,9 @@
       (html
        [:section.dashboard-grid
         ;; LOADER WIP
-        [:div.loader-content i/loader]
+        [:div.loader-content
+         i/loader
+         [:div.btn-primary i/loader-pencil]]
         ;; LOADER WIP
         [:h2 "Your projects"]
          [:div.dashboard-grid-content

src/uxbox/ui/icons.cljs

@@ -651,3 +651,20 @@
       {:id "loader-pen3"
        :d
        "M193.684.083l-36.328 51.162.002 58.058h11.965V59.56h19.424v49.743h9.97V59.56h19.326v49.743h11.967V51.245l-1.105-1.555L193.685.083zm6.428 29.72l14.05 19.787h-40.955l13.885-19.556 13.02-.23z"}]]]))
+
+(def loader-pencil
+  (html
+   [:svg
+    {:viewBox "0 0 677.34762 182.15429"
+     :height "182"
+     :width "667"
+     :id "loader-pencil"}
+    [:g
+     [:path
+      {:id "body-body"
+       :d
+       "M128.273 0l-3.9 2.77L0 91.078l128.273 91.076 549.075-.006V.008L128.273 0zm20.852 30l498.223.006V152.15l-498.223.007V30zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z"}]
+     [:path
+      {:id "loader-line"
+       :d
+       "M134.482 157.147v25l518.57.008.002-25-518.572-.008z"}]]]))