Help to insert the animation into the "Show more" upload code (some gif or png don't know which is better)
and at the time of uploading, hide or not hide the phrase "Show more",
but without animation it is not clear how long to wait and whether the load is taking place at all.
Andrey Andrey
143 four 15
- Show a working example, not a piece of code, and you ask to do everything for you? - Mr_Epic
|
1 answer
Understanding the above piece of code is very difficult, I’ll give an abstract example of how such a loader works - it’s shown, you assign it in your context.
// Список постов (подгружаете через AJAX, вручную добавляете, неважно) let posts = [ 'А я новый пост', 'Свеж и горяч я', 'Это последний' ], spinner = null, loadText = null, countPosts = null, wrapper = null; function loadMore() { if (posts.length > 0) { // Если загружать есть что // Скрываем надпись и показываем анимацию loadText.style.display = 'none'; spinner.style.display = 'block'; // Поставил задержку (в реальности тут может быть ожидание AJAX, например), ибо иначе всё вставилось бы очень быстро setTimeout(function() { // Вставляем надпись и обновляем счётчик wrapper.insertAdjacentHTML('beforeEnd', `<div class='newPost'>${posts.shift()}</div>`); // Если больше нет записей, меняем надпись, иначе - счётчик. if(posts.length === 0) loadText.innerHTML = 'Hasta la vista, baby!'; else countPosts.innerHTML = posts.length; // Показываем запись и скрываем анимацию loadText.style.display = 'block'; spinner.style.display = 'none'; }, 2000); } } document.addEventListener('DOMContentLoaded', e => { // Ставим обработчик на кнопку "Подгрузить" document.querySelector('#loadMore').addEventListener('click', loadMore); spinner = document.querySelector('.cssload-square'); loadText = document.querySelector('#loadMore'); countPosts = document.querySelector('#countPosts'); wrapper = document.querySelector('#wrapper'); // Сразу выводим количество доступных для показа записей countPosts.innerHTML = posts.length; }); #loadMore { display: block; background: #eff0f1; font-size: 15px; padding: 15px; margin-bottom: 10px; cursor: pointer; } #wrapper div { margin-bottom: 3px; } .newPost { background: rgba(150, 150, 150, .2); } .cssload-square { display: none; } .cssload-square { margin: 8px 20px; width: 19px; height: 19px; transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); } .cssload-square-part { position: absolute; width: 19px; height: 19px; z-index: 1; animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; -o-animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; -ms-animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; -webkit-animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; -moz-animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .cssload-square-green { background: rgb(84, 250, 212); right: 0; bottom: 0; animation-direction: alternate-reverse; -o-animation-direction: alternate-reverse; -ms-animation-direction: alternate-reverse; -webkit-animation-direction: alternate-reverse; -moz-animation-direction: alternate-reverse; } .cssload-square-pink { background: rgb(233, 111, 146); left: 0; top: 0; } .cssload-square-blend { background: rgb(117, 81, 125); position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; animation: blend-anim 0.92s ease-in infinite; -o-animation: blend-anim 0.92s ease-in infinite; -ms-animation: blend-anim 0.92s ease-in infinite; -webkit-animation: blend-anim 0.92s ease-in infinite; -moz-animation: blend-anim 0.92s ease-in infinite; } @keyframes blend-anim { 0% { transform: scale(0.01, 0.01) rotateY(0); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 50% { transform: scale(1, 1) rotateY(0); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } 100% { transform: scale(0.01, 0.01) rotateY(0); } } @-o-keyframes blend-anim { 0% { -o-transform: scale(0.01, 0.01) rotateY(0); -o-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 50% { -o-transform: scale(1, 1) rotateY(0); -o-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } 100% { -o-transform: scale(0.01, 0.01) rotateY(0); } } @-ms-keyframes blend-anim { 0% { -ms-transform: scale(0.01, 0.01) rotateY(0); -ms-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 50% { -ms-transform: scale(1, 1) rotateY(0); -ms-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } 100% { -ms-transform: scale(0.01, 0.01) rotateY(0); } } @-webkit-keyframes blend-anim { 0% { -webkit-transform: scale(0.01, 0.01) rotateY(0); -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 50% { -webkit-transform: scale(1, 1) rotateY(0); -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } 100% { -webkit-transform: scale(0.01, 0.01) rotateY(0); } } @-moz-keyframes blend-anim { 0% { -moz-transform: scale(0.01, 0.01) rotateY(0); -moz-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 50% { -moz-transform: scale(1, 1) rotateY(0); -moz-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } 100% { -moz-transform: scale(0.01, 0.01) rotateY(0); } } @keyframes cssload-part-anim { 0% { transform: translate3d(-10px, -10px, 0); } 100% { transform: translate3d(10px, 10px, 0); } } @-o-keyframes cssload-part-anim { 0% { -o-transform: translate3d(-10px, -10px, 0); } 100% { -o-transform: translate3d(10px, 10px, 0); } } @-ms-keyframes cssload-part-anim { 0% { -ms-transform: translate3d(-10px, -10px, 0); } 100% { -ms-transform: translate3d(10px, 10px, 0); } } @-webkit-keyframes cssload-part-anim { 0% { -webkit-transform: translate3d(-10px, -10px, 0); } 100% { -webkit-transform: translate3d(10px, 10px, 0); } } @-moz-keyframes cssload-part-anim { 0% { -moz-transform: translate3d(-10px, -10px, 0); } 100% { -moz-transform: translate3d(10px, 10px, 0); } } <div> <span id='loadMore'>Подгрузить ещё записи (<span id='countPosts'>0</span>)</span> <div class="cssload-square"> <div class="cssload-square-part cssload-square-green"></div> <div class="cssload-square-part cssload-square-pink"></div> <div class="cssload-square-blend"></div> </div> </div> <div id='wrapper'> <div>Существующий текст</div> <div>Я тоже тут</div> </div> |