Vue

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    </head>

<div id="app">
<template>
	<form action="">
		<div class="progress">
		  <div class="progress-bar" :style="progressWidth"></div>
		</div>
		<div class="form-group"
			v-for='(item, i) in fields'
		>
			<label>{{item.name}} <i :class='item.isValid' aria-hidden="true"></i></label>
			<input type="text" class="form-control" :placeholder='item.placeholder'
			v-model='item.value'
			@input='validField(i)'
			
			>
		</div>
		<button type="button" class="btn btn-primary">
		SendData
		</button>
	</form>
</template>
</div>

CSS

form {
	text-align: left;
	background: #f2f2f2;
	padding:10px 20px;
	margin-bottom: 30px;
	}


	.fa-check {
		color: green;
	}

	.fa-times {
		color: red;
	}
	

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
fields: [
					{
					 name: 'Name',
					 value: '',
					 pattern: /^[a-z][A-z]{2,30}$/,
					 isValid: 'invalid',
           placeholder: 'Your name'
					},
					{
					 name: 'Phone',
					 value: '',
					 pattern: /^[0-9]{7,14}$/,
					 isValid: '',
           placeholder: '893174582'
					},
					{
					 name: 'email',
					 value: '',
					 pattern: /.@.+\..+/,
					 isValid: '',
           placeholder: 'Your email'
					},
					{
					 name: 'Some1',
					 value: '',
					 pattern: /.+/,
					 isValid: '',
           placeholder: 'some field'
					},
					{
					 name: 'Some2',
					 value: '',
					 pattern: /.+/,
					 isValid: '',
           placeholder: 'some field'
					},
				],
  },
		computed: {
			progressWidth () {
				var validFields = 0;
				var width = 0;
				this.fields.forEach( (item) => { 
					if (item.isValid == 'fa fa-check') {
						validFields++;
					}
					
				}) 
				width = validFields/this.fields.length * 100;
				return `width:${width}%`

			}
		},
		methods: {
			validField (index) {
				let object = this.fields[index];
				if (object.pattern.test(object.value)) {
					object.isValid = 'fa fa-check'
				} else object.isValid = 'fa fa-times'

			}
		}
		
})