├── .gitattributes
├── ProgressBar.vue
├── package.json
└── readme.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/ProgressBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         {{ title }}
 4 |         <div class="progress">
 5 |             <div class="progress-bar" :class="classes" :style="`${customStyle} width: ${newPercentage}%;`" aria-valuemax="100"></div>
 6 |         </div>
 7 |     </div>
 8 | </template>
 9 | <script>
10 | export default {
11 |     name: "ProgressBar",
12 |     props: {
13 |         title: {type: String},
14 |         percentage: {type: Number, default: 100},
15 |         delay: {type: Number, default: 0},
16 |         bg: {type: String, default: 'primary'},
17 |         customBgColor: {type: String, default:null},
18 |         animation: {type: Boolean, default: false},
19 |         striped: {type: Boolean, default: false},
20 |     },
21 |     data() {
22 |         return{
23 |             newPercentage: 0,
24 |             classes: null,
25 |             customStyle: ""
26 |         }
27 |     },
28 |     created() {
29 |         this.classes = 'bg-' + this.bg
30 |         if(this.customBgColor!=null){this.customStyle = ` background-color:${this.customBgColor}!important;`}
31 | 
32 |         if(this.animation){this.classes = this.classes +  " progress-bar-animated"}
33 |         if(this.striped){this.classes = this.classes +  " progress-bar-striped"}
34 |         setTimeout(() => {
35 |             this.newPercentage = this.percentage
36 |         }, this.delay);
37 |     }
38 | }
39 | </script>
40 | 
41 | <style scoped>
42 |     .progress{display:-webkit-box;display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem;margin:5px 0 10px}
43 |     .progress-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;text-align:center;background-color:#007bff;transition:width .6s ease}
44 |     .progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}
45 |     .progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}
46 |     @-webkit-keyframes progress-bar-stripes {
47 |         from{background-position:1rem 0}
48 |         to{background-position:0 0}
49 |     }
50 |     @keyframes progress-bar-stripes {
51 |         from{background-position:1rem 0}
52 |         to{background-position:0 0}
53 |     }
54 |     .bg-success{background-color:#28a745!important}
55 |     .bg-secondary{background-color:#6c757d!important}
56 |     .bg-info{background-color:#17a2b8!important}
57 |     .bg-danger{background-color:#dc3545!important}
58 |     .bg-warning{background-color:#ffc107!important}
59 |     .bg-turquoise{background-color:#1abc9c!important}
60 |     .bg-amethyst{background-color:#9b59b6!important}
61 |     .bg-midnightblue{background-color:#2c3e50!important}
62 |     .bg-electronblue{background-color:#0984e3!important}
63 |     .bg-shymoment{background-color:#a29bfe!important}
64 |     .bg-pinkglamour{background-color:#ff7675!important}
65 |     .bg-brightyarrow{background-color:#fdcb6e!important}
66 |     .bg-americanriver{background-color:#636e72!important}
67 |     .bg-picopink{background-color:#fd79a8!important}
68 |     .bg-pink{background-color:pink!important}
69 |     .bg-exodusfruit{background-color:#686de0!important}
70 |     .bg-pureapple{background-color:#6ab04c!important}
71 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue-js-progress",
 3 |     "version": "1.0.0",
 4 |     "description": "With Vue Js Progress, you will have the opportunity to create your own animated progress bars.",
 5 |     "main": "VueJsProgress.vue",
 6 |     "scripts": {
 7 |         "test": "echo \"Error: no test specified\" && exit 1"
 8 |     },
 9 |     "keywords": [
10 |         "vue", "vue.js", "progress", "progress bar", "progressbar", "bootstrap", "bar", "percentage"
11 |     ],
12 |     "author": "mustafacagri | Mustafa Çağrı Güven me@mustafacagri.com",
13 |     "license": "ISC"
14 | }


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Vue Js Progress
 2 | 
 3 | 
 4 | ![altcenter](https://www.mustafacagri.com/wp-content/uploads/2020/10/vue-js-progress.gif "Vue Js Progress")
 5 | 
 6 | 
 7 | With Vue Js Progress, you will have the opportunity to create your own animated progress bars.
 8 | 
 9 | The good thing is that even if you do not use bootstrap, you will be able to create progress bars with high visual direction thanks to the default background alternatives.
10 | 
11 | ## Setup
12 | 
13 | ```npm install vue-js-progress```
14 | 
15 | ## Import
16 | ```<script>
17 | import VueJsProgress from 'vue-js-progress'
18 |     export default {
19 |         components: {
20 |             VueJsProgress 
21 |         }
22 |     }
23 | </script>
24 | ```
25 | 
26 | ## npmjs
27 | You can visit to https://www.npmjs.com/package/vue-js-progress
28 | 
29 | ## Usage (Count Up)
30 | ```
31 | <VueJsProgress title="bg='electronblue'" :percentage="82" bg="electronblue" :delay="600" :striped="true" :animation="true"></VueJsProgress >
32 | ```
33 | 
34 | 
35 | ## Simple Usage (Count Up)
36 | ```
37 | <ProgressBar :percentage="50" />
38 | ```
39 | 
40 | There will be no title or no animations.
41 | 
42 | 
43 | ## Usage (w/ Title)
44 | ```
45 | <ProgressBar :percentage="50" title="My First Example" />
46 | ```
47 | 
48 | ## Notes
49 | The all attributes are optional. When you do not fill the percentage attribute default value will be 100.
50 | 
51 | ## Attributes
52 | `title (optional)`: You will have a title above of your progress bar.
53 | 
54 | **`percentage (optional)`**: What percentage do you want your progress bar to fill?
55 | 
56 | `bg (optional)`: Currently, there are 15 different pre-defined progress bar colors. This number is more than bootstrap's progress bars!
57 |  
58 | ***options: pink, info, primary, success, danger, warning, turquoise, amethyst, midnightblue, electronblue, shymoment, pinkglamour, brightyarrow, americanriver, picopink, exodusfruit, pureapple***.
59 | 
60 | Note: ** primary ** is the default value for bg!
61 | 
62 | `customBgColor (optional)`: Do not like the default colors? You can also use any color you want in the progress bar. No limit!
63 |  
64 | **examples**: ```<ProgressBar customBgColor="#FF0000" />``` or ```<ProgressBar customBgColor="red" />```
65 | 
66 | Here you are not limited to just HEX colors. You can also use the color names such as red, blue, orange etc.
67 | 
68 | 
69 | `striped (optional)`: If you want your progress bar to be striped, you can type "true", if not, you can type "false". ***default value is "false"***
70 | 
71 | `animation (optional)`: If you want your progress bar to be animated, you can type "true", if not, you can type "false". ***default value is "false"***
72 | 
73 | `delay (optional)`: Would you like your progress bar to start after a certain amount of time (in millisecond)? ***default value is "0"***


--------------------------------------------------------------------------------