• 进度条样式


    <head>
    <style>
    .loader-container {
      height: 6px;
      600px;
      position: absolute;
      top: 10%;
      left: 50%;
      margin-top: -3px;
      margin-left: -300px;
      background-color: transparent;
      /*background-image: -webkit-linear-gradient(left, #5bd8ff, #ff0000);
      background-image: -moz-linear-gradient(left, #5bd8ff, #ff0000);
      background-image: -o-linear-gradient(left, #5bd8ff, #ff0000);
      background-image: -ms-linear-gradient(left, #5bd8ff, #ff0000);
      background-image: linear-gradient(left, #5bd8ff, #ff0000);*/
      background-image: -webkit-linear-gradient(top, #000000, #212121);
      background-image: -moz-linear-gradient(top, #000000, #212121);
      background-image: -o-linear-gradient(top, #000000, #212121);
      background-image: -ms-linear-gradient(top, #000000, #212121);
      background-image: linear-gradient(top, #000000, #212121);
      box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.4);
      border-radius: 3px 0 0 3px;
    }
    .loader-container:after {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      1em;
      height: 1em;
      border-radius: 50%;
      margin-top: -0.5em;
      margin-right: -1em;
      background-image: -webkit-linear-gradient(top, #000000, #212121);
      background-image: -moz-linear-gradient(top, #000000, #212121);
      background-image: -o-linear-gradient(top, #000000, #212121);
      background-image: -ms-linear-gradient(top, #000000, #212121);
      background-image: linear-gradient(top, #000000, #212121);
    }
    .loader-container.done:after {
      background: Red;
    }
    .run .runner {
      content: "";
      position: absolute;
      right: 0;
      height: 100%;
      0%;
      background-color: transparent;
      background-image: -webkit-linear-gradient(top, #000000, #212121);
      background-image: -moz-linear-gradient(top, #000000, #212121);
      background-image: -o-linear-gradient(top, #000000, #212121);
      background-image: -ms-linear-gradient(top, #000000, #212121);
      background-image: linear-gradient(top, #000000, #212121);
      animation: loader 10s linear;
    }
    .meter {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 2em;
      margin-top: .3em;
      color: #ff0000;
      animation: meter 10s linear;
      text-shadow: 0 -1px 0 #333333;
    }
    .meter:after {
      content: "%";
    }
    </style>
    </head>
    <div id="wrapper" style="background-color: #222222;Height:200px;">
    <div class="loader-container">
      <div class="meter">0</div>
      <span class="runner"></span>
    </div>
    </div>

  • 相关阅读:
    防止网站被镜像,被iframe
    PHP实现图片批量压缩
    常规正则表达式
    git安装项目步骤
    Laravel创建自定义 Artisan 控制台命令实例教程
    git常规命令
    JS验证身份证号
    Lucene-索引库的维护
    Lucene-分词器
    Lucene-全文检索
  • 原文地址:https://www.cnblogs.com/wangjinming/p/3657160.html
Copyright © 2020-2023  润新知