diff --git a/gulpfile.js b/gulpfile.js
index 05e4802..188182c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -23,7 +23,7 @@ gulp.task('templates', ['clean'], function() {
             gulp.src(paths.srcViews),
             htmlmin(),
             templateCache('views.js', {
-                module: 'focaAdminSeguimiento',
+                module: 'focaLogisticaPedidoRuta',
                 root: ''
             }),
             gulp.dest(paths.tmp)
@@ -38,10 +38,10 @@ gulp.task('uglify', ['templates'], function() {
                 paths.srcJS,
                 'tmp/views.js'
             ]),
-            concat('foca-admin-seguimiento.js'),
+            concat('foca-logistica-pedido-ruta.js'),
             replace('src/views/', ''),
             gulp.dest(paths.tmp),
-            rename('foca-admin-seguimiento.min.js'),
+            rename('foca-logistica-pedido-ruta.min.js'),
             uglify(),
             replace('"ngRoute","ui.bootstrap"', ''),
             gulp.dest(paths.dist)
diff --git a/package.json b/package.json
index 995e9b7..8c7a450 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-    "name": "foca-admin-seguimiento",
+    "name": "foca-logistica-pedido-ruta",
     "version": "0.0.2",
-    "description": "Seguimiento de actividad",
+    "description": "Logistica de pedidos",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -15,7 +15,7 @@
     ],
     "repository": {
         "type": "git",
-        "url": "https://debo.suite.repo/modulos-npm/foca-admin-seguimiento.git"
+        "url": "http://git.focasoftware.com/npm/foca-logistica-pedido-ruta.git"
     },
     "author": "Foca Software",
     "license": "ISC",
@@ -25,10 +25,10 @@
         "bootstrap": "^4.1.3",
         "font-awesome": "^4.7.0",
         "gulp": "^3.9.1",
-        "gulp-angular-templatecache": "^2.2.3",
+        "gulp-angular-templatecache": "^2.2.5",
         "gulp-clean": "^0.4.0",
         "gulp-concat": "^2.6.1",
-        "gulp-connect": "^5.6.1",
+        "gulp-connect": "^5.7.0",
         "gulp-htmlmin": "^5.0.1",
         "gulp-jshint": "^2.1.0",
         "gulp-rename": "^1.4.0",
@@ -38,7 +38,7 @@
         "gulp-uglify-es": "^1.0.4",
         "jasmine-core": "^3.3.0",
         "jquery": "^3.3.1",
-        "jshint": "^2.9.6",
+        "jshint": "^2.9.7",
         "leaflet": "^1.3.4",
         "pre-commit": "^1.2.2",
         "pump": "^3.0.0",
diff --git a/src/js/app.js b/src/js/app.js
index da5db76..7cbe9a6 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,4 +1,4 @@
-angular.module('focaAdminSeguimiento', [
+angular.module('focaLogisticaPedidoRuta', [
     'ngRoute',
     'ui.bootstrap'
 ]);
diff --git a/src/js/controller.js b/src/js/controller.js
index d693e5e..8e90f98 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -1,35 +1,59 @@
-angular.module('focaAdminSeguimiento') .controller('focaAdminSeguimientoController', [
-    '$scope', 'focaAdminSeguimientoService', '$location', '$routeParams',
-    function($scope, focaAdminSeguimientoService, $location, $routeParams) {
+angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaController', [
+    '$scope', 'focaLogisticaPedidoRutaService', '$location', '$uibModal', '$filter',
+    function($scope, focaLogisticaPedidoRutaService, $location, $uibModal, $filter) {
         $scope.actividad = '';
 
         $scope.now = new Date();
-
-        if ($routeParams.parametro === 'nota-pedido') {
-            $scope.actividad = 'Nota de pedido';
-        } 
-        
-        if ($routeParams.parametro === 'hoja-ruta') {
-            $scope.actividad = 'Entrega de producto';
-        }
-
-        if ($routeParams.parametro === 'cobranza') {
-            $scope.actividad = 'Cobranza';
-        }
-
+        $scope.actividad = 'Nota de pedido';
         $scope.idUsuario = 0;
         $scope.marcadores = [];
+        $scope.vehiculos = [];
         getSeguimiento();
-
+        $scope.arrastrando = false;
         $scope.general = function() {
             $scope.idUsuario = 0;
             getSeguimiento();
         };
 
+        $scope.cargar = function(id, punto) {
+            var marcador = JSON.parse(punto);
+            var vehiculo = $filter('filter')($scope.vehiculos, {id: parseInt(id)})[0];            
+            var modalInstance = $uibModal.open(
+                {
+                    ariaLabelledBy: 'Busqueda de Vehiculo',
+                    templateUrl: 'foca-detalle-vehiculo.html',
+                    controller: 'focaDetalleVehiculo',
+                    size: 'lg',
+                    resolve: {
+                        vehiculo: function() {return vehiculo;},
+                        marcador: function() {return marcador;}
+                    }
+                }
+            );
+            modalInstance.result.then(function() {                
+            }, function() {
+                //run when cancel modal
+            });
+        };
+
+        $scope.arrastra = function() {            
+            $scope.arrastrando = true;
+            $scope.$digest();
+        };
+
+        $scope.noArrastra = function() {
+            $scope.arrastrando = false;
+            $scope.$digest();
+        };
+
         $scope.individual = function() {
             $scope.idUsuario = -1;
         };
 
+        $scope.mostrarDetalle = function() {
+            $scope.detalle = true;
+        };
+
         $scope.salir = function() {
             $location.path('/');
         };
@@ -44,7 +68,28 @@ angular.module('focaAdminSeguimiento') .controller('focaAdminSeguimientoControll
         $scope.fecha = function() {
             getSeguimiento();
         };
+
+        $scope.seleccionarVehiculo = function() {
+            var modalInstance = $uibModal.open(
+                {
+                    ariaLabelledBy: 'Busqueda de Vehiculo',
+                    templateUrl: 'modal-vehiculo.html',
+                    controller: 'focaModalVehiculoController',
+                    size: 'lg'
+                }
+            );
+
+            modalInstance.result.then(
+                function(vehiculo) {
+                    $scope.vehiculos.push(vehiculo);
+                }, function() {
+                    // funcion ejecutada cuando se cancela el modal
+                }
+            );
+        };
         
+
+
         function getSeguimiento() {
             var now = $scope.now;
             var desde = new Date(new Date(now.setHours(0)).setMinutes(0));
@@ -62,7 +107,7 @@ angular.module('focaAdminSeguimiento') .controller('focaAdminSeguimientoControll
                 individual: $scope.idUsuario !== 0 ? true : false
             };
 
-            focaAdminSeguimientoService.obtenerActividad(datos).then(function(datos) {
+            focaLogisticaPedidoRutaService.obtenerActividad(datos).then(function(datos) {
                 
                 $scope.marcadores = datos.data;
             });
diff --git a/src/js/controllerDetalleVehiculo.js b/src/js/controllerDetalleVehiculo.js
new file mode 100644
index 0000000..846c481
--- /dev/null
+++ b/src/js/controllerDetalleVehiculo.js
@@ -0,0 +1,9 @@
+angular.module('focaLogisticaPedidoRuta')
+    .controller('focaDetalleVehiculo', ['$scope', '$uibModalInstance', 'vehiculo', 'marcador',
+        function($scope, $uibModalInstance, vehiculo, marcador) {
+            $scope.articulos = marcador.notaPedido.articulosNotaPedido;
+            $scope.vehiculo = vehiculo;
+            $scope.aceptar = function() {
+                $uibModalInstance.close();
+            };
+    }]);
diff --git a/src/js/osm-directive.js b/src/js/osm-directive.js
index ee1a190..bdbbbf5 100644
--- a/src/js/osm-directive.js
+++ b/src/js/osm-directive.js
@@ -1,4 +1,4 @@
-angular.module('focaAdminSeguimiento').directive('osm', function() {
+angular.module('focaLogisticaPedidoRuta').directive('foca', function() {
     return {
         restrict: 'E',
         link: function(scope, el, attrs) {
@@ -7,105 +7,18 @@ angular.module('focaAdminSeguimiento').directive('osm', function() {
             scope.map = L.map(contenedor).setView([attrs.latitud, attrs.longitud], attrs.zoom);
             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
         },
-        controller: ['$scope', '$filter', function($scope, $filter) {
-                $scope.markers = [];
+        controller: ['$scope', function($scope) {
+            $scope.markers = [];
             $scope.$watch('marcadores', function() {
                 for(var i in $scope.markers) {
                     $scope.map.removeLayer($scope.markers[i]);
                 }
-                
                 $scope.markers = [];
-                angular.forEach($scope.marcadores, function(marcador) {
-                    var observacion = '';
-                                        
-                    if ($scope.parametros.actividad === 'Nota de pedido') {
-                        observacion +=
-                            'Vendedor: ' + marcador.notaPedido.idVendedor + ' - ' +
-                            (
-                                marcador.notaPedido.vendedor ? 
-                                marcador.notaPedido.vendedor.NomVen : 
-                                ''
-                            ) + '<br/>';
-                        observacion += 'Fecha: ' +
-                            $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
-                            marcador.fecha.slice(11,19) + '<br/>';
-                        observacion += 'Nº: ' + $filter('comprobante')([
-                            marcador.notaPedido.sucursal, 
-                            marcador.notaPedido.numeroNotaPedido
-                        ]) + '<br/>';
-                        observacion += 'Cliente: ' + 
-                            marcador.notaPedido.cliente.NOM + '<br/>';
-                        
-                        if ($scope.parametros.individual) {
-                            observacion += 
-                                'Total: ' + $filter('currency')(marcador.notaPedido.total, '$');
-                            observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;
-
-                            if (marcador.distancia) {
-                                observacion += '<br/>Distancia a casa central: ' +
-                                    marcador.distancia + 'km';
-                            }
-                        } else {
-                            observacion += 'Cantidad de nota de pedido: ' +
-                                marcador.cantidad + '<br/>';
-                            observacion += 'Total Vendido: ' +
-                                $filter('currency')(marcador.total, '$');
-                        }
-                    }
-
-                    if ($scope.parametros.actividad === 'Cobranza') {
-                        observacion += 'Cobrador: ' + marcador.recibo.CFE + '<br/>';
-                        observacion += 'Fecha: ' +
-                            $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
-                            marcador.fecha.slice(11,19) + '<br/>';
-                        observacion += 'Nº: ' + $filter('comprobante')([
-                            marcador.sucursal, marcador.idUsuario]) + '<br/>';
-                        observacion += 'Cliente: ' + marcador.recibo.cliente.NOM + '<br/>';
-                        observacion += 'Total Cobrado: $' + marcador.factura.IPA;
-                    } 
-
-                    if ($scope.parametros.actividad === 'Entrega de producto') {
-                        observacion += 'Vehiculo: ' +
-                            marcador.remito.hojaRuta.idVehiculo + ' - ' +
-                            marcador.remito.hojaRuta.vehiculo.tractor  + '<br/>';
-                        observacion += 'Transportista: ' + 
-                            marcador.remito.hojaRuta.transportista.NOM  + '<br/>';
-                        observacion += 'Chofer: ' + 
-                            marcador.remito.hojaRuta.chofer.nombre  + '<br/>';
-                        observacion += 'Fecha: ' +
-                            $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
-                            marcador.fecha.slice(11,19) + '<br/>';
-                        observacion +=  'Hoja de ruta: ' + $filter('comprobante')([
-                                marcador.remito.hojaRuta.sucursal, 
-                                marcador.remito.hojaRuta.numeroHojaRuta
-                            ]) + '<br/>';
-                        observacion +=  'Remito: ' + $filter('comprobante')([
-                                marcador.remito.sucursal, 
-                                marcador.remito.numeroRemito
-                            ]) + '<br/>';
-                        observacion += 'Cliente: ' + 
-                            marcador.remito.cliente.NOM + '<br/>';
-                        
-                        if ($scope.parametros.individual) {
-                            observacion += 'Producto: ' +
-                                marcador.remito.articulosRemito[0].descripcion + '<br/>';
-                            observacion += 'Cantidad entregada: ' +
-                                marcador.remito.carga + '<br/>';
-
-                            if (marcador.distancia) {
-                                observacion += 'Distancia a casa central: ' + marcador.distancia +
-                                    'km <br/>';
-                            }
-
-                            if (marcador.observaciones) {
-                                observacion += 'Observaciones: ' + marcador.observaciones;
-                            }
-                            observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;
-                        } else {
-                            observacion += 'Cantidad de entregas: ' + marcador.cantidad;
-                        }
-                    }
 
+                angular.forEach($scope.marcadores, function(marcador) {                    
+                    var observacion = '<i class="fa fa-map-marker fa-5x" aria-hidden="true"'+
+                        'class="form-control" ondragend="dropEnd()" ondragstart="drag(event, '+
+                        JSON.stringify(marcador)+')" draggable="true"></i>';
                     $scope.markers.push(
                         L.marker([marcador.latitud, marcador.longitud]).addTo($scope.map)
                         .bindPopup(observacion)
diff --git a/src/js/route.js b/src/js/route.js
index c869d47..4c3752e 100644
--- a/src/js/route.js
+++ b/src/js/route.js
@@ -1,7 +1,7 @@
-angular.module('focaAdminSeguimiento')
+angular.module('focaLogisticaPedidoRuta')
     .config(['$routeProvider', function($routeProvider) {
-        $routeProvider.when('/admin-seguimiento/:parametro', {
-            controller: 'focaAdminSeguimientoController',
-            templateUrl: 'src/views/foca-admin-seguimiento.html'
+        $routeProvider.when('/logistica-pedido-ruta', {
+            controller: 'focaLogisticaPedidoRutaController',
+            templateUrl: 'src/views/foca-logistica-pedido-ruta.html'
         });
     }]);
diff --git a/src/js/service.js b/src/js/service.js
index d1a8620..c6e00f6 100644
--- a/src/js/service.js
+++ b/src/js/service.js
@@ -1,6 +1,6 @@
-angular.module('focaAdminSeguimiento')
+angular.module('focaLogisticaPedidoRuta')
     .service(
-        'focaAdminSeguimientoService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT
+        'focaLogisticaPedidoRutaService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT
     ) {
         return {
             obtenerActividad: function(parametros) {
diff --git a/src/views/foca-admin-seguimiento.html b/src/views/foca-admin-seguimiento.html
deleted file mode 100644
index 80efdc8..0000000
--- a/src/views/foca-admin-seguimiento.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<div class="foca-admin-seguimiento">
-    <div class="row">
-        <div class="offset-1 col-9">
-            <osm
-                latitud="-32.89214159952345"
-                longitud="-68.84572999101856"
-                zoom="14"
-                marcadores="marcadores"
-                parametros= "datosBuscados"
-            />
-        </div>
-        <div class="col-2 pl-0">
-            <input
-                type="date"
-                ng-model="now"
-                class="btn col-12 my-1"
-                foca-focus="true"
-                ng-blur="fecha()"
-                hasta-hoy
-            />
-            <button 
-                type="button" 
-                ng-class="{'active': idUsuario == 0}" 
-                class="btn col-12 my-1" 
-                ng-click="general()"
-            >General</button>
-            <button 
-                type="button" 
-                ng-class="{'active': idUsuario != 0}" 
-                class="btn col-12 my-1" 
-                ng-click="individual()"
-                ng-show="actividad != 'Cobranza'"
-            >Individual</button>
-            <div class="form-group" ng-show="idUsuario == -1">
-                <input 
-                    type="text"
-                    placeholder="Vendedor"
-                    class="form-control"
-                    ng-model="idUsuarioInput"
-                    ng-keypress="search($event.keyCode)"
-                    foca-focus="idUsuario == -1"
-                    ng-show="actividad == 'Nota de pedido'"
-                >
-                <input 
-                    type="text"
-                    placeholder="Vehiculo"
-                    class="form-control"
-                    ng-model="idUsuarioInput"
-                    ng-keypress="search($event.keyCode)"
-                    foca-focus="idUsuario == -1"
-                    ng-show="actividad == 'Entrega de producto'"
-                >
-            </div>
-            <button 
-                type="button" 
-                class="btn col-12 my-1 boton-salir" 
-                ng-click="salir()"
-            >
-                Salir
-            </button>
-        </div>
-    </div>
-</div>
diff --git a/src/views/foca-detalle-vehiculo.html b/src/views/foca-detalle-vehiculo.html
new file mode 100644
index 0000000..d3776a3
--- /dev/null
+++ b/src/views/foca-detalle-vehiculo.html
@@ -0,0 +1,51 @@
+<div class="modal-header">
+    <h4>Detalle de carga</h4>
+</div>
+<div class="modal-body">
+    <div class="row">
+        <div class="col-12" ng-repeat="articulo in articulos">
+            <input
+                type="checkbox"
+                ng-model="articulo.chequed"
+            >
+            <span>Articulo: {{articulo.descripcion}},</span>
+            <span>Cantidad: {{articulo.cantidad}}</span>
+        </div>
+        <strong class="col-12" ng-bind="vehiculo.tractor"></strong>
+        <strong class="col-12">Cisternas:</strong>
+        <!-- <div class="text-center">
+            <div class="progress" ng-repeat="cisterna in vehiculo.cisternas">
+                <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 30%;">
+                    <span class="sr-only">30% Complete</span>
+                </div>
+            </div>
+        </div> -->
+        <div class="progress col-12" ng-repeat="cisterna in vehiculo.cisternas">
+            <div class="progress-bar" role="progressbar" aria-valuenow="70"
+            aria-valuemin="0" aria-valuemax="100" style="width:70%">
+                <span class="sr-only">70% Complete</span>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal-footer py-1">
+    <button class="btn btn-sm btn-secondary" type="button" ng-click="aceptar()">Aceptar</button>
+</div>
+<style>
+.progress-bar-vertical {
+  width: 20px;
+  min-height: 100px;
+  display: flex;
+  align-items: flex-end;
+  margin-right: 20px;
+  float: left;
+}
+
+.progress-bar-vertical .progress-bar {
+  width: 100%;
+  height: 0;
+  -webkit-transition: height 0.6s ease;
+  -o-transition: height 0.6s ease;
+  transition: height 0.6s ease;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/foca-logistica-pedido-ruta.html b/src/views/foca-logistica-pedido-ruta.html
new file mode 100644
index 0000000..5de138c
--- /dev/null
+++ b/src/views/foca-logistica-pedido-ruta.html
@@ -0,0 +1,286 @@
+<script>
+    function allowDrop(ev) {
+        ev.preventDefault();
+    }
+    function drag(ev, marcador) {
+        marcador = JSON.stringify(marcador);
+        ev.dataTransfer.setData("marcador", marcador);
+        var dom_el = document.getElementById('test');        
+        var scope = angular.element(dom_el).scope();
+        scope.arrastra();
+    }
+    function drop(ev) {
+        ev.preventDefault();
+        var data = ev.dataTransfer.getData("marcador");
+        var dom_el = document.getElementById(ev.target.id);
+        var ng_el = angular.element(dom_el);
+        var ng_el_scope = ng_el.scope();
+        ng_el_scope.cargar(ev.target.id, data);
+        ng_el_scope.$digest();
+    }
+    function dropEnd() {
+        console.log('drop');
+        var dom_el = document.getElementById('test');        
+        var scope = angular.element(dom_el).scope();
+        scope.noArrastra();
+    }
+</script>
+<div class="foca-logistica-pedido-ruta" id="test">
+    <div class="row">
+        <div class="offset-1 col-9">
+            <foca
+                latitud="-32.89214159952345"
+                longitud="-68.84572999101856"
+                zoom="14"
+                marcadores="marcadores"
+                parametros= "datosBuscados"
+            />
+        </div>
+        <div class="col-2 pl-0">
+            <input
+                type="date"
+                ng-model="now"
+                class="btn col-12 my-1"
+                foca-focus="true"
+                ng-blur="fecha()"
+                hasta-hoy
+            />
+            <button 
+                type="button" 
+                ng-class="{'active': idUsuario == 0}"
+                class="btn col-12 my-1" 
+                ng-click="general()"
+            >General</button>
+            <button
+                type="button" 
+                ng-class="{'active': idUsuario != 0}"
+                class="btn col-12 my-1" 
+                ng-click="individual()"
+                ng-show="actividad != 'Cobranza'"
+            >Individual</button>
+            <div class="form-group" ng-show="idUsuario == -1">
+                <input 
+                    type="text"
+                    placeholder="Vendedor"
+                    class="form-control"
+                    ng-model="idUsuarioInput"
+                    ng-keypress="search($event.keyCode)"
+                    foca-focus="idUsuario == -1"
+                    ng-show="actividad == 'Nota de pedido'"
+                >
+                <input 
+                    type="text"
+                    placeholder="Vehiculo"
+                    class="form-control"
+                    ng-model="idUsuarioInput"
+                    ng-keypress="search($event.keyCode)"
+                    foca-focus="idUsuario == -1"
+                    ng-show="actividad == 'Entrega de producto'"
+                >
+            </div>
+            <button 
+                type="button" 
+                class="btn col-12 my-1 boton-salir" 
+                ng-click="salir()"
+            >
+                Salir
+            </button>
+        </div>
+        <input
+            class="col-auto form-control"
+            ng-click="seleccionarVehiculo()"
+            placeholder="Seleccionar vehiculo"
+            readonly
+        />
+       <div class="row">
+            <div
+                class="container col-auto"
+                ng-repeat="vehiculo in vehiculos"
+                ng-click="mostrarDetalleVehiculo(vehiculo)"
+            >
+                <div>
+                    <div class="col-md-3 col-sm-6">
+                        <div class="progress-circle blue" ng-class="{'arrastrando': arrastrando}">
+                            <span class="progress-left">
+                                <span class="progress-bar"></span>
+                            </span>
+                            <span class="progress-right">
+                                <span class="progress-bar"></span>
+                            </span>
+                            <div class="progress-value">{{vehiculo.codigo}}</div>
+                        </div>                        
+                    </div>
+                    <div
+                        class="col-12 border border-dark text-center"
+                        ng-show="arrastrando"
+                        id="{{vehiculo.id}}"
+                        ondrop="drop(event)"
+                        ondragover="allowDrop(event)"
+                    >Soltar acá</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<style>
+.arrastrando {
+    opacity: 0.5;
+}
+.vertical {
+  display: inline-block;
+  width: 20%;
+  height: 40px;
+  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
+  transform: rotate(-90deg);
+}
+.progress-circle{
+    width: 150px;
+    height: 150px;
+    line-height: 150px;
+    background: none;
+    margin: 0 auto;
+    box-shadow: none;
+    position: relative;
+}
+.progress-circle:after{
+    content: "";
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 12px solid #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.progress-circle > span{
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: 1;
+}
+.progress-circle .progress-left{
+    left: 0;
+}
+.progress-circle .progress-bar{
+    width: 100%;
+    height: 100%;
+    background: none;
+    border-width: 12px;
+    border-style: solid;
+    position: absolute;
+    top: 0;
+}
+.progress-circle .progress-left .progress-bar{
+    left: 100%;
+    border-top-right-radius: 80px;
+    border-bottom-right-radius: 80px;
+    border-left: 0;
+    -webkit-transform-origin: center left;
+    transform-origin: center left;
+}
+.progress-circle .progress-right{
+    right: 0;
+}
+.progress-circle .progress-right .progress-bar{
+    left: -100%;
+    border-top-left-radius: 80px;
+    border-bottom-left-radius: 80px;
+    border-right: 0;
+    -webkit-transform-origin: center right;
+    transform-origin: center right;
+    animation: loading-1 1.8s linear forwards;
+}
+.progress-circle .progress-value{
+    width: 90%;
+    height: 90%;
+    border-radius: 50%;
+    background: #44484b;
+    font-size: 24px;
+    color: #fff;
+    line-height: 135px;
+    text-align: center;
+    position: absolute;
+    top: 5%;
+    left: 5%;
+}
+.progress-circle.blue .progress-bar{
+    border-color: #049dff;
+}
+.progress-circle.blue .progress-left .progress-bar{
+    animation: loading-2 1.5s linear forwards 1.8s;
+}
+.progress-circle.yellow .progress-bar{
+    border-color: #fdba04;
+}
+.progress-circle.yellow .progress-left .progress-bar{
+    animation: loading-3 1s linear forwards 1.8s;
+}
+.progress-circle.pink .progress-bar{
+    border-color: #ed687c;
+}
+.progress-circle.pink .progress-left .progress-bar{
+    animation: loading-4 0.4s linear forwards 1.8s;
+}
+.progress-circle.green .progress-bar{
+    border-color: #1abc9c;
+}
+.progress-circle.green .progress-left .progress-bar{
+    animation: loading-5 1.2s linear forwards 1.8s;
+}
+@keyframes loading-1{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+}
+@keyframes loading-2{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(144deg);
+        transform: rotate(144deg);
+    }
+}
+@keyframes loading-3{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+    }
+}
+@keyframes loading-4{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(36deg);
+        transform: rotate(36deg);
+    }
+}
+@keyframes loading-5{
+    0%{
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(126deg);
+        transform: rotate(126deg);
+    }
+}
+@media only screen and (max-width: 990px){
+    .progress{ margin-bottom: 20px; }
+}
+
+</style>