Создать круглый загрузчик с помощью CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Создать круглый загрузчик с помощью CSS (Создаем пончик для для индикации загрузки контента)

Создать круглый загрузчик с помощью CSS

Kosten

Воскресенье, 21 Апреля 2019, 01:56 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Создает диаграмму загрузчика, который можно использовать для индикации загрузки контента. А также такой стиль можно заметить на перезагрузки страниц, то больше всего такой стиль встречается на разных функциях, где нужно после включение или нажатие клика, какое то время ожидать, то такая диаграмма просто скрасит это время.

Используйте полупрозрачный border для всего элемента, кроме одной стороны, которая будет служить индикатором загрузки, где также задействован animation для поворота элемента.

HTML

Код

CSS

Код

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.conigub-ationutub {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

На этом вся установка.

Поддержка браузера 97,4%

Демонстрация

Прикрепления: 2860507.png (1.4 Kb)

Страна: (RU)

Kosten

Понедельник, 22 Апреля 2019, 03:13 | Сообщение 2

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Коллекция чистых CSS-загрузчиков

Вы можете найти больше индикаторов загрузки на основе и CSS, где переходим по ссылке на страницу и там будут загрузчики. Понравившийся вид, то делаем клик, где появится окно с данными под установку.

Прикрепления: 3397942.png (53.7 Kb)

Страна: (RU)

Kosten

Понедельник, 22 Апреля 2019, 03:17 | Сообщение 3

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Спиннеры и загрузчики страниц Pure CSS

Просто еще один CSS, загружающий только спиннеры и загрузчики страниц.

Прикрепления: 4900172.png (39.3 Kb)

Страна: (RU)

Kosten

Понедельник, 22 Апреля 2019, 04:13 | Сообщение 4

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Загрузчики - это утилиты на основе узлов, созданные для веб-пакетов, которые помогают веб-пакетам компилировать или преобразовывать ресурсы определенного типа, которые могут быть объединены в модуль javascript.

CSS Loader

HTML

Код

CSS

Код

.ouro {
    position: relative;
    display:inline-block;
    height: 46px;
    width: 46px;
    margin: 1em;
    border-radius: 50%;
    background: none repeat scroll 0 0 #DDDDDD;
    overflow:hidden;
    box-shadow: 0 0 10px rgba(0,0,0,.1) inset, 0 0 25px rgba(0,0,255,0.075);
}

.ouro:after {
    content: "";
    position: absolute;
    top: 9px; left: 9px;
    display: block;
    height: 28px; width: 28px;
    background: none repeat scroll 0 0 #F2F2F2;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.ouro > span {
    position: absolute;
    height: 100%; width: 50%;
    overflow: hidden;
}
.left  { left:0   }
.right { left:50% }

.anim {
    position: absolute;
    left: 100%; top: 0;
    height: 100%; width: 100%;
    border-radius: 999px;
    background: none repeat scroll 0 0 #508EC3;
    opacity: 0.8;
    -webkit-animation: ui-spinner-rotate-left 3s infinite;
    animation: ui-spinner-rotate-left 3s infinite;
    -webkit-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0;
}
.left .anim {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.right .anim {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    left: -100%;
    -webkit-transform-origin: 100% 50% 0;
    transform-origin: 100% 50% 0;
}

/* v2 */
.ouro2 .anim {
   -webkit-animation-delay:0;
   animation-delay:0;
}
.ouro2 .right .anim{
   -webkit-animation-delay: 1.5s;
   animation-delay: 1.5s;
}

/* v3 */
.ouro3 .anim {
   -webkit-animation-delay: 0s;
   -webkit-animation-duration:3s;
   -webkit-animation-timing-function: linear;
   animation-delay: 0s;
   animation-duration:3s;
   animation-timing-function: linear;
}
.ouro3 .right .anim{
   -webkit-animation-name: ui-spinner-rotate-right;
   -webkit-animation-delay:0;
   -webkit-animation-delay: 1.5s;
   animation-name: ui-spinner-rotate-right;
   animation-delay:0;
   animation-delay: 1.5s;
}

/* round variation */
.round .ouro:after {display:none }

/* double variation */
.double .ouro:after {
  height: 13px; width: 13px;
  left: 7px; top: 7px;
  border: 10px solid #ddd;
  background: transparent;
  box-shadow: none;
}

@keyframes ui-spinner-rotate-right{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(180deg)}
  50%{transform:rotate(180deg)}
  75%{transform:rotate(360deg)}
  100%{transform:rotate(360deg)}
}
@keyframes ui-spinner-rotate-left{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(0deg)}
  50%{transform:rotate(180deg)}
  75%{transform:rotate(180deg)}
  100%{transform:rotate(360deg)}
}

@-webkit-keyframes ui-spinner-rotate-right{
  0%{-webkit-transform:rotate(0deg)}
  25%{-webkit-transform:rotate(180deg)}
  50%{-webkit-transform:rotate(180deg)}
  75%{-webkit-transform:rotate(360deg)}
  100%{-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes ui-spinner-rotate-left{
  0%{-webkit-transform:rotate(0deg)}
  25%{-webkit-transform:rotate(0deg)}
  50%{-webkit-transform:rotate(180deg)}
  75%{-webkit-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg)}
}

/*
* Some bugs with Chrome (Android), Safari and Opera, I'll try to see how http://atomeye.com/projects/sass-css-spinner.html made his code.
*/

/* presentation styles */
html {height: 100%}
body { text-align:center; background: radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; background: -webkit-radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; height: 100%; display:table; width:100%}
.block {display: table-cell; vertical-align:middle}
h1, a { margin-top: 1em; font-family: "Open Sans Light", "Open Sans", "Segoe UI", Helvetica, Arial; color: #888; font-weight: lighter;}
.info {margin-top: 25px}
.info a {font-size: 12px; color: #999}
.info br + a {text-decoration:none}

css-loader - это модуль npm, который поможет веб-пакетам собирать CSS из всех CSS-файлов, на которые есть ссылки в вашем приложении, и помещать их в строку.

Демонстрация

Прикрепления: 4650252.png (31.4 Kb)

Страна: (RU)

Создать круглый загрузчик с помощью CSS (Создаем пончик для для индикации загрузки контента)

Страница 1 из 1
1