Форма входа

    Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Хаки / Дополнения
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина 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
    8 стилей загрузки в виде текста на чистом CSS
    БЕСПЛАТНО
    Демонстрация
    рейтинг 0.0
    /
    голосов 0
    Интересное решение для реализации загрузок страниц. В данном материале предоставлены 8 видов. Выбирайте понравившийся вам и применяйте в своих проектах.

    Для начала нам нужно указать общие стили для всех видов.
    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;
      }


    Теперь выбираем нужный вид. Смотрите ДЕМО.

    Стиль № 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>


    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;
      }
      }


    Стиль № 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>


    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;
      }
      }


    Стиль № 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>


    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);
      }
      }


    Стиль № 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>


    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);
      }
      }


    Стиль № 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>


    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);
      }
      }


    Стиль № 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>


    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;
      }
      }


    Стиль № 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>


    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;
      }
      }


    Стиль № 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>


    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;
      }
      }


    Источник: http://art-ucoz.ru/
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: