Eric Fernandez / foca-logistica-pedido-ruta

Download as
Browse Code ยป

Commit d09f218da028eeeee5c0d534367ae09c8a6e812f

Authored by Eric Fernandez
1 parent 7157d3b635
Exists in master

first commit

Showing 11 changed files with 432 additions and 191 deletions   Show diff stats
... ... @@ -23,7 +23,7 @@ gulp.task('templates', ['clean'], function() {
23 23 gulp.src(paths.srcViews),
24 24 htmlmin(),
25 25 templateCache('views.js', {
26   - module: 'focaAdminSeguimiento',
  26 + module: 'focaLogisticaPedidoRuta',
27 27 root: ''
28 28 }),
29 29 gulp.dest(paths.tmp)
... ... @@ -38,10 +38,10 @@ gulp.task('uglify', ['templates'], function() {
38 38 paths.srcJS,
39 39 'tmp/views.js'
40 40 ]),
41   - concat('foca-admin-seguimiento.js'),
  41 + concat('foca-logistica-pedido-ruta.js'),
42 42 replace('src/views/', ''),
43 43 gulp.dest(paths.tmp),
44   - rename('foca-admin-seguimiento.min.js'),
  44 + rename('foca-logistica-pedido-ruta.min.js'),
45 45 uglify(),
46 46 replace('"ngRoute","ui.bootstrap"', ''),
47 47 gulp.dest(paths.dist)
1 1 {
2   - "name": "foca-admin-seguimiento",
  2 + "name": "foca-logistica-pedido-ruta",
3 3 "version": "0.0.2",
4   - "description": "Seguimiento de actividad",
  4 + "description": "Logistica de pedidos",
5 5 "main": "index.js",
6 6 "scripts": {
7 7 "test": "echo \"Error: no test specified\" && exit 1",
... ... @@ -15,7 +15,7 @@
15 15 ],
16 16 "repository": {
17 17 "type": "git",
18   - "url": "https://debo.suite.repo/modulos-npm/foca-admin-seguimiento.git"
  18 + "url": "http://git.focasoftware.com/npm/foca-logistica-pedido-ruta.git"
19 19 },
20 20 "author": "Foca Software",
21 21 "license": "ISC",
... ... @@ -25,10 +25,10 @@
25 25 "bootstrap": "^4.1.3",
26 26 "font-awesome": "^4.7.0",
27 27 "gulp": "^3.9.1",
28   - "gulp-angular-templatecache": "^2.2.3",
  28 + "gulp-angular-templatecache": "^2.2.5",
29 29 "gulp-clean": "^0.4.0",
30 30 "gulp-concat": "^2.6.1",
31   - "gulp-connect": "^5.6.1",
  31 + "gulp-connect": "^5.7.0",
32 32 "gulp-htmlmin": "^5.0.1",
33 33 "gulp-jshint": "^2.1.0",
34 34 "gulp-rename": "^1.4.0",
... ... @@ -38,7 +38,7 @@
38 38 "gulp-uglify-es": "^1.0.4",
39 39 "jasmine-core": "^3.3.0",
40 40 "jquery": "^3.3.1",
41   - "jshint": "^2.9.6",
  41 + "jshint": "^2.9.7",
42 42 "leaflet": "^1.3.4",
43 43 "pre-commit": "^1.2.2",
44 44 "pump": "^3.0.0",
1   -angular.module('focaAdminSeguimiento', [
  1 +angular.module('focaLogisticaPedidoRuta', [
2 2 'ngRoute',
3 3 'ui.bootstrap'
4 4 ]);
src/js/controller.js
Diff comments   View file @ d09f218
1   -angular.module('focaAdminSeguimiento') .controller('focaAdminSeguimientoController', [
2   - '$scope', 'focaAdminSeguimientoService', '$location', '$routeParams',
3   - function($scope, focaAdminSeguimientoService, $location, $routeParams) {
  1 +angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaController', [
  2 + '$scope', 'focaLogisticaPedidoRutaService', '$location', '$uibModal', '$filter',
  3 + function($scope, focaLogisticaPedidoRutaService, $location, $uibModal, $filter) {
4 4 $scope.actividad = '';
5 5  
6 6 $scope.now = new Date();
7   -
8   - if ($routeParams.parametro === 'nota-pedido') {
9   - $scope.actividad = 'Nota de pedido';
10   - }
11   -
12   - if ($routeParams.parametro === 'hoja-ruta') {
13   - $scope.actividad = 'Entrega de producto';
14   - }
15   -
16   - if ($routeParams.parametro === 'cobranza') {
17   - $scope.actividad = 'Cobranza';
18   - }
19   -
  7 + $scope.actividad = 'Nota de pedido';
20 8 $scope.idUsuario = 0;
21 9 $scope.marcadores = [];
  10 + $scope.vehiculos = [];
22 11 getSeguimiento();
23   -
  12 + $scope.arrastrando = false;
24 13 $scope.general = function() {
25 14 $scope.idUsuario = 0;
26 15 getSeguimiento();
27 16 };
28 17  
  18 + $scope.cargar = function(id, punto) {
  19 + var marcador = JSON.parse(punto);
  20 + var vehiculo = $filter('filter')($scope.vehiculos, {id: parseInt(id)})[0];
  21 + var modalInstance = $uibModal.open(
  22 + {
  23 + ariaLabelledBy: 'Busqueda de Vehiculo',
  24 + templateUrl: 'foca-detalle-vehiculo.html',
  25 + controller: 'focaDetalleVehiculo',
  26 + size: 'lg',
  27 + resolve: {
  28 + vehiculo: function() {return vehiculo;},
  29 + marcador: function() {return marcador;}
  30 + }
  31 + }
  32 + );
  33 + modalInstance.result.then(function() {
  34 + }, function() {
  35 + //run when cancel modal
  36 + });
  37 + };
  38 +
  39 + $scope.arrastra = function() {
  40 + $scope.arrastrando = true;
  41 + $scope.$digest();
  42 + };
  43 +
  44 + $scope.noArrastra = function() {
  45 + $scope.arrastrando = false;
  46 + $scope.$digest();
  47 + };
  48 +
29 49 $scope.individual = function() {
30 50 $scope.idUsuario = -1;
31 51 };
32 52  
  53 + $scope.mostrarDetalle = function() {
  54 + $scope.detalle = true;
  55 + };
  56 +
33 57 $scope.salir = function() {
34 58 $location.path('/');
35 59 };
... ... @@ -44,7 +68,28 @@ angular.module('focaAdminSeguimiento') .controller('focaAdminSeguimientoControll
44 68 $scope.fecha = function() {
45 69 getSeguimiento();
46 70 };
  71 +
  72 + $scope.seleccionarVehiculo = function() {
  73 + var modalInstance = $uibModal.open(
  74 + {
  75 + ariaLabelledBy: 'Busqueda de Vehiculo',
  76 + templateUrl: 'modal-vehiculo.html',
  77 + controller: 'focaModalVehiculoController',
  78 + size: 'lg'
  79 + }
  80 + );
  81 +
  82 + modalInstance.result.then(
  83 + function(vehiculo) {
  84 + $scope.vehiculos.push(vehiculo);
  85 + }, function() {
  86 + // funcion ejecutada cuando se cancela el modal
  87 + }
  88 + );
  89 + };
47 90  
  91 +
  92 +
48 93 function getSeguimiento() {
49 94 var now = $scope.now;
50 95 var desde = new Date(new Date(now.setHours(0)).setMinutes(0));
... ... @@ -62,7 +107,7 @@ angular.module('focaAdminSeguimiento') .controller('focaAdminSeguimientoControll
62 107 individual: $scope.idUsuario !== 0 ? true : false
63 108 };
64 109  
65   - focaAdminSeguimientoService.obtenerActividad(datos).then(function(datos) {
  110 + focaLogisticaPedidoRutaService.obtenerActividad(datos).then(function(datos) {
66 111  
67 112 $scope.marcadores = datos.data;
68 113 });
src/js/controllerDetalleVehiculo.js
Diff comments   View file @ d09f218
... ... @@ -0,0 +1,9 @@
  1 +angular.module('focaLogisticaPedidoRuta')
  2 + .controller('focaDetalleVehiculo', ['$scope', '$uibModalInstance', 'vehiculo', 'marcador',
  3 + function($scope, $uibModalInstance, vehiculo, marcador) {
  4 + $scope.articulos = marcador.notaPedido.articulosNotaPedido;
  5 + $scope.vehiculo = vehiculo;
  6 + $scope.aceptar = function() {
  7 + $uibModalInstance.close();
  8 + };
  9 + }]);
src/js/osm-directive.js
Diff comments   View file @ d09f218
1   -angular.module('focaAdminSeguimiento').directive('osm', function() {
  1 +angular.module('focaLogisticaPedidoRuta').directive('foca', function() {
2 2 return {
3 3 restrict: 'E',
4 4 link: function(scope, el, attrs) {
... ... @@ -7,105 +7,18 @@ angular.module('focaAdminSeguimiento').directive('osm', function() {
7 7 scope.map = L.map(contenedor).setView([attrs.latitud, attrs.longitud], attrs.zoom);
8 8 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
9 9 },
10   - controller: ['$scope', '$filter', function($scope, $filter) {
11   - $scope.markers = [];
  10 + controller: ['$scope', function($scope) {
  11 + $scope.markers = [];
12 12 $scope.$watch('marcadores', function() {
13 13 for(var i in $scope.markers) {
14 14 $scope.map.removeLayer($scope.markers[i]);
15 15 }
16   -
17 16 $scope.markers = [];
18   - angular.forEach($scope.marcadores, function(marcador) {
19   - var observacion = '';
20   -
21   - if ($scope.parametros.actividad === 'Nota de pedido') {
22   - observacion +=
23   - 'Vendedor: ' + marcador.notaPedido.idVendedor + ' - ' +
24   - (
25   - marcador.notaPedido.vendedor ?
26   - marcador.notaPedido.vendedor.NomVen :
27   - ''
28   - ) + '<br/>';
29   - observacion += 'Fecha: ' +
30   - $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
31   - marcador.fecha.slice(11,19) + '<br/>';
32   - observacion += 'Nยบ: ' + $filter('comprobante')([
33   - marcador.notaPedido.sucursal,
34   - marcador.notaPedido.numeroNotaPedido
35   - ]) + '<br/>';
36   - observacion += 'Cliente: ' +
37   - marcador.notaPedido.cliente.NOM + '<br/>';
38   -
39   - if ($scope.parametros.individual) {
40   - observacion +=
41   - 'Total: ' + $filter('currency')(marcador.notaPedido.total, '$');
42   - observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;
43   -
44   - if (marcador.distancia) {
45   - observacion += '<br/>Distancia a casa central: ' +
46   - marcador.distancia + 'km';
47   - }
48   - } else {
49   - observacion += 'Cantidad de nota de pedido: ' +
50   - marcador.cantidad + '<br/>';
51   - observacion += 'Total Vendido: ' +
52   - $filter('currency')(marcador.total, '$');
53   - }
54   - }
55   -
56   - if ($scope.parametros.actividad === 'Cobranza') {
57   - observacion += 'Cobrador: ' + marcador.recibo.CFE + '<br/>';
58   - observacion += 'Fecha: ' +
59   - $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
60   - marcador.fecha.slice(11,19) + '<br/>';
61   - observacion += 'Nยบ: ' + $filter('comprobante')([
62   - marcador.sucursal, marcador.idUsuario]) + '<br/>';
63   - observacion += 'Cliente: ' + marcador.recibo.cliente.NOM + '<br/>';
64   - observacion += 'Total Cobrado: $' + marcador.factura.IPA;
65   - }
66   -
67   - if ($scope.parametros.actividad === 'Entrega de producto') {
68   - observacion += 'Vehiculo: ' +
69   - marcador.remito.hojaRuta.idVehiculo + ' - ' +
70   - marcador.remito.hojaRuta.vehiculo.tractor + '<br/>';
71   - observacion += 'Transportista: ' +
72   - marcador.remito.hojaRuta.transportista.NOM + '<br/>';
73   - observacion += 'Chofer: ' +
74   - marcador.remito.hojaRuta.chofer.nombre + '<br/>';
75   - observacion += 'Fecha: ' +
76   - $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
77   - marcador.fecha.slice(11,19) + '<br/>';
78   - observacion += 'Hoja de ruta: ' + $filter('comprobante')([
79   - marcador.remito.hojaRuta.sucursal,
80   - marcador.remito.hojaRuta.numeroHojaRuta
81   - ]) + '<br/>';
82   - observacion += 'Remito: ' + $filter('comprobante')([
83   - marcador.remito.sucursal,
84   - marcador.remito.numeroRemito
85   - ]) + '<br/>';
86   - observacion += 'Cliente: ' +
87   - marcador.remito.cliente.NOM + '<br/>';
88   -
89   - if ($scope.parametros.individual) {
90   - observacion += 'Producto: ' +
91   - marcador.remito.articulosRemito[0].descripcion + '<br/>';
92   - observacion += 'Cantidad entregada: ' +
93   - marcador.remito.carga + '<br/>';
94   -
95   - if (marcador.distancia) {
96   - observacion += 'Distancia a casa central: ' + marcador.distancia +
97   - 'km <br/>';
98   - }
99   -
100   - if (marcador.observaciones) {
101   - observacion += 'Observaciones: ' + marcador.observaciones;
102   - }
103   - observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;
104   - } else {
105   - observacion += 'Cantidad de entregas: ' + marcador.cantidad;
106   - }
107   - }
108 17  
  18 + angular.forEach($scope.marcadores, function(marcador) {
  19 + var observacion = '<i class="fa fa-map-marker fa-5x" aria-hidden="true"'+
  20 + 'class="form-control" ondragend="dropEnd()" ondragstart="drag(event, '+
  21 + JSON.stringify(marcador)+')" draggable="true"></i>';
109 22 $scope.markers.push(
110 23 L.marker([marcador.latitud, marcador.longitud]).addTo($scope.map)
111 24 .bindPopup(observacion)
1   -angular.module('focaAdminSeguimiento')
  1 +angular.module('focaLogisticaPedidoRuta')
2 2 .config(['$routeProvider', function($routeProvider) {
3   - $routeProvider.when('/admin-seguimiento/:parametro', {
4   - controller: 'focaAdminSeguimientoController',
5   - templateUrl: 'src/views/foca-admin-seguimiento.html'
  3 + $routeProvider.when('/logistica-pedido-ruta', {
  4 + controller: 'focaLogisticaPedidoRutaController',
  5 + templateUrl: 'src/views/foca-logistica-pedido-ruta.html'
6 6 });
7 7 }]);
1   -angular.module('focaAdminSeguimiento')
  1 +angular.module('focaLogisticaPedidoRuta')
2 2 .service(
3   - 'focaAdminSeguimientoService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT
  3 + 'focaLogisticaPedidoRutaService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT
4 4 ) {
5 5 return {
6 6 obtenerActividad: function(parametros) {
src/views/foca-admin-seguimiento.html
View file @ d09f218
... ... @@ -1,63 +0,0 @@
1   -<div class="foca-admin-seguimiento">
2   - <div class="row">
3   - <div class="offset-1 col-9">
4   - <osm
5   - latitud="-32.89214159952345"
6   - longitud="-68.84572999101856"
7   - zoom="14"
8   - marcadores="marcadores"
9   - parametros= "datosBuscados"
10   - />
11   - </div>
12   - <div class="col-2 pl-0">
13   - <input
14   - type="date"
15   - ng-model="now"
16   - class="btn col-12 my-1"
17   - foca-focus="true"
18   - ng-blur="fecha()"
19   - hasta-hoy
20   - />
21   - <button
22   - type="button"
23   - ng-class="{'active': idUsuario == 0}"
24   - class="btn col-12 my-1"
25   - ng-click="general()"
26   - >General</button>
27   - <button
28   - type="button"
29   - ng-class="{'active': idUsuario != 0}"
30   - class="btn col-12 my-1"
31   - ng-click="individual()"
32   - ng-show="actividad != 'Cobranza'"
33   - >Individual</button>
34   - <div class="form-group" ng-show="idUsuario == -1">
35   - <input
36   - type="text"
37   - placeholder="Vendedor"
38   - class="form-control"
39   - ng-model="idUsuarioInput"
40   - ng-keypress="search($event.keyCode)"
41   - foca-focus="idUsuario == -1"
42   - ng-show="actividad == 'Nota de pedido'"
43   - >
44   - <input
45   - type="text"
46   - placeholder="Vehiculo"
47   - class="form-control"
48   - ng-model="idUsuarioInput"
49   - ng-keypress="search($event.keyCode)"
50   - foca-focus="idUsuario == -1"
51   - ng-show="actividad == 'Entrega de producto'"
52   - >
53   - </div>
54   - <button
55   - type="button"
56   - class="btn col-12 my-1 boton-salir"
57   - ng-click="salir()"
58   - >
59   - Salir
60   - </button>
61   - </div>
62   - </div>
63   -</div>
src/views/foca-detalle-vehiculo.html
Diff comments   View file @ d09f218
... ... @@ -0,0 +1,51 @@
  1 +<div class="modal-header">
  2 + <h4>Detalle de carga</h4>
  3 +</div>
  4 +<div class="modal-body">
  5 + <div class="row">
  6 + <div class="col-12" ng-repeat="articulo in articulos">
  7 + <input
  8 + type="checkbox"
  9 + ng-model="articulo.chequed"
  10 + >
  11 + <span>Articulo: {{articulo.descripcion}},</span>
  12 + <span>Cantidad: {{articulo.cantidad}}</span>
  13 + </div>
  14 + <strong class="col-12" ng-bind="vehiculo.tractor"></strong>
  15 + <strong class="col-12">Cisternas:</strong>
  16 + <!-- <div class="text-center">
  17 + <div class="progress" ng-repeat="cisterna in vehiculo.cisternas">
  18 + <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 30%;">
  19 + <span class="sr-only">30% Complete</span>
  20 + </div>
  21 + </div>
  22 + </div> -->
  23 + <div class="progress col-12" ng-repeat="cisterna in vehiculo.cisternas">
  24 + <div class="progress-bar" role="progressbar" aria-valuenow="70"
  25 + aria-valuemin="0" aria-valuemax="100" style="width:70%">
  26 + <span class="sr-only">70% Complete</span>
  27 + </div>
  28 + </div>
  29 + </div>
  30 +</div>
  31 +<div class="modal-footer py-1">
  32 + <button class="btn btn-sm btn-secondary" type="button" ng-click="aceptar()">Aceptar</button>
  33 +</div>
  34 +<style>
  35 +.progress-bar-vertical {
  36 + width: 20px;
  37 + min-height: 100px;
  38 + display: flex;
  39 + align-items: flex-end;
  40 + margin-right: 20px;
  41 + float: left;
  42 +}
  43 +
  44 +.progress-bar-vertical .progress-bar {
  45 + width: 100%;
  46 + height: 0;
  47 + -webkit-transition: height 0.6s ease;
  48 + -o-transition: height 0.6s ease;
  49 + transition: height 0.6s ease;
  50 +}
  51 +</style>
0 52 \ No newline at end of file
src/views/foca-logistica-pedido-ruta.html
Diff comments   View file @ d09f218
... ... @@ -0,0 +1,286 @@
  1 +<script>
  2 + function allowDrop(ev) {
  3 + ev.preventDefault();
  4 + }
  5 + function drag(ev, marcador) {
  6 + marcador = JSON.stringify(marcador);
  7 + ev.dataTransfer.setData("marcador", marcador);
  8 + var dom_el = document.getElementById('test');
  9 + var scope = angular.element(dom_el).scope();
  10 + scope.arrastra();
  11 + }
  12 + function drop(ev) {
  13 + ev.preventDefault();
  14 + var data = ev.dataTransfer.getData("marcador");
  15 + var dom_el = document.getElementById(ev.target.id);
  16 + var ng_el = angular.element(dom_el);
  17 + var ng_el_scope = ng_el.scope();
  18 + ng_el_scope.cargar(ev.target.id, data);
  19 + ng_el_scope.$digest();
  20 + }
  21 + function dropEnd() {
  22 + console.log('drop');
  23 + var dom_el = document.getElementById('test');
  24 + var scope = angular.element(dom_el).scope();
  25 + scope.noArrastra();
  26 + }
  27 +</script>
  28 +<div class="foca-logistica-pedido-ruta" id="test">
  29 + <div class="row">
  30 + <div class="offset-1 col-9">
  31 + <foca
  32 + latitud="-32.89214159952345"
  33 + longitud="-68.84572999101856"
  34 + zoom="14"
  35 + marcadores="marcadores"
  36 + parametros= "datosBuscados"
  37 + />
  38 + </div>
  39 + <div class="col-2 pl-0">
  40 + <input
  41 + type="date"
  42 + ng-model="now"
  43 + class="btn col-12 my-1"
  44 + foca-focus="true"
  45 + ng-blur="fecha()"
  46 + hasta-hoy
  47 + />
  48 + <button
  49 + type="button"
  50 + ng-class="{'active': idUsuario == 0}"
  51 + class="btn col-12 my-1"
  52 + ng-click="general()"
  53 + >General</button>
  54 + <button
  55 + type="button"
  56 + ng-class="{'active': idUsuario != 0}"
  57 + class="btn col-12 my-1"
  58 + ng-click="individual()"
  59 + ng-show="actividad != 'Cobranza'"
  60 + >Individual</button>
  61 + <div class="form-group" ng-show="idUsuario == -1">
  62 + <input
  63 + type="text"
  64 + placeholder="Vendedor"
  65 + class="form-control"
  66 + ng-model="idUsuarioInput"
  67 + ng-keypress="search($event.keyCode)"
  68 + foca-focus="idUsuario == -1"
  69 + ng-show="actividad == 'Nota de pedido'"
  70 + >
  71 + <input
  72 + type="text"
  73 + placeholder="Vehiculo"
  74 + class="form-control"
  75 + ng-model="idUsuarioInput"
  76 + ng-keypress="search($event.keyCode)"
  77 + foca-focus="idUsuario == -1"
  78 + ng-show="actividad == 'Entrega de producto'"
  79 + >
  80 + </div>
  81 + <button
  82 + type="button"
  83 + class="btn col-12 my-1 boton-salir"
  84 + ng-click="salir()"
  85 + >
  86 + Salir
  87 + </button>
  88 + </div>
  89 + <input
  90 + class="col-auto form-control"
  91 + ng-click="seleccionarVehiculo()"
  92 + placeholder="Seleccionar vehiculo"
  93 + readonly
  94 + />
  95 + <div class="row">
  96 + <div
  97 + class="container col-auto"
  98 + ng-repeat="vehiculo in vehiculos"
  99 + ng-click="mostrarDetalleVehiculo(vehiculo)"
  100 + >
  101 + <div>
  102 + <div class="col-md-3 col-sm-6">
  103 + <div class="progress-circle blue" ng-class="{'arrastrando': arrastrando}">
  104 + <span class="progress-left">
  105 + <span class="progress-bar"></span>
  106 + </span>
  107 + <span class="progress-right">
  108 + <span class="progress-bar"></span>
  109 + </span>
  110 + <div class="progress-value">{{vehiculo.codigo}}</div>
  111 + </div>
  112 + </div>
  113 + <div
  114 + class="col-12 border border-dark text-center"
  115 + ng-show="arrastrando"
  116 + id="{{vehiculo.id}}"
  117 + ondrop="drop(event)"
  118 + ondragover="allowDrop(event)"
  119 + >Soltar acรก</div>
  120 + </div>
  121 + </div>
  122 + </div>
  123 + </div>
  124 +</div>
  125 +<style>
  126 +.arrastrando {
  127 + opacity: 0.5;
  128 +}
  129 +.vertical {
  130 + display: inline-block;
  131 + width: 20%;
  132 + height: 40px;
  133 + -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  134 + transform: rotate(-90deg);
  135 +}
  136 +.progress-circle{
  137 + width: 150px;
  138 + height: 150px;
  139 + line-height: 150px;
  140 + background: none;
  141 + margin: 0 auto;
  142 + box-shadow: none;
  143 + position: relative;
  144 +}
  145 +.progress-circle:after{
  146 + content: "";
  147 + width: 100%;
  148 + height: 100%;
  149 + border-radius: 50%;
  150 + border: 12px solid #fff;
  151 + position: absolute;
  152 + top: 0;
  153 + left: 0;
  154 +}
  155 +.progress-circle > span{
  156 + width: 50%;
  157 + height: 100%;
  158 + overflow: hidden;
  159 + position: absolute;
  160 + top: 0;
  161 + z-index: 1;
  162 +}
  163 +.progress-circle .progress-left{
  164 + left: 0;
  165 +}
  166 +.progress-circle .progress-bar{
  167 + width: 100%;
  168 + height: 100%;
  169 + background: none;
  170 + border-width: 12px;
  171 + border-style: solid;
  172 + position: absolute;
  173 + top: 0;
  174 +}
  175 +.progress-circle .progress-left .progress-bar{
  176 + left: 100%;
  177 + border-top-right-radius: 80px;
  178 + border-bottom-right-radius: 80px;
  179 + border-left: 0;
  180 + -webkit-transform-origin: center left;
  181 + transform-origin: center left;
  182 +}
  183 +.progress-circle .progress-right{
  184 + right: 0;
  185 +}
  186 +.progress-circle .progress-right .progress-bar{
  187 + left: -100%;
  188 + border-top-left-radius: 80px;
  189 + border-bottom-left-radius: 80px;
  190 + border-right: 0;
  191 + -webkit-transform-origin: center right;
  192 + transform-origin: center right;
  193 + animation: loading-1 1.8s linear forwards;
  194 +}
  195 +.progress-circle .progress-value{
  196 + width: 90%;
  197 + height: 90%;
  198 + border-radius: 50%;
  199 + background: #44484b;
  200 + font-size: 24px;
  201 + color: #fff;
  202 + line-height: 135px;
  203 + text-align: center;
  204 + position: absolute;
  205 + top: 5%;
  206 + left: 5%;
  207 +}
  208 +.progress-circle.blue .progress-bar{
  209 + border-color: #049dff;
  210 +}
  211 +.progress-circle.blue .progress-left .progress-bar{
  212 + animation: loading-2 1.5s linear forwards 1.8s;
  213 +}
  214 +.progress-circle.yellow .progress-bar{
  215 + border-color: #fdba04;
  216 +}
  217 +.progress-circle.yellow .progress-left .progress-bar{
  218 + animation: loading-3 1s linear forwards 1.8s;
  219 +}
  220 +.progress-circle.pink .progress-bar{
  221 + border-color: #ed687c;
  222 +}
  223 +.progress-circle.pink .progress-left .progress-bar{
  224 + animation: loading-4 0.4s linear forwards 1.8s;
  225 +}
  226 +.progress-circle.green .progress-bar{
  227 + border-color: #1abc9c;
  228 +}
  229 +.progress-circle.green .progress-left .progress-bar{
  230 + animation: loading-5 1.2s linear forwards 1.8s;
  231 +}
  232 +@keyframes loading-1{
  233 + 0%{
  234 + -webkit-transform: rotate(0deg);
  235 + transform: rotate(0deg);
  236 + }
  237 + 100%{
  238 + -webkit-transform: rotate(180deg);
  239 + transform: rotate(180deg);
  240 + }
  241 +}
  242 +@keyframes loading-2{
  243 + 0%{
  244 + -webkit-transform: rotate(0deg);
  245 + transform: rotate(0deg);
  246 + }
  247 + 100%{
  248 + -webkit-transform: rotate(144deg);
  249 + transform: rotate(144deg);
  250 + }
  251 +}
  252 +@keyframes loading-3{
  253 + 0%{
  254 + -webkit-transform: rotate(0deg);
  255 + transform: rotate(0deg);
  256 + }
  257 + 100%{
  258 + -webkit-transform: rotate(90deg);
  259 + transform: rotate(90deg);
  260 + }
  261 +}
  262 +@keyframes loading-4{
  263 + 0%{
  264 + -webkit-transform: rotate(0deg);
  265 + transform: rotate(0deg);
  266 + }
  267 + 100%{
  268 + -webkit-transform: rotate(36deg);
  269 + transform: rotate(36deg);
  270 + }
  271 +}
  272 +@keyframes loading-5{
  273 + 0%{
  274 + -webkit-transform: rotate(0deg);
  275 + transform: rotate(0deg);
  276 + }
  277 + 100%{
  278 + -webkit-transform: rotate(126deg);
  279 + transform: rotate(126deg);
  280 + }
  281 +}
  282 +@media only screen and (max-width: 990px){
  283 + .progress{ margin-bottom: 20px; }
  284 +}
  285 +
  286 +</style>