Eric Fernandez / foca-logistica-pedido-ruta

5
Download as
Browse Code ยป

Commit 9ba5c967b754f74f3c7a82ac8428edfaa1b66c00

Authored by Eric Fernandez
1 parent 960bd05b6b
Exists in master

logistica de pedidos

Showing 7 changed files with 242 additions and 293 deletions   Show diff stats
... ... @@ -0,0 +1,25 @@
  1 +function allowDrop(ev) {
  2 + ev.preventDefault();
  3 +}
  4 +function drag(ev, marcador) {
  5 + marcador = JSON.stringify(marcador);
  6 + ev.dataTransfer.setData('marcador', marcador);
  7 + var elementoDom = document.getElementById('test');
  8 + var scope = angular.element(elementoDom).scope();
  9 + scope.arrastra();
  10 +}
  11 +function drop(ev) {
  12 + ev.preventDefault();
  13 + var data = ev.dataTransfer.getData('marcador');
  14 + var elementoDom = document.getElementById(ev.target.id);
  15 + var elementoAngular = angular.element(elementoDom);
  16 + var elementoScope = elementoAngular.scope();
  17 + elementoScope.cargar(ev.target.id, data);
  18 + elementoScope.$digest();
  19 +}
  20 +function dropEnd() {
  21 + console.log('drop');
  22 + var elementoDom = document.getElementById('test');
  23 + var scope = angular.element(elementoDom).scope();
1
  • Link here  
    D3a17936964e5150185f11d6293f69cb?s=40&d=identicon Jose Pinto

    No se puede usar directamente scope = angular.element('#test')[0].scope() ??

    Choose File ...   File name...
    Cancel
  24 + scope.noArrastra();
  25 +}
