Подборка круглых прелоадеров (Спиннеров) на CSS3

Разместил: Apocalypse
Опубликовано: 6 июня 2016

Очень оригинальные прелоадеры, которые реагируют на наведение курсора мышки Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); border-top-color: rgba(0, 0, 0, 0.5); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); border-top-color: rgba(0, 0, 255, 0.5); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); border-top-color: rgba(0, 0, 0, 0.5); } } @keyframes rotate2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); border-top-color: rgba(0, 0, 0, 0.5); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); border-top-color: rgba(0, 0, 255, 0.5); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); border-top-color: rgba(0, 0, 0, 0.5); } } div[class^="loader"] * { box-sizing: border-box; } .loader1, .loader2, .loader3, .loader4 { position: relative; margin: 75px auto; width: 150px; height: 150px; display: block; overflow: hidden; } .loader1 div, .loader2 div, .loader3 div, .loader4 div { height: 100%; } /* loader 1 */ .loader1, .loader1 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-top-color: rgba(0, 0, 0, 0.5); border-bottom-color: rgba(0, 0, 255, 0.5); } /*loader 2 */ .loader2, .loader2 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-top-color: rgba(0, 0, 255, 0.5); border-left-color: rgba(0, 0, 0, 0.5); border-right-color: rgba(0, 0, 0, 0.5); } /*loader 3 */ .loader3, .loader3 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-top-color: rgba(0, 0, 0, 0.5); border-left-color: rgba(0, 0, 255, 0.5); -webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88); animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88); -webkit-animation-duration: 3s; animation-duration: 3s; } /* loader 4 */ .loader4, .loader4 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-radius: 50%; padding: 4px; -webkit-animation: rotate2 4s infinite linear; animation: rotate2 4s infinite linear; } div[class^="loader"]:hover, div[class^="loader"] div:hover { -webkit-animation-play-state: paused; animation-play-state: paused; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152

@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }   @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }   @-webkit-keyframes rotate2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); border-top-color: rgba(0, 0, 0, 0.5); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); border-top-color: rgba(0, 0, 255, 0.5); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); border-top-color: rgba(0, 0, 0, 0.5); } }   @keyframes rotate2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); border-top-color: rgba(0, 0, 0, 0.5); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); border-top-color: rgba(0, 0, 255, 0.5); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); border-top-color: rgba(0, 0, 0, 0.5); } }   div[class^="loader"] * { box-sizing: border-box; }   .loader1, .loader2, .loader3, .loader4 { position: relative; margin: 75px auto; width: 150px; height: 150px; display: block; overflow: hidden; }   .loader1 div, .loader2 div, .loader3 div, .loader4 div { height: 100%; }     /* loader 1 */ .loader1, .loader1 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-top-color: rgba(0, 0, 0, 0.5); border-bottom-color: rgba(0, 0, 255, 0.5); }     /*loader 2  */ .loader2, .loader2 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-top-color: rgba(0, 0, 255, 0.5); border-left-color: rgba(0, 0, 0, 0.5); border-right-color: rgba(0, 0, 0, 0.5); }     /*loader 3  */ .loader3, .loader3 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-top-color: rgba(0, 0, 0, 0.5); border-left-color: rgba(0, 0, 255, 0.5); -webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88); animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88); -webkit-animation-duration: 3s; animation-duration: 3s; }     /* loader 4 */ .loader4, .loader4 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-radius: 50%; padding: 4px; -webkit-animation: rotate2 4s infinite linear; animation: rotate2 4s infinite linear; }   div[class^="loader"]:hover, div[class^="loader"] div:hover { -webkit-animation-play-state: paused; animation-play-state: paused; }

  2#: HTML код прелоадеров:

<div class='loader1'> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> <div class='loader2'> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> <div class='loader3'> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> <div class='loader4'> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

<div class='loader1'> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div>   <div class='loader2'> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div>   <div class='loader3'> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div>   <div class='loader4'> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Автор публикации

не в сети 1 неделя

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: CSS3PreloaderSpinnerКругПодборкаПрелоадерСпиннер

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Галерея изображений с 3D эффектом на CSS3
• Предыдущая публикация Подборка прелоадеров (Спиннеров) на CSS3

Вам может также понравиться...

• Анимированные новогодние гирлянды на CSS3

  Разместил: Apocalypse 2 ноября 2017

  - Apocalypse 2 ноября 2017 Last modified 2 сентября 2018

• Стильный MP3 преер на HTML5, CSS3 и jQuery

  Разместил: Apocalypse 1 октября 2015

  - Apocalypse 1 октября 2015

• Адаптивное горизонтальное многоуровневое меню на CSS3

  Разместил: Apocalypse 15 мая 2016

  - Apocalypse 15 мая 2016

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии