'NFS Hot Pursuit Style Loader'

[Guest]

Loader на тип загрузки игры NFS Hot Pursuit.

Смотрится красиво, можно использовать за место логотипа.

Я же для теста прописал его в footer

Примерно вот так:

И так сам код: Вставляем где хотим видеть лоадер.

		<ul class="loader">
			<li>E</li>
			<li>T</li>
			<li>S</li>
			<li>2</li>
			<li>A</li>
			<li>T</li>
			<li>S</li>
                <li>M</li>
			<li>O</li>
			<li>D</li>
			<li>S</li>
			<li>.</li>
			<li>R</li>
			<li>U</li>
		</ul>

Это вставляем в custom.css

h1 {
	font-family: "palatino linotype", sans-serif;
	color: #0abcde;
	margin: 50px 0 50px 50px;
	}

	.loader li {
	background: #0abcde;
	margin-left: 1px;
	width: 20px;
	height: 30px;
	display: inline-block;
  opacity: 0;
	border-radius: 2px;
	box-shadow: 0px 0px 5px #0abcde;
	transform: skew(-25deg, 0deg) scale(0.1);
	animation: loader .8s ease-in-out infinite alternate;
	}

	@keyframes loader {
	  to {
	    transform: skew(-25deg, 0deg) scale(1);
      opacity: 1;
    }
  }

	.loader li:nth-child(2){
	  animation-delay:0.2s;
	}
	.loader li:nth-child(3){
	  animation-delay:0.4s;
	}
	.loader li:nth-child(4){
	  animation-delay:0.6s;
	}
	.loader li:nth-child(5){
	  animation-delay:0.8s;
	}
	.loader li:nth-child(6){
	  animation-delay: 1s;
	}
	.loader li:nth-child(7){
	  animation-delay: 1.2s;
	}
	.loader li:nth-child(8){
	  animation-delay:1.4s;
	}
	.loader li:nth-child(9){
	  animation-delay:1.6s;
	}
	.loader li:nth-child(10){
	  animation-delay:1.8s;
	}
	.loader li:nth-child(11){
	  animation-delay:2.0s;
	}
	.loader li:nth-child(12){
	  animation-delay: 2.2s;
	}
	.loader li:nth-child(13){
	  animation-delay: 2.4s;
	}
.loader li:nth-child(14){
	  animation-delay: 2.6s;
	}

И так, сколько букв вставлено к коде, столько мы дописываем в CSS.

Пример я добавил букву    

<li>E</li>

она первая в очереди, а в CSS я вставляю

    .loader li:nth-child(2){
      animation-delay:0.2s;
    }

когда вставляю второй код с другой буквой, то в коде CSS я пишу уже 3 и ставлю миллисекунды на 0.4

2 это номер буквы в коде.

0.2s это миллисекунды, через которое будет срабатывать появление буквы или эффекта.

как видите в коде CSS миллисекунды прибавляются на 0.2 мс

тем самым идет эффект перехода, на GIFке всё видно.

Или же можно в живую посмотреть у меня на сайте, в стиле Стандартный стиль.

[Guest]

Тоже делаем с помощью svg