Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
8 стилей загрузки в виде текста на чистом CSS
Дата добавления: 18.04.2017 - 14:42
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 1.4k
Количество комментариев: 0
Размер файла: 12.5 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Интересное решение для реализации загрузок страниц. В данном материале предоставлены 8 видов. Выбирайте понравившийся вам и применяйте в своих проектах.
Для начала нам нужно указать общие стили для всех видов.
CSS
Теперь выбираем нужный вид. Смотрите ДЕМО.
Стиль № 1
HTML
CSS
Стиль № 2
HTML
CSS
Стиль № 3
HTML
CSS
Стиль № 4
HTML
CSS
Стиль № 5
HTML
CSS
Стиль № 6
HTML
CSS
Стиль № 7
HTML
CSS
Стиль № 8
HTML
CSS
Источник: http://art-ucoz.ru/
Для начала нам нужно указать общие стили для всех видов.
CSS
Код
/* loading */
.loading {
font-size: 84px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
text-align: center;
}
.loading span {
display: inline-block;
margin: 0 -.05em;
}
.loading {
font-size: 84px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
text-align: center;
}
.loading span {
display: inline-block;
margin: 0 -.05em;
}
Теперь выбираем нужный вид. Смотрите ДЕМО.
Стиль № 1
HTML
Код
<div class="loading loading01">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
CSS
Код
/* code #1 */
.loading01 span {
animation: loading01 1.4s infinite alternate;
}
.loading01 span:nth-child(1) {
animation-delay: 0s;
}
.loading01 span:nth-child(2) {
animation-delay: 0.1s;
}
.loading01 span:nth-child(3) {
animation-delay: 0.2s;
}
.loading01 span:nth-child(4) {
animation-delay: 0.3s;
}
.loading01 span:nth-child(5) {
animation-delay: 0.4s;
}
.loading01 span:nth-child(6) {
animation-delay: 0.5s;
}
.loading01 span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes loading01 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.loading01 span {
animation: loading01 1.4s infinite alternate;
}
.loading01 span:nth-child(1) {
animation-delay: 0s;
}
.loading01 span:nth-child(2) {
animation-delay: 0.1s;
}
.loading01 span:nth-child(3) {
animation-delay: 0.2s;
}
.loading01 span:nth-child(4) {
animation-delay: 0.3s;
}
.loading01 span:nth-child(5) {
animation-delay: 0.4s;
}
.loading01 span:nth-child(6) {
animation-delay: 0.5s;
}
.loading01 span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes loading01 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Стиль № 2
HTML
Код
<div class="loading loading02">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
CSS
Код
/* code #2 */
.loading02 span {
animation: loading02 1.2s infinite alternate;
}
.loading02 span:nth-child(2) {
animation-delay: 0.2s;
}
.loading02 span:nth-child(3) {
animation-delay: 0.4s;
}
.loading02 span:nth-child(4) {
animation-delay: 0.6s;
}
.loading02 span:nth-child(5) {
animation-delay: 0.8s;
}
.loading02 span:nth-child(6) {
animation-delay: 1s;
}
.loading02 span:nth-child(7) {
animation-delay: 1.2s;
}
@keyframes loading02 {
0% {
filter: blur(0);
opacity: 1;
}
100% {
filter: blur(5px);
opacity: .2;
}
}
.loading02 span {
animation: loading02 1.2s infinite alternate;
}
.loading02 span:nth-child(2) {
animation-delay: 0.2s;
}
.loading02 span:nth-child(3) {
animation-delay: 0.4s;
}
.loading02 span:nth-child(4) {
animation-delay: 0.6s;
}
.loading02 span:nth-child(5) {
animation-delay: 0.8s;
}
.loading02 span:nth-child(6) {
animation-delay: 1s;
}
.loading02 span:nth-child(7) {
animation-delay: 1.2s;
}
@keyframes loading02 {
0% {
filter: blur(0);
opacity: 1;
}
100% {
filter: blur(5px);
opacity: .2;
}
}
Стиль № 3
HTML
Код
<div class="loading loading03">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
CSS
Код
/* code #3 */
.loading03 span {
margin: 0 -.075em;
animation: loading03 .7s infinite alternate;
}
.loading03 span:nth-child(2) {
animation-delay: 0.1s;
}
.loading03 span:nth-child(3) {
animation-delay: 0.2s;
}
.loading03 span:nth-child(4) {
animation-delay: 0.3s;
}
.loading03 span:nth-child(5) {
animation-delay: 0.4s;
}
.loading03 span:nth-child(6) {
animation-delay: 0.5s;
}
.loading03 span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes loading03 {
0% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
.loading03 span {
margin: 0 -.075em;
animation: loading03 .7s infinite alternate;
}
.loading03 span:nth-child(2) {
animation-delay: 0.1s;
}
.loading03 span:nth-child(3) {
animation-delay: 0.2s;
}
.loading03 span:nth-child(4) {
animation-delay: 0.3s;
}
.loading03 span:nth-child(5) {
animation-delay: 0.4s;
}
.loading03 span:nth-child(6) {
animation-delay: 0.5s;
}
.loading03 span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes loading03 {
0% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
Стиль № 4
HTML
Код
<div class="loading loading04">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
CSS
Код
/* code #4 */
.loading04 span {
animation: loading04 .7s infinite;
}
.loading04 span:nth-child(2) {
animation-delay: 0.1s;
}
.loading04 span:nth-child(3) {
animation-delay: 0.2s;
}
.loading04 span:nth-child(4) {
animation-delay: 0.3s;
}
.loading04 span:nth-child(5) {
animation-delay: 0.4s;
}
.loading04 span:nth-child(6) {
animation-delay: 0.5s;
}
.loading04 span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes loading04 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(15px);
}
}
.loading04 span {
animation: loading04 .7s infinite;
}
.loading04 span:nth-child(2) {
animation-delay: 0.1s;
}
.loading04 span:nth-child(3) {
animation-delay: 0.2s;
}
.loading04 span:nth-child(4) {
animation-delay: 0.3s;
}
.loading04 span:nth-child(5) {
animation-delay: 0.4s;
}
.loading04 span:nth-child(6) {
animation-delay: 0.5s;
}
.loading04 span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes loading04 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(15px);
}
}
Стиль № 5
HTML
Код
<div class="loading loading05">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
CSS
Код
/* code #5 */
.loading05 {
perspective: 1000px;
}
.loading05 span {
transform-origin: 50% 50% -25px;
transform-style: preserve-3d;
animation: loading05 1.6s infinite;
}
.loading05 span:nth-child(2) {
animation-delay: 0.1s;
}
.loading05 span:nth-child(3) {
animation-delay: 0.2s;
}
.loading05 span:nth-child(4) {
animation-delay: 0.3s;
}
.loading05 span:nth-child(5) {
animation-delay: 0.4s;
}
.loading05 span:nth-child(6) {
animation-delay: 0.5s;
}
.loading05 span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes loading05 {
0% {
transform: rotateX(-360deg);
}
70% {
transform: rotateX(0);
}
}
.loading05 {
perspective: 1000px;
}
.loading05 span {
transform-origin: 50% 50% -25px;
transform-style: preserve-3d;
animation: loading05 1.6s infinite;
}
.loading05 span:nth-child(2) {
animation-delay: 0.1s;
}
.loading05 span:nth-child(3) {
animation-delay: 0.2s;
}
.loading05 span:nth-child(4) {
animation-delay: 0.3s;
}
.loading05 span:nth-child(5) {
animation-delay: 0.4s;
}
.loading05 span:nth-child(6) {
animation-delay: 0.5s;
}
.loading05 span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes loading05 {
0% {
transform: rotateX(-360deg);
}
70% {
transform: rotateX(0);
}
}
Стиль № 6
HTML
Код
<div class="loading loading06">
<span data-text="L">L</span>
<span data-text="O">O</span>
<span data-text="A">A</span>
<span data-text="D">D</span>
<span data-text="I">I</span>
<span data-text="N">N</span>
<span data-text="G">G</span>
</div>
<span data-text="L">L</span>
<span data-text="O">O</span>
<span data-text="A">A</span>
<span data-text="D">D</span>
<span data-text="I">I</span>
<span data-text="N">N</span>
<span data-text="G">G</span>
</div>
CSS
Код
/* code #6 */
.loading06 span {
position: relative;
color: rgba(0, 0, 0, 0.2);
}
.loading06 span::after {
position: absolute;
top: 0;
left: 0;
content: attr(data-text);
color: #fff;
opacity: 0;
transform: rotateY(-90deg);
animation: loading06 4s infinite;
}
.loading06 span:nth-child(2)::after {
animation-delay: 0.2s;
}
.loading06 span:nth-child(3)::after {
animation-delay: 0.4s;
}
.loading06 span:nth-child(4)::after {
animation-delay: 0.6s;
}
.loading06 span:nth-child(5)::after {
animation-delay: 0.8s;
}
.loading06 span:nth-child(6)::after {
animation-delay: 1s;
}
.loading06 span:nth-child(7)::after {
animation-delay: 1.2s;
}
@keyframes loading06 {
0%,
75%,
100% {
transform: rotateY(-90deg);
opacity: 0;
}
25%,
50% {
transform: rotateY(0);
opacity: 1;
}
}
.loading06 span {
position: relative;
color: rgba(0, 0, 0, 0.2);
}
.loading06 span::after {
position: absolute;
top: 0;
left: 0;
content: attr(data-text);
color: #fff;
opacity: 0;
transform: rotateY(-90deg);
animation: loading06 4s infinite;
}
.loading06 span:nth-child(2)::after {
animation-delay: 0.2s;
}
.loading06 span:nth-child(3)::after {
animation-delay: 0.4s;
}
.loading06 span:nth-child(4)::after {
animation-delay: 0.6s;
}
.loading06 span:nth-child(5)::after {
animation-delay: 0.8s;
}
.loading06 span:nth-child(6)::after {
animation-delay: 1s;
}
.loading06 span:nth-child(7)::after {
animation-delay: 1.2s;
}
@keyframes loading06 {
0%,
75%,
100% {
transform: rotateY(-90deg);
opacity: 0;
}
25%,
50% {
transform: rotateY(0);
opacity: 1;
}
}
Стиль № 7
HTML
Код
<div class="loading loading07">
<span data-text="L">L</span>
<span data-text="O">O</span>
<span data-text="A">A</span>
<span data-text="D">D</span>
<span data-text="I">I</span>
<span data-text="N">N</span>
<span data-text="G">G</span>
</div>
<span data-text="L">L</span>
<span data-text="O">O</span>
<span data-text="A">A</span>
<span data-text="D">D</span>
<span data-text="I">I</span>
<span data-text="N">N</span>
<span data-text="G">G</span>
</div>
CSS
Код
/* code #7 */
.loading07 span {
position: relative;
color: rgba(0, 0, 0, 0.2);
}
.loading07 span::after {
position: absolute;
top: 0;
left: 0;
content: attr(data-text);
color: #fff;
opacity: 0;
transform: scale(1.5);
animation: loading07 3s infinite;
}
.loading07 span:nth-child(2)::after {
animation-delay: 0.1s;
}
.loading07 span:nth-child(3)::after {
animation-delay: 0.2s;
}
.loading07 span:nth-child(4)::after {
animation-delay: 0.3s;
}
.loading07 span:nth-child(5)::after {
animation-delay: 0.4s;
}
.loading07 span:nth-child(6)::after {
animation-delay: 0.5s;
}
.loading07 span:nth-child(7)::after {
animation-delay: 0.6s;
}
@keyframes loading07 {
0%,
75%,
100% {
transform: scale(1.5);
opacity: 0;
}
25%,
50% {
transform: scale(1);
opacity: 1;
}
}
.loading07 span {
position: relative;
color: rgba(0, 0, 0, 0.2);
}
.loading07 span::after {
position: absolute;
top: 0;
left: 0;
content: attr(data-text);
color: #fff;
opacity: 0;
transform: scale(1.5);
animation: loading07 3s infinite;
}
.loading07 span:nth-child(2)::after {
animation-delay: 0.1s;
}
.loading07 span:nth-child(3)::after {
animation-delay: 0.2s;
}
.loading07 span:nth-child(4)::after {
animation-delay: 0.3s;
}
.loading07 span:nth-child(5)::after {
animation-delay: 0.4s;
}
.loading07 span:nth-child(6)::after {
animation-delay: 0.5s;
}
.loading07 span:nth-child(7)::after {
animation-delay: 0.6s;
}
@keyframes loading07 {
0%,
75%,
100% {
transform: scale(1.5);
opacity: 0;
}
25%,
50% {
transform: scale(1);
opacity: 1;
}
}
Стиль № 8
HTML
Код
<div class="loading loading08">
<span data-text="L">L</span>
<span data-text="O">O</span>
<span data-text="A">A</span>
<span data-text="D">D</span>
<span data-text="I">I</span>
<span data-text="N">N</span>
<span data-text="G">G</span>
</div>
<span data-text="L">L</span>
<span data-text="O">O</span>
<span data-text="A">A</span>
<span data-text="D">D</span>
<span data-text="I">I</span>
<span data-text="N">N</span>
<span data-text="G">G</span>
</div>
CSS
Код
/* code #8 */
.loading08 span {
position: relative;
color: rgba(0, 0, 0, 0.2);
animation: loading08-parent 5s infinite;
}
.loading08 span::after {
position: absolute;
top: 0;
left: 0;
content: attr(data-text);
color: #fff;
opacity: 0;
animation: loading08-child 5s infinite;
}
.loading08 span:nth-child(2)::after {
animation-delay: 0.2s;
}
.loading08 span:nth-child(3)::after {
animation-delay: 0.4s;
}
.loading08 span:nth-child(4)::after {
animation-delay: 0.6s;
}
.loading08 span:nth-child(5)::after {
animation-delay: 0.8s;
}
.loading08 span:nth-child(6)::after {
animation-delay: 1s;
}
.loading08 span:nth-child(7)::after {
animation-delay: 1.2s;
}
@keyframes loading08-parent {
0%,
35%,
100% {
color: rgba(0, 0, 0, 0.2);
}
60%,
80% {
color: #fff;
}
}
@keyframes loading08-child {
0% {
opacity: 1;
}
25%,
100% {
opacity: 0;
}
}
.loading08 span {
position: relative;
color: rgba(0, 0, 0, 0.2);
animation: loading08-parent 5s infinite;
}
.loading08 span::after {
position: absolute;
top: 0;
left: 0;
content: attr(data-text);
color: #fff;
opacity: 0;
animation: loading08-child 5s infinite;
}
.loading08 span:nth-child(2)::after {
animation-delay: 0.2s;
}
.loading08 span:nth-child(3)::after {
animation-delay: 0.4s;
}
.loading08 span:nth-child(4)::after {
animation-delay: 0.6s;
}
.loading08 span:nth-child(5)::after {
animation-delay: 0.8s;
}
.loading08 span:nth-child(6)::after {
animation-delay: 1s;
}
.loading08 span:nth-child(7)::after {
animation-delay: 1.2s;
}
@keyframes loading08-parent {
0%,
35%,
100% {
color: rgba(0, 0, 0, 0.2);
}
60%,
80% {
color: #fff;
}
}
@keyframes loading08-child {
0% {
opacity: 1;
}
25%,
100% {
opacity: 0;
}
}
Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: