vue3-loader-image - npm Package Compare versions

Comparing version 1.1.6 to 1.1.7

package.json

 {
 	"name": "vue3-loader-image",
-	"version": "1.1.6",
+	"version": "1.1.7",
 	"description": "Vue3 package for showing loader while image loading, with default skeleton",
@@ -5,0 +5,0 @@ "type": "module",

README.md

 # Vue 3 Image Loader
+<p align="left">
+<a href="https://www.npmjs.com/package/vue-navigation-bar"><img src="https://img.shields.io/bundlephobia/minzip/vue3-loader-image"
+</a>
+  <a href="https://www.npmjs.com/package/vue-navigation-bar"><img src="https://img.shields.io/npm/dm/vue3-loader-image.svg" alt="NPM Downloads"></a>
+  <a href="http://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
+  
+</p>
 
-![Vue 3 image loader preview](https://i.ibb.co/wCfzGp8/ezgif-1-4b6f9e880f.gif)
-
 Vue 3 package for showing a loader while an image loading with default using skeleton loader.
+<p align="center" width="100%">
+    <img width="80%" src="https://i.ibb.co/wCfzGp8/ezgif-1-4b6f9e880f.gif"> 
+</p>
 
@@ -10,6 +18,6 @@ ## Installation
 ```bash
-npm install vue-loader-image
+npm install vue3-loader-image
 
 // or use yarn
-yarn add vue-loader-image
+yarn add vue3-loader-image
 ```
@@ -21,3 +29,3 @@
 
-This package support either composition and options api with typescript used.
+This package support either composition and options api with typescript.
 
@@ -36,2 +44,4 @@ ```vue
 import { defineComponent } from 'vue'
+import VueLoaderImage from 'vue3-loader-image';
+import 'vue3-loader-image/dist/style.css'
 
@@ -47,5 +57,11 @@ export default defineComponent({
 
-We can use delay props to increase the time the image will be displayed, because sometimes the loader doesn't come out because the internet speed is good during the loading process.
+By default this package uses a skeleton loader, and there are 3 props that must be filled in, they are src, width, and height
 
 ```vue
+<VueLoaderImage src="https://images.unsplash.com/photo-1439066615861-d1af74d74000" width="300px" height="300px"></VueLoaderImage>
+```
+
+We can use delay props to increase the time the image will be displayed, because sometimes the loader doesn't come out because the internet speed is good during the loading process or image was cached.
+
+```vue
 <VueLoaderImage delay="4000" src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?q=80&w=1973" width="300px" height="300px"></VueLoaderImage>
@@ -64,10 +80,17 @@ ```
 <style>
-// loader css animation & style here
+.loader {
+    // loader css animation & style here
+}
 </style>
 ```
+<br>
+<p align="center">
+<img width="50%" src="https://i.ibb.co/KrQDtXk/untitled.gif" />
+</p>
+See more css loader on <a href="https://css-loaders.com">https://css-loaders.com</a>.
 
-See more css loader on [https://css-loaders.com](https://css-loaders.com/).
-
 ## Props
 
+For width, height, and pill accept string as intact css measurement units, please provide the unit Measurement after the value.
+
 | Attribute    |   Type   |    Is Required     | Description                                                                   |
@@ -74,0 +97,0 @@ |:-------------|:--------:|:--------------:|:------------------------------------------------------------------------------|

No alert changes

Improved metrics

Total package byte prevSize

11685

increased by10.57%

Number of lines in readme file

104

increased by28.4%

No dependency changes