mobile-pull-to-refresh
Version:
84 lines (74 loc) • 2.55 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link href="../dist/styles/material2/style.css" rel="stylesheet">
<script src="../dist/styles/material2/animates.js"></script>
<script src="../dist/pullToRefresh.js"></script>
<meta name="theme-color" content="#039be5">
<title>Pull to refresh - Material 2</title>
<style>
body {
margin: 0;
margin-top: 56px;
font-family: sans-serif;
background: #fafafa;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 56px;
line-height: 56px;
font-size: 18px;
color: #fff;
padding: 0 16px;
background: #039be5;
z-index: 9999;
box-shadow: 0 2px 5px rgba(0,0,0,.26);
}
main {
height: 1000px;
background: #fff;
padding: 1em;
}
h1 {
font-size: 18px;
text-align: center;
padding-top: 8em;
}
</style>
</head>
<body>
<header>Header</header>
<div class="container pull-to-refresh-material2">
<div class="pull-to-refresh-material2__control">
<svg class="pull-to-refresh-material2__icon" fill="#4285f4" width="24" height="24" viewBox="0 0 24 24">
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
<svg class="pull-to-refresh-material2__spinner" width="24" height="24" viewBox="25 25 50 50">
<circle class="pull-to-refresh-material2__path" cx="50" cy="50" r="20" fill="none" stroke="#4285f4" stroke-width="4" stroke-miterlimit="10" />
</svg>
</div>
<main>
<h1>Pull down to refresh</h1>
<p>Pulling up should shrink the address bar in Chrome mobile and Safari mobile</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p>
</main>
</div>
<script>
pullToRefresh({
container: document.querySelector('.container'),
animates: ptrAnimatesMaterial2,
refresh() {
return new Promise(resolve => {
setTimeout(resolve, 2000)
})
}
})
</script>
</body>
</html>