0 26 \ No newline at end of file
1
src/js/controller.js
Diff comments   View file @ 9ba5c96
1 1 angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaController', [
2 2 '$scope', 'focaLogisticaPedidoRutaService', '$location', '$uibModal', '$filter',
3   - function($scope, focaLogisticaPedidoRutaService, $location, $uibModal, $filter) {
4   - $scope.actividad = '';
5   -
  3 + 'focaModalService', 'focaBotoneraLateralService',
  4 + function($scope, focaLogisticaPedidoRutaService, $location, $uibModal, $filter,
  5 + focaModalService, focaBotoneraLateralService
  6 + ) {
6 7 $scope.now = new Date();
7   - $scope.actividad = 'Nota de pedido';
  8 + $scope.actividad = 'Logistica';
  9 +
  10 + //Datos Pantalla
  11 + $scope.titulo = 'Logistica de Pedidos';
  12 + $scope.botonera = ['Vehiculo'];
  13 + var cabecera = '';
  14 +
8 15 $scope.idUsuario = 0;
9 16 $scope.marcadores = [];
10 17 $scope.vehiculos = [];
... ... @@ -15,9 +22,23 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
15 22 getSeguimiento();
16 23 };
17 24  
  25 + //SETEO BOTONERA LATERAL
  26 + focaBotoneraLateralService.showSalir(true);
  27 + focaBotoneraLateralService.showPausar(false);
  28 + focaBotoneraLateralService.showGuardar(false);
  29 +
  30 + $scope.general = function() {
  31 + $scope.idUsuario = 0;
  32 + getSeguimiento();
  33 + $scope.$broadcast('removeCabecera', cabecera);
  34 + $scope.$broadcast('addCabecera',{
  35 + label: 'General',
  36 + valor: ''
  37 + });
  38 + };
  39 +
18 40 $scope.cargar = function(id, punto) {
19   - var marcador = JSON.parse(punto);
20   - var vehiculo = $filter('filter')($scope.vehiculos, {id: parseInt(id)})[0];
  41 + var idRemito = JSON.parse(punto).notaPedido.remito.id;
21 42 var modalInstance = $uibModal.open(
22 43 {
23 44 ariaLabelledBy: 'Busqueda de Vehiculo',
... ... @@ -25,18 +46,29 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
25 46 controller: 'focaDetalleVehiculo',
26 47 size: 'lg',
27 48 resolve: {
28   - vehiculo: function() {return vehiculo;},
29   - marcador: function() {return marcador;}
  49 + idVehiculo: function() {return id;},
  50 + idRemito: function() {return idRemito;}
30 51 }
31 52 }
32 53 );
33   - modalInstance.result.then(function() {
  54 + modalInstance.result.then(function() {
34 55 }, function() {
35   - //run when cancel modal
36 56 });
37 57 };
38 58  
39   - $scope.arrastra = function() {
  59 + $scope.quitarVehiculo = function(vehiculo) {
  60 + focaModalService.confirm('Esta seguro que desea eliminar el vehรญculo ' +
  61 + vehiculo.codigo + '?').then(function() {
  62 + $scope.vehiculos.splice($scope.vehiculos.indexOf(vehiculo), 1);
  63 + });
  64 + };
  65 +
  66 + $scope.informacionVehiculo = function(vehiculo) {
  67 + focaModalService.alert('EN DESARROLLO : \n informaciรณn del vehรญculo ' +
  68 + JSON.stringify(vehiculo));
  69 + };
  70 +
  71 + $scope.arrastra = function() {
40 72 $scope.arrastrando = true;
41 73 $scope.$digest();
42 74 };
... ... @@ -62,6 +94,11 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
62 94 if (key === 13) {
63 95 $scope.idUsuario = $scope.idUsuarioInput;
64 96 getSeguimiento();
  97 + $scope.$broadcast('removeCabecera', 'General');
  98 + $scope.$broadcast('addCabecera', {
  99 + label: cabecera,
  100 + valor: $scope.idUsuarioInput
  101 + });
65 102 }
66 103 };
67 104  
... ... @@ -81,14 +118,17 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
81 118  
82 119 modalInstance.result.then(
83 120 function(vehiculo) {
  121 + var existe = $filter('filter')($scope.vehiculos, {id: vehiculo.id});
  122 + if(existe.length > 0){
1
  123 + focaModalService.alert('El vehiculo que intenta cargar ya ha sido cargado');
  124 + return;
  125 + }
84 126 $scope.vehiculos.push(vehiculo);
85 127 }, function() {
86 128 // funcion ejecutada cuando se cancela el modal
87 129 }
88 130 );
89 131 };
90   -
91   -
92 132  
93 133 function getSeguimiento() {
94 134 var now = $scope.now;
... ... @@ -108,7 +148,6 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
108 148 };
109 149  
110 150 focaLogisticaPedidoRutaService.obtenerActividad(datos).then(function(datos) {
111   -
112 151 $scope.marcadores = datos.data;
113 152 });
114 153 }
src/js/controllerDetalleVehiculo.js
Diff comments   View file @ 9ba5c96
... ... @@ -2,30 +2,74 @@ angular.module('focaLogisticaPedidoRuta')
2 2 .controller('focaDetalleVehiculo',
3 3 ['$scope',
4 4 '$uibModalInstance',
5   - 'vehiculo',
6   - 'marcador',
7   - function($scope, $uibModalInstance, vehiculo, marcador) {
8   - $scope.articulos = marcador.notaPedido.articulosNotaPedido;
9   - $scope.articuloSeleccionado = {};
10   - $scope.vehiculo = vehiculo;
  5 + 'idVehiculo',
  6 + 'idRemito',
  7 + 'focaModalService',
  8 + '$filter',
  9 + 'focaLogisticaPedidoRutaService',
  10 + function($scope, $uibModalInstance, idVehiculo, idRemito, focaModalService, $filter,
  11 + focaLogisticaPedidoRutaService
  12 + ) {
  13 + $scope.articulos = [];
  14 + $scope.vehiculo = {};
  15 + $scope.remito = {};
  16 + focaLogisticaPedidoRutaService.obtenerVehiculoById(idVehiculo).then(
  17 + function(res) {
  18 + $scope.vehiculo = res.data;
  19 + }
  20 + );
  21 + focaLogisticaPedidoRutaService.obtenerRemitoById(idRemito).then(
  22 + function(res) {
  23 + $scope.remito = res.data;
  24 + $scope.articulos = res.data.articulosRemito;
  25 + }
  26 + );
  27 + $scope.aCargar = [];
11 28 $scope.aceptar = function() {
12 29 $uibModalInstance.close();
13 30 };
14 31  
15   - $scope.cargarACisterna = function(cisterna) {
16   - if(!$scope.articuloSeleccionado.id) {
17   - //TODO: usar modal de foca
18   - alert('Debe seleccionar un articulo');
19   - return;
20   - }
21   - if(cisterna.cisternaCarga.cantidad) {
22   - cisterna.cisternaCarga.cantidad += parseFloat(cisterna.aCargar);
23   - }else {
24   - cisterna.cisternaCarga.cantidad = parseFloat(cisterna.aCargar);
25   - cisterna.cisternaCarga.idProducto = $scope.articuloSeleccionado.id;
26   - }
27   - cisterna.disponible = cisterna.capacidad - cisterna.cisternaCarga.cantidad;
28   - cisterna.aCargar = '';
  32 + $scope.cancelar = function() {
  33 + $uibModalInstance.close();
  34 + };
  35 +
  36 + $scope.cargarACisternas = function(vehiculo) {
  37 + for (var i = 0; i < vehiculo.cisternas.length; i++) {
1
  38 + var cisterna = vehiculo.cisternas[i];
  39 + var aCargar = parseFloat($scope.aCargar[i]);
  40 + if(!aCargar) {
  41 + continue;
  42 + }
  43 + if(aCargar > cisterna.disponible) {
  44 + focaModalService.alert('La cantidad cargada supera la capacidad de la' +
  45 + 'cisterna ' + cisterna.codigo);
  46 + return;
  47 + }
  48 + if(cisterna.cisternaCarga.cantidad) {
  49 + cisterna.cisternaCarga.cantidad += aCargar;
  50 + }else {
  51 + cisterna.cisternaCarga.cantidad = aCargar;
  52 + cisterna.cisternaCarga.idProducto = $scope.articuloSeleccionado.idArticulo;
  53 + }
  54 + cisterna.disponible = cisterna.capacidad - cisterna.cisternaCarga.cantidad;
  55 +
  56 + cisterna.cisternaCarga.articulo = {
  57 + DetArt: $scope.articuloSeleccionado.descripcion
  58 + };
  59 + $filter('filter')($scope.articulos, {id: $scope.articuloSeleccionado.id})[0]
  60 + .cargado = true;
  61 +
  62 + $scope.calcularPorcentaje(cisterna);
  63 + }
  64 + var articuloSiguiente = $scope.articulos.filter(
  65 + function(filter) {
  66 + return filter.cargado !== true;
  67 + }
  68 + );
  69 + if(articuloSiguiente.length > 0){
1
  70 + $scope.cambioArticulo(articuloSiguiente[0]);
  71 + }
  72 + $scope.aCargar = [];
29 73 };
30 74 $scope.calcularPorcentaje = function(cisterna) {
31 75 if(!cisterna.cisternaCarga.cantidad) {
... ... @@ -33,9 +77,29 @@ angular.module(&#39;focaLogisticaPedidoRuta&#39;)
33 77 }
34 78 var porcentaje = (cisterna.cisternaCarga.cantidad * 100 /
35 79 cisterna.capacidad) + '%';
36   - document.getElementById(cisterna.id).style.width = porcentaje;
  80 + var elementHtml = document.getElementById(cisterna.id);
  81 + if(elementHtml) {
  82 + elementHtml.style.width = porcentaje;
  83 + }
37 84 };
38 85 $scope.cambioArticulo = function(articulo) {
  86 + articulo.checked = true;
39 87 $scope.articuloSeleccionado = articulo;
40 88 };
  89 + $scope.actualizarArticulo = function () {
  90 + $scope.articuloSeleccionado.cantidadCargada = 0;
  91 + for (var i = 0; i < $scope.aCargar.length; i++) {
  92 + $scope.articuloSeleccionado.cantidadCargada +=
  93 + parseFloat($scope.aCargar[i]) || 0;
  94 + }
  95 + };
  96 + $scope.tieneArticulosPendientes = function() {
  97 + var articulosDescargados = $scope.articulos.filter(function(filter) {
  98 + return filter.cargado === true;
  99 + });
  100 + if(articulosDescargados.length === $scope.articulos.length) {
  101 + return false;
  102 + }
  103 + return true;
  104 + };
41 105 }]);
src/js/osm-directive.js
Diff comments   View file @ 9ba5c96
... ... @@ -51,7 +51,7 @@ angular.module(&#39;focaLogisticaPedidoRuta&#39;).directive(&#39;foca&#39;, function() {
51 51 observacion += '<br/>';
52 52 observacion += '<i class="fa fa-map-marker fa-3x" aria-hidden="true"'+
53 53 'class="form-control" ondragend="dropEnd()" ondragstart=\'drag(event, '+
54   - JSON.stringify(marcador)+')\' draggable="true"></i>';
  54 + JSON.stringify(marcador)+')\' draggable="true"></i>(Arrastrar icono)';
55 55 $scope.markers.push(
56 56 L.marker([marcador.latitud, marcador.longitud]).addTo($scope.map)
57 57 .bindPopup(observacion)
... ... @@ -5,6 +5,12 @@ angular.module(&#39;focaLogisticaPedidoRuta&#39;)
5 5 return {
6 6 obtenerActividad: function(parametros) {
7 7 return $http.post(API_ENDPOINT.URL + '/seguimiento/filtros', parametros);
  8 + },
  9 + obtenerVehiculoById: function(idVehiculo) {
  10 + return $http.get(API_ENDPOINT.URL + '/vehiculo/' + idVehiculo);
  11 + },
  12 + obtenerRemitoById: function(idRemito) {
  13 + return $http.get(API_ENDPOINT.URL + '/remito/obtener/' + idRemito);
8 14 }
9 15 };
10 16 }]);
src/views/foca-detalle-vehiculo.html
Diff comments   View file @ 9ba5c96
1 1 <div class="modal-header">
2 2 <h4>Detalle de carga</h4>
3   - <h3>-EN DESARROLLO</h3>
  3 + <!-- TODO: quitar llaves {{}} y usar ng-bind -->
  4 + <h4>-EN DESARROLLO</h4>
  5 + Remito Nยบ
  6 + <strong ng-bind="remito.numeroRemito"></strong>
  7 + , Cliente
  8 + <strong ng-bind="remito.nombreCliente"></strong>
  9 + , Domicilio
  10 + <strong ng-bind="remito.domicilioStamp"></strong>
4 11 </div>
5 12 <div class="modal-body">
6 13 <div>
7   - <div class="col-12" ng-repeat="articulo in articulos">
  14 + <div class="col-12" ng-repeat="(key, articulo) in articulos">
8 15 <input
9 16 type="radio"
10 17 name="articuloRadio"
11 18 id="{{articulo.id}}"
  19 + ng-checked="articulo.checked"
  20 + ng-disabled="articulo.cargado"
12 21 ng-click="cambioArticulo(articulo)"
13 22 >
14 23 <span>Articulo: {{articulo.descripcion}},</span>
15   - <span>Cantidad Cargada: {{articulo.cantidad}}</span>
16   - <span>Cantidad a Cargar: </span>
  24 + <span>Total: {{articulo.cantidad}},</span>
  25 + <span>Cantidad Cargada: {{articulo.cantidadCargada || 0}},</span>
  26 + <span>Pendiente: {{articulo.cantidad - articulo.cantidadCargada}} </span>
17 27 </div>
18 28 <strong class="col-12" ng-bind="vehiculo.tractor"></strong>
19 29 <strong class="col-12">Cisternas:</strong>
20   - <div class="form-group row input-group" ng-repeat="cisterna in vehiculo.cisternas">
  30 + <div class="form-group row input-group" ng-repeat="(key, cisterna) in vehiculo.cisternas">
21 31 <div class="col-1 mt-2">
22 32 <strong>{{cisterna.codigo}}</strong>
23 33 </div>
24 34 <input
25   - class="form-control col-2"
  35 + class="form-control col-2 mr-3"
26 36 foca-tipo-input
27 37 foca-teclado
28 38 placeholder="A cargar..."
29   - ng-model="cisterna.aCargar"
30   - ng-disabled="articuloSeleccionado.cantidad > cisterna.disponible"
  39 + ng-model="aCargar[key]"
  40 + ng-disabled="(articuloSeleccionado.idArticulo !== cisterna.cisternaCarga.idProducto &&
  41 + cisterna.cisternaCarga.idProducto) || !tieneArticulosPendientes()"
  42 + ng-change="actualizarArticulo()"
31 43 >
32   - <div class="input-group-append">
33   - <button
34   - class="form-control btn btn-outline-secondary"
35   - ng-disabled="articuloSeleccionado.cantidad > cisterna.disponible">
36   - <i
37   - class="fa fa-save"
38   - ng-click="cargarACisterna(cisterna)"
39   - aria-hidden="true"></i>
40   - </button>
41   - </div>
42   - <div class="progress foca-alto col-8 pl-0 pr-0 mt-1">
  44 + <div class="progress foca-alto-progress col-4 pl-0 pr-0 mt-1">
43 45 <strong class="col-12 mt-1 text-center position-absolute"
44 46 >{{cisterna.cisternaCarga.cantidad || 0}} / {{cisterna.capacidad}}</strong>
45 47 <div
... ... @@ -51,33 +53,34 @@
51 53 ng-style="{'width':'{{calcularPorcentaje(cisterna)}}'}">
52 54 </div>
53 55 </div>
54   - <div class="col-1 mt-1">
55   - <i class="fa fa-info" data-toggle="tooltip" title="asd"></i>
  56 + <div class="col-4 mt-2">
  57 + <strong>{{cisterna.cisternaCarga.articulo.DetArt || 'Sin articulo'}}</strong>
56 58 </div>
  59 + <!--TODO: descomentar cuando se use-->
  60 + <!-- <div class="col-1 mt-1">
  61 + <i class="fa fa-info" uib-tooltip="Informaciรณn cisterna"></i>
  62 + </div> -->
  63 + </div>
  64 + <div class="col-12 aling-end">
  65 + <button
  66 + class="form-control"
  67 + type="button"
  68 + ng-disabled="!articuloSeleccionado || articuloSeleccionado.cantidad -
  69 + articuloSeleccionado.cantidadCargada !== 0 || !tieneArticulosPendientes()"
  70 + ng-click="cargarACisternas(vehiculo)">
  71 + Cargar cisternas
  72 + </button>
57 73 </div>
58 74 </div>
59 75 </div>
60 76 <div class="modal-footer py-1">
61   - <button class="btn btn-sm btn-secondary" type="button" ng-click="aceptar()">Aceptar</button>
  77 + <button
  78 + class="btn btn-sm btn-secondary"
  79 + type="button"
  80 + ng-click="cancelar()">Cancelar</button>
  81 + <button
  82 + class="btn btn-sm btn-primary"
  83 + type="button"
  84 + ng-click="aceptar()"
  85 + ng-disabled="tieneArticulosPendientes()">Cargar</button>
62 86 </div>
63   -<style>
64   -.progress-bar-vertical {
65   - width: 20px;
66   - min-height: 100px;
67   - display: flex;
68   - align-items: flex-end;
69   - margin-right: 20px;
70   - float: left;
71   -}
72   -
73   -.progress-bar-vertical .progress-bar {
74   - width: 100%;
75   - height: 0;
76   - -webkit-transition: height 0.6s ease;
77   - -o-transition: height 0.6s ease;
78   - transition: height 0.6s ease;
79   -}
80   -.foca-alto{
81   - height: 2rem;
82   -}
83   -</style>
src/views/foca-logistica-pedido-ruta.html
Diff comments   View file @ 9ba5c96
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 1 <div class="foca-logistica-pedido-ruta" id="test">
29   - <h3>-EN DESARROLLO</h3>
  2 + <div class="row">
  3 + <foca-cabecera-facturador
  4 + titulo="titulo"
  5 + fecha="now"
  6 + class="mb-0 col-lg-12"
  7 + ></foca-cabecera-facturador>
  8 + </div>
  9 + <div class="row px-5 py-2 botonera-secundaria">
  10 + <div class="col-12">
  11 + <foca-botonera-facturador botones="botonera" extra="5" class="row"></foca-botonera-facturador>
  12 + </div>
  13 + </div>
30 14 <div class="row">
31 15 <div class="offset-1 col-9">
32 16 <foca
... ... @@ -57,7 +41,6 @@
57 41 ng-class="{'active': idUsuario != 0}"
58 42 class="btn col-12 my-1"
59 43 ng-click="individual()"
60   - ng-show="actividad != 'Cobranza'"
61 44 >Individual</button>
62 45 <div class="form-group" ng-show="idUsuario == -1">
63 46 <input
... ... @@ -67,32 +50,9 @@
67 50 ng-model="idUsuarioInput"
68 51 ng-keypress="search($event.keyCode)"
69 52 foca-focus="idUsuario == -1"
70   - ng-show="actividad == 'Nota de pedido'"
71   - >
72   - <input
73   - type="text"
74   - placeholder="Vehiculo"
75   - class="form-control"
76   - ng-model="idUsuarioInput"
77   - ng-keypress="search($event.keyCode)"
78   - foca-focus="idUsuario == -1"
79   - ng-show="actividad == 'Entrega de producto'"
80 53 >
81 54 </div>
82   - <button
83   - type="button"
84   - class="btn col-12 my-1 boton-salir"
85   - ng-click="salir()"
86   - >
87   - Salir
88   - </button>
89 55 </div>
90   - <input
91   - class="col-auto form-control"
92   - ng-click="seleccionarVehiculo()"
93   - placeholder="Seleccionar vehiculo"
94   - readonly
95   - />
96 56 <div class="row">
97 57 <div
98 58 class="container col-auto"
... ... @@ -111,6 +71,20 @@
111 71 <div class="progress-value">{{vehiculo.codigo}}</div>
112 72 </div>
113 73 </div>
  74 + <div class="row">
  75 + <div class="text-left col-6">
  76 + <i
  77 + class="fa fa-info fa-2x"
  78 + uib-tooltip="Ver informaciรณn del vehรญculo"
  79 + ng-click="informacionVehiculo(vehiculo)"></i>
  80 + </div>
  81 + <div class="text-right col-6">
  82 + <i
  83 + class="fa fa-trash fa-2x"
  84 + uib-tooltip="Eliminar vehiculo"
  85 + ng-click="quitarVehiculo(vehiculo)"></i>
  86 + </div>
  87 + </div>
114 88 <div
115 89 class="col-12 border border-dark text-center"
116 90 ng-show="arrastrando"
... ... @@ -123,165 +97,3 @@
123 97 </div>
124 98 </div>
125 99 </div>
126   -<style>
127   -.arrastrando {
128   - opacity: 0.5;
129   -}
130   -.vertical {
131   - display: inline-block;
132   - width: 20%;
133   - height: 40px;
134   - -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
135   - transform: rotate(-90deg);
136   -}
137   -.progress-circle{
138   - width: 150px;
139   - height: 150px;
140   - line-height: 150px;
141   - background: none;
142   - margin: 0 auto;
143   - box-shadow: none;
144   - position: relative;
145   -}
146   -.progress-circle:after{
147   - content: "";
148   - width: 100%;
149   - height: 100%;
150   - border-radius: 50%;
151   - border: 12px solid #fff;
152   - position: absolute;
153   - top: 0;
154   - left: 0;
155   -}
156   -.progress-circle > span{
157   - width: 50%;
158   - height: 100%;
159   - overflow: hidden;
160   - position: absolute;
161   - top: 0;
162   - z-index: 1;
163   -}
164   -.progress-circle .progress-left{
165   - left: 0;
166   -}
167   -.progress-circle .progress-bar{
168   - width: 100%;
169   - height: 100%;
170   - background: none;
171   - border-width: 12px;
172   - border-style: solid;
173   - position: absolute;
174   - top: 0;
175   -}
176   -.progress-circle .progress-left .progress-bar{
177   - left: 100%;
178   - border-top-right-radius: 80px;
179   - border-bottom-right-radius: 80px;
180   - border-left: 0;
181   - -webkit-transform-origin: center left;
182   - transform-origin: center left;
183   -}
184   -.progress-circle .progress-right{
185   - right: 0;
186   -}
187   -.progress-circle .progress-right .progress-bar{
188   - left: -100%;
189   - border-top-left-radius: 80px;
190   - border-bottom-left-radius: 80px;
191   - border-right: 0;
192   - -webkit-transform-origin: center right;
193   - transform-origin: center right;
194   - animation: loading-1 1.8s linear forwards;
195   -}
196   -.progress-circle .progress-value{
197   - width: 90%;
198   - height: 90%;
199   - border-radius: 50%;
200   - background: #44484b;
201   - font-size: 24px;
202   - color: #fff;
203   - line-height: 135px;
204   - text-align: center;
205   - position: absolute;
206   - top: 5%;
207   - left: 5%;
208   -}
209   -.progress-circle.blue .progress-bar{
210   - border-color: #049dff;
211   -}
212   -.progress-circle.blue .progress-left .progress-bar{
213   - animation: loading-2 1.5s linear forwards 1.8s;
214   -}
215   -.progress-circle.yellow .progress-bar{
216   - border-color: #fdba04;
217   -}
218   -.progress-circle.yellow .progress-left .progress-bar{
219   - animation: loading-3 1s linear forwards 1.8s;
220   -}
221   -.progress-circle.pink .progress-bar{
222   - border-color: #ed687c;
223   -}
224   -.progress-circle.pink .progress-left .progress-bar{
225   - animation: loading-4 0.4s linear forwards 1.8s;
226   -}
227   -.progress-circle.green .progress-bar{
228   - border-color: #1abc9c;
229   -}
230   -.progress-circle.green .progress-left .progress-bar{
231   - animation: loading-5 1.2s linear forwards 1.8s;
232   -}
233   -@keyframes loading-1{
234   - 0%{
235   - -webkit-transform: rotate(0deg);
236   - transform: rotate(0deg);
237   - }
238   - 100%{
239   - -webkit-transform: rotate(180deg);
240   - transform: rotate(180deg);
241   - }
242   -}
243   -@keyframes loading-2{
244   - 0%{
245   - -webkit-transform: rotate(0deg);
246   - transform: rotate(0deg);
247   - }
248   - 100%{
249   - -webkit-transform: rotate(180deg);
250   - transform: rotate(180deg);
251   - }
252   -}
253   -@keyframes loading-3{
254   - 0%{
255   - -webkit-transform: rotate(0deg);
256   - transform: rotate(0deg);
257   - }
258   - 100%{
259   - -webkit-transform: rotate(90deg);
260   - transform: rotate(90deg);
261   - }
262   -}
263   -@keyframes loading-4{
264   - 0%{
265   - -webkit-transform: rotate(0deg);
266   - transform: rotate(0deg);
267   - }
268   - 100%{
269   - -webkit-transform: rotate(36deg);
270   - transform: rotate(36deg);
271   - }
272   -}
273   -@keyframes loading-5{
274   - 0%{
275   - -webkit-transform: rotate(0deg);
276   - transform: rotate(0deg);
277   - }
278   - 100%{
279   - -webkit-transform: rotate(126deg);
280   - transform: rotate(126deg);
281   - }
282   -}
283   -@media only screen and (max-width: 990px){
284   - .progress{ margin-bottom: 20px; }
285   -}
286   -
287   -</style>