vue+bootstrap实现一个页面加载进度条过渡动画效果代码-html代码-BFW代码库

vue+bootstrap实现一个页面加载进度条过渡动画效果代码

代码语言：html

所属分类：进度条

代码描述：vue+bootstrap实现一个页面加载进度条过渡动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>

    .preloader {
      width: 100%;
      height: 100vh;
      background: #3498db;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      font-family: 'Raleway', sans-serif;
      position: relative;
    }
    .preloader__status {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .preloader__status-text {
      font-size: 40px;
      font-family: 'Raleway', sans-serif;
      margin-bottom: 20px;
    }
    .preloader__status-loader {
      width: 100%;
      height: 3px;
    }
    .preloader__status-bar {
      background: white;
      height: 100%;
    }
    .frontpage {
      height: 100vh;
      background: #34495e;
    }
    .frontpage__title {
      color: white;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="preloader">
        <div class="preloader__status">
            <div status class="preloader__status-text">I'm {{loaded}} % done!</div>
            <div class="preloader__status-loader">
                <div loader :style="loadStyle" class="preloader__status-bar"></div>
            </div>
        </div>
    </div>
    <div class="frontpage container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="frontpage__title">Nice to meet you, i'm a title!</h1>
            </div>
        </div>
    </div>
    <!-.........完整代码请登录后点击上方下载按钮下载查看