我有这个很好的方式来显示CSS的动画加载图像。单击按钮时，按钮消失，加载图像应显示在页面中间。它工作得很好......但只有整个页面适合浏览器而不滚动。在大屏幕上试用此代码。你会发现它有效......
NEXT ...重新加载页面，使浏览器变小以便滚动，然后单击按钮。只有当页面滚动到顶部时，加载图像才会显示在页面中间（尝试它，你会看到我的意思，加载图像是最重要的。）我希望加载器始终在中间，或者......在点击按钮时至少处于中间位置，这样您就不必滚动查看它。
function go() {
mybutton.style.display='none';
fullwrap.style.opacity='0.2';
signalmid.style.display='block';
}#signalmid {display:none;
border: 5px solid #333;
border-radius: 50%;
height: 60px; width: 60px;
margin: -30px 0 0 -30px;
opacity:0; position:absolute; top:50%; left:50%;
animation: pulsatemid 1s ease-out;
animation-iteration-count: infinite;}
@keyframes pulsatemid {
0% {transform: scale(.1); opacity: 0.0;} 50% {opacity: 1;} 100% {transform: scale(1.2);opacity: 0;}
}
#mybutton {background:#ddd;padding:10px;width:200px;cursor:pointer}<div id='fullwrap'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At volutpat diam ut venenatis tellus. Odio euismod lacinia at quis risus sed. Ut lectus arcu bibendum at varius vel pharetra. Faucibus purus in massa tempor nec feugiat nisl pretium fusce. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Morbi leo urna molestie at elementum eu facilisis. Congue nisi vitae suscipit tellus mauris a. Facilisis mauris sit amet massa vitae tortor condimentum. Sodales neque sodales ut etiam sit amet nisl purus in. Posuere ac ut consequat semper viverra nam libero justo laoreet. Sed turpis tincidunt id aliquet risus feugiat in ante. Sit amet mattis vulputate enim. Sed euismod nisi porta lorem. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Ornare suspendisse sed nisi lacus. Volutpat sed cras ornare arcu dui vivamus.<br><br>
Pulvinar elementum integer enim neque. Quis ipsum suspendisse ultrices gravida dictum. Tortor at risus viverra adipiscing. Mauris nunc congue nisi vitae suscipit tellus mauris. Amet luctus venenatis lectus magna. Sit amet mattis vulputate enim. Ipsum suspendisse ultrices gravida dictum. Massa vitae tortor condimentum lacinia quis vel eros donec. Adipiscing bibendum est ultricies integer quis auctor elit. Orci eu lobortis elementum nibh tellus molestie nunc. Morbi non arcu risus quis varius. Quisque id diam vel quam. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Nulla aliquet porttitor lacus luctus accumsan tortor. Cras semper auctor neque vitae tempus quam pellentesque. Enim diam vulputate ut pharetra sit amet aliquam. Sit amet porttitor eget dolor morbi non arcu risus quis. Senectus et netus et malesuada fames. Duis at consectetur lorem donec massa sapien. Suspendisse sed nisi lacus sed viverra tellus in.<br><br>
In eu mi bibendum neque egestas congue. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Aliquet eget sit amet tellus cras adipiscing. Etiam non quam lacus suspendisse faucibus. Sit amet volutpat consequat mauris nunc congue nisi. Malesuada pellentesque elit eget gravida cum. Ultrices neque ornare aenean euismod elementum. Convallis tellus id interdum velit laoreet id. Nibh ipsum consequat nisl vel. Tellus orci ac auctor augue mauris augue neque gravida. Mi eget mauris pharetra et ultrices neque ornare. Nunc eget lorem dolor sed viverra ipsum nunc aliquet. Risus in hendrerit gravida rutrum quisque non. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Quam elementum pulvinar etiam non quam. Cras ornare arcu dui vivamus arcu felis. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Pharetra convallis posuere morbi leo urna molestie.<br><br>
Elit sed vulputate mi sit amet. Dictum non consectetur a erat nam at lectus urna duis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Mi proin sed libero enim sed faucibus turpis. Morbi leo urna molestie at elementum eu facilisis. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Accumsan in nisl nisi scelerisque. Vestibulum sed arcu non odio. Purus in massa tempor nec. Eget nulla facilisi etiam dignissim. Tortor id aliquet lectus proin. Elit at imperdiet dui accumsan sit amet nulla facilisi. Augue neque gravida in fermentum et sollicitudin. Vestibulum lorem sed risus ultricies tristique nulla aliquet.<br><br>
<button id='mybutton' onclick="go()">MY BUTTON</button>
</div>
<div id='signalmid'></div>只需使用position: fixed而不是absolute。
function go() {
mybutton.style.display='none';
fullwrap.style.opacity='0.2';
signalmid.style.display='block';
}#signalmid {display:none;
border: 5px solid #333;
border-radius: 50%;
height: 60px; width: 60px;
margin: -30px 0 0 -30px;
opacity:0; position:fixed; top:50%; left:50%;
animation: pulsatemid 1s ease-out;
animation-iteration-count: infinite;}
@keyframes pulsatemid {
0% {transform: scale(.1); opacity: 0.0;} 50% {opacity: 1;} 100% {transform: scale(1.2);opacity: 0;}
}
#mybutton {background:#ddd;padding:10px;width:200px;cursor:pointer}<div id='fullwrap'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At volutpat diam ut venenatis tellus. Odio euismod lacinia at quis risus sed. Ut lectus arcu bibendum at varius vel pharetra. Faucibus purus in massa tempor nec feugiat nisl pretium fusce. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Morbi leo urna molestie at elementum eu facilisis. Congue nisi vitae suscipit tellus mauris a. Facilisis mauris sit amet massa vitae tortor condimentum. Sodales neque sodales ut etiam sit amet nisl purus in. Posuere ac ut consequat semper viverra nam libero justo laoreet. Sed turpis tincidunt id aliquet risus feugiat in ante. Sit amet mattis vulputate enim. Sed euismod nisi porta lorem. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Ornare suspendisse sed nisi lacus. Volutpat sed cras ornare arcu dui vivamus.<br><br>
Pulvinar elementum integer enim neque. Quis ipsum suspendisse ultrices gravida dictum. Tortor at risus viverra adipiscing. Mauris nunc congue nisi vitae suscipit tellus mauris. Amet luctus venenatis lectus magna. Sit amet mattis vulputate enim. Ipsum suspendisse ultrices gravida dictum. Massa vitae tortor condimentum lacinia quis vel eros donec. Adipiscing bibendum est ultricies integer quis auctor elit. Orci eu lobortis elementum nibh tellus molestie nunc. Morbi non arcu risus quis varius. Quisque id diam vel quam. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Nulla aliquet porttitor lacus luctus accumsan tortor. Cras semper auctor neque vitae tempus quam pellentesque. Enim diam vulputate ut pharetra sit amet aliquam. Sit amet porttitor eget dolor morbi non arcu risus quis. Senectus et netus et malesuada fames. Duis at consectetur lorem donec massa sapien. Suspendisse sed nisi lacus sed viverra tellus in.<br><br>
In eu mi bibendum neque egestas congue. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Aliquet eget sit amet tellus cras adipiscing. Etiam non quam lacus suspendisse faucibus. Sit amet volutpat consequat mauris nunc congue nisi. Malesuada pellentesque elit eget gravida cum. Ultrices neque ornare aenean euismod elementum. Convallis tellus id interdum velit laoreet id. Nibh ipsum consequat nisl vel. Tellus orci ac auctor augue mauris augue neque gravida. Mi eget mauris pharetra et ultrices neque ornare. Nunc eget lorem dolor sed viverra ipsum nunc aliquet. Risus in hendrerit gravida rutrum quisque non. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Quam elementum pulvinar etiam non quam. Cras ornare arcu dui vivamus arcu felis. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Pharetra convallis posuere morbi leo urna molestie.<br><br>
Elit sed vulputate mi sit amet. Dictum non consectetur a erat nam at lectus urna duis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Mi proin sed libero enim sed faucibus turpis. Morbi leo urna molestie at elementum eu facilisis. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Accumsan in nisl nisi scelerisque. Vestibulum sed arcu non odio. Purus in massa tempor nec. Eget nulla facilisi etiam dignissim. Tortor id aliquet lectus proin. Elit at imperdiet dui accumsan sit amet nulla facilisi. Augue neque gravida in fermentum et sollicitudin. Vestibulum lorem sed risus ultricies tristique nulla aliquet.<br><br>
<button id='mybutton' onclick="go()">MY BUTTON</button>
</div>
<div id='signalmid'></div>