update theme

Author: anthinkingcoder

README.md

@@ -113,7 +113,7 @@ a vue component about toy bricks of skeleton screen loading
 | theme | the same as skeleton theme | String | normal |
 | shape | the same as skeleton shape | String | rect |
 | bgColor | the same as skeleton bgColor | String |  |
-| aspectRatio | ratio about width,height  | Number | 1 |
+| aspectRatio | ratio about width,height  | Number |  |
 | height | the tb-skeleton height  | Number,String |  |
 | width | the tb-skeleton width  | Number,String | 100% |
 | duration | the tb-skeleton animation duration | String,Number |  |

example/skeleton.html

@@ -35,12 +35,12 @@
       </i-col>
       <i-col :span="16">
         <row>
-          <skeleton duration=".6" bg-color="#dcdcdc">
+          <skeleton duration="1.5" bg-color="#dcdcdc">
             <i-col :span="12" style="padding-left: 10px;margin-top: 5px">
               <tb-skeleton :aspect-ratio="0.2" theme="flex-outer"></tb-skeleton>
             </i-col>
             <i-col :span="24" style="padding-left: 10px;margin-top: 10px">
-              <tb-skeleton :aspect-ratio="0.1" theme="flex-inner"></tb-skeleton>
+              <tb-skeleton :aspect-ratio="0.1" theme="gradient"></tb-skeleton>
             </i-col>
             <i-col :span="12" style="padding-left: 10px;margin-top: 10px">
               <tb-skeleton :aspect-ratio="0.2" theme="flex-outer"></tb-skeleton>

src/styles/skeleton.scss

@@ -17,7 +17,7 @@ $prefix: '.c-skeleton__tb';
     animation: opacity 2s linear infinite normal
   }
   &--gradient {
-    background: linear-gradient(to right, rgba(220, 220, 220, .4) 13%, rgba(220, 220, 220, 1) 14%);
+    background: linear-gradient(to right, rgba(255, 255, 255,.5) 2%,rgba(255, 255, 255,.9) 11%,rgba(255, 255, 255,.8) 13%, transparent 14%);
     animation: gradient 1s linear infinite normal;
     background-size: 200% 100%;
   }