Question

我正在使用一个角度项目，我的应用程序中有一个GET和POST $ http请求。我在屏幕顶部的角度加载条之前使用过。但是根据新的要求，我需要用大圆形加载条更改当前加载条，内部百分比和模糊背景。

我发现Angular SVG圆形进度条非常适合我的问题。我检查了他们的网站和Gitlab，但我没有发现如何与我的提交表单操作集成？（基本上我向服务器提交了一个表单，我得到了回复，但是这需要很长时间，以至于我之间需要这个循环进度条）

任何帮助将不胜感激......：）

更新

我的HTML看起来像这样，

<form ng-submit="ctrl.submitSearch()">
   <input type="text">
   <input type="text">
   <input type="checkbox">

   <button> Start </button>
</form>

/* Result Table */

<table>
</table>

示例循环加载栏（这是我想要的） http://crisbeto.github.io/angular-svg-round-progressbar/

修改

目前我有这样的进度条元素，

<!--Background element when loading is in progress -->
<div class="overlay" ng-show="loading"></div>

    <!--Angular SVG circular loading bar -->
    <div class="popup"
        ng-show="loading"
        round-progress
        max="100"
        current="current"
        color="#64b8e3"
        bgcolor="#008acf"
        radius="100"
        stroke="20"
        semi="false"
        rounded="true"
        clockwise="true"
        responsive="false"
        duration="800"
        animation="easeInOutQuart">
    </div>

这是我目前的CSS，

/* CSS for adding blury black background while loading is in progress */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-top: 0;
  z-index: 998;
  background-color: Black;
  opacity: .5;
} 

/* CSS for loading bar */
.popup {
  position: fixed;
  z-index: 999;
  padding-left: 45%;
}

一切都很完美，除了圆形加载条的位置，我想要在页面的中心并在滚动时固定。

Answer 1

假设您的帖子是异步的，his fiddle显示了您的操作方式。

您可以按如下方式设置角度绑定：

1）在div或其他元素上使用ng-class，你可以绑定blur css类，根据你的代码结构，你可能想要取消设置进度表上的'blur'css类。

2）在进度表上将'current'属性绑定到$ scope中的ticks计数器变量。

3）当你提交你的帖子时，也会启动一个带有勾号增量函数的$ interval，直到你得到一个将停止增量的post回调，重置你div上的blur类并填充结果表

你提到你有两个帖子，当你得到第一个回复时你可能想要明确设置currentTicks的值（例如，如果这代表了你将其设置为50的工作的50％）。

你可能需要使用一些css绝对位置魔法才能让你的进度表显示在正确的位置（并且从一开始就显示我的，但是你可以使用一个绑定的css类来使它显示：none直到它准备好显示）

编辑：我没有提到模糊css，我刚从BenSlight的回答中解除了Blur effect on a div element

编辑精致模糊...

form.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

基于评论的一些额外信息。 - 完成POST后，如果将类绑定到角元素（例如bgClass）$ scope.bgClass =“”，则需要从元素中删除blur类。将清除它。

re：时间，使用此特定可视化作为百分比的问题是，您必须以某种方式知道何时达到100％。即，呼叫总是在40秒后结束，或者您每隔几秒轮询一次回调，并显示进度指示。使用我在此处概述的当前设置并保持基于百分比的最佳效果是调整图表上的间隔量或最大值，以便在POST处理完成之前它绝对不会完成。

-re：定位叠加层有一些静态css应用于进度div，这使得它有点棘手，但你可以在它周围放一个单独的div并应用以下样式（再次，你将要在开始时将这个类添加到元素中该过程，并在POST完成后将其删除） - 您可能需要调整这些填充值以获得最佳结果。如果你环顾四周，你可能会发现更简单的清洁css覆盖tbh。（我用例子更新了小提琴）

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100px;
    height: 100%;
    margin: 0 auto;
    padding-left: 40%;
    padding-top: 30%;
    z-index: 5;
}

如何使用带有模糊背景的Angular SVG圆形进度条？

1 个答案: