In Framework7, Preloaders are made with Scalable Vector Graphics and animated with CSS. It makes it easily resizable. Preloader is available in two colors:
Use Preloader class in your HTML
Example
Let’s take an example to demonstrate the use of preloaders in 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<
Next Topic:-Click Here
Pingback: slot88 login