BLOGTOP

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » BLOGTOP » Уголок wap мастера » CSS/HTML » Узнайте, как создать иконку загрузки страницы с помощью чистого CSS

Узнайте, как создать иконку загрузки страницы с помощью чистого CSS

Страница: 1
Ответить

Сообщений 1 страница 2 из 2

1

  • Автор: МАЧОнаДАЧЕ
  • Владелец "BT"
  • МАЧОнаДАЧЕ
  • Откуда: Новокузнецк
  • Зарегистрирован: 2022-03-17
  • Приглашений: 0
  • Сообщений: 786
  • Уважение: [+56/-1]
  • Позитив: [+34/-3]
  • Пол: Мужской
  • Возраст: 41 [1983-02-26]
  • Провел на форуме:
    17 дней 19 часов
  • Голосовые уведомления: 1
  • https://dl.dropboxusercontent.com/s/6xj5hs016td5dci/pelevin-otryvok.mp3

[html]
<div class="loader"></div>
<style>
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}</style>[/html]

Пример как работает
border свойство определяет размер границы и цвет границы загрузчика. border-radius свойство преобразует загрузчик в окружность.

Синяя вещь, которая вращается вокруг внутри границы, указывается с помощью border-top Свойства. Вы также можете включить border-bottom border-left и/или border-right Если вы хотите больше "Счетчики" (см. пример ниже).

Размер загрузчика указан с помощью width height свойств and.

Наконец, мы добавляем, animation что делает синие вещи спина навсегда с 2 секунды скорость анимации.

Примечание: Вы должны также включить-WebKit-префикс для браузеров, которые не поддерживают анимацию и преобразования свойств. Нажмите на пример, чтобы увидеть, как это сделать.

Шаг 1) добавить HTML:

Код:
<div class="loader"></div>

Шаг 2) добавить CSS:

Код:
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

[html]
<div class="loader"></div>

<style>
.loader {
border-top: 16px solid blue;
border-right: 16px solid green;
border-bottom: 16px solid red;
border-left: 16px solid pink;
border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);
}</style>[/html]
И такой вариант:

Код:
<div class="loader"></div>


.loader {
 border-top: 16px solid blue;
 border-right: 16px solid green;
 border-bottom: 16px solid red;
 border-left: 16px solid pink;
border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему

0

2

  • Автор: МАЧОнаДАЧЕ
  • Владелец "BT"
  • МАЧОнаДАЧЕ
  • Откуда: Новокузнецк
  • Зарегистрирован: 2022-03-17
  • Приглашений: 0
  • Сообщений: 786
  • Уважение: [+56/-1]
  • Позитив: [+34/-3]
  • Пол: Мужской
  • Возраст: 41 [1983-02-26]
  • Провел на форуме:
    17 дней 19 часов
  • Голосовые уведомления: 1
  • https://dl.dropboxusercontent.com/s/6xj5hs016td5dci/pelevin-otryvok.mp3

Или загрузчик целой страницы но уже со скриптом:

[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">
  <h2>Tada!</h2>
  <p>Some text in my newly loaded page..</p>
</div>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}
</script>

</body>
</html>
[/html]

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">
  <h2>Tada!</h2>
  <p>Some text in my newly loaded page..</p>
</div>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}
</script>

</body>
</html>
Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему

0

Ответить
Страница: 1

Вы здесь » BLOGTOP » Уголок wap мастера » CSS/HTML » Узнайте, как создать иконку загрузки страницы с помощью чистого CSS