Javascript @关键帧的行为类似于加载条

CSS3中是否有我可以这样做的

@key frame

-语法的行为类似于加载条

当我按住div键时，绿色进度条将从0%变为100%，并重定向到另一个页面，我希望这样做

---

演示

您可以执行以下操作：

div {
  border-left:300px solid green;
  border-right:0px solid red;
  animation:loading 10s linear; /*add vendor prefixes here*/
}
@-webkit-keyframes loading {
  0% {border-left-width:0px;border-right-width:300px;}
  100% {border-left-width:300px;border-right-width:0px;}
}
@keyframes loading {
  0% {border-left-width:0px;border-right-width:300px;}
  100% {border-left-width:300px;border-right-width:0px;}
}

然后使用meta refresh标记重新加载页面：

<meta http-equiv="refresh" content="10; url=http://example.com/">

---

我已经将加载时间设置为10秒。如果你想更改“加载时间”，你需要更改

动画
样式和meta标记。
是的，在每个间隔后增加div的宽度将使其像加载条一样工作。
你想推荐一个工具吗？