• 进度条样式


    <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>

  • 相关阅读:
    Python的一些小技巧
    Python连接sqlite3数据库
    闭包和toString方法的使用
    webpack(10) webpack扩展(插件. loader)
    webpack(9) 配置文件
    webpack(8) plugin
    webpack(7) 样式处理和图片处理之手写loader
    webpack(6) loader
    webpack(5)入口和出口
    webpack(4)编译过程分析
  • 原文地址:https://www.cnblogs.com/wangjinming/p/3657160.html
Copyright © 2020-2023  润新知