srcmini在Framework7中, 预加载器使用可缩放矢量图形制作, 并使用CSS进行动画处理。它使其易于调整大小。预载器有两种颜色：
在HTML中使用Preloader类
例
让我们以一个示例来演示Framework7中预加载器的用法。
<!DOCTYPE html<
<html<
<head<
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /<
<meta name = "apple-mobile-web-app-capable" content = "yes" /<
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" /<
<title<Panel Events</title<
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /<
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /<
</head<
<body<
<div class = "views"<
<div class = "view view-main"<
<div class = "pages"<
<div data-page = "home" class = "page navbar-fixed"<
<div class = "navbar"<
<div class = "navbar-inner"<
<div class = "left"< </div<
<div class = "center"<Framework7 Preloader</div<
<div class = "right"< </div<
</div<
</div<
<div class = "page-content"<
<div class = "content-block row"<
<div class = "col-25"<<span
class = "preloader"<</span<<br<Default Preloader</div<
<div class = "col-25 col-dark"<
<span class = "preloader preloader-white"<</span<<br<White Preloader</div<
<div class = "col-25"<
<span style = "width:42px; height:42px"
class = "preloader"<</span<<br<Big Preloader</div<
<div class = "col-25 col-dark"<<span
style = "width:42px; height:42px" class = "preloader
preloader-white"<</span<<br<White Preloader</div<
</div<
</div<
</div<
</div<
</div<
</div<
<style<.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style<
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"<</script<
<script<
var myApp = new Framework7();
</script<
</body<
</html<立即测试
评论前必须登录！
注册