feat(progressbar): custom style functino and revert center-atom style

_config.template.yml

@@ -82,8 +82,11 @@ fonts: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "
 # You can find demos on http://github.hubspot.com/pace/docs/welcome
 # Warning: Line color mustn't delete or not define!
 #     style available values:
-#       barber-shop, big-counter, bounce, center-circle, center-radar, center-simple,
+#       barber-shop, big-counter, bounce, center-atom, center-circle, center-radar, center-simple,
 # 	    corner-indicator, fill-left, fill-left-nocolor, flat-top, loading-bar, macosx
+# Or you can use your own style,just set the style value to "custom",
+# and put your own css style to source/css/pace/custom.css
+# document can be find on:
 pace:
      style:
      color: "#29d"

layout/_partial/config_css.ejs

@@ -186,6 +186,7 @@
       border-color: <%= theme.pace.color %> transparent transparent;
     }
     </style>
+  <% } else if(theme.pace.style === 'mycss') { %>
   <% } else { %>
     <style>
       .pace .pace-progress {

layout/_partial/import_pace.ejs

@@ -25,6 +25,8 @@
    	<%- css('css/pace/loading-bar') %>
 	<% } else if(theme.pace.style === 'macosx') { %>
    	<%- css('css/pace/macosx') %>
+  <% } else if(theme.pace.style === 'custom') { %>
+    <%- css('css/pace/custom.css') %>
 	<% } else { %>
 		<%- css('css/pace/minimal') %>
 <% } %>

source/css/pace/center-atom.css

@@ -24,8 +24,8 @@
 .pace .pace-progress {
   z-index: 2000;
   position: absolute;
-  height: 60px;
-  width: 100px;
+  height: 100px;
+  width: 83px;
 
   -webkit-transform: translate3d(0, 0, 0) !important;
   -ms-transform: translate3d(0, 0, 0) !important;
@@ -41,7 +41,7 @@
   font-size: 14px;
   font-weight: 100;
   line-height: 1;
-  padding: 20% 0 7px;
+  padding: 16% 0 7px;
   width: 50%;
   height: 40%;
   margin: 10px 0 0 30px;