Главная » Языки программирования

Loading animation with css

Содержание
  1. Creating a CSS Animated Loading Card
  2. 60 inspiring Loading Animations (CSS and JavaScript)
  3. #1 Dump Truck Loading Animation
  4. #2 Square in a circle – Loading Animation
  5. #3 Rainbow Loader
  6. #4 CSS Text filling with water
  7. #5 Single Element CSS-Only Absolute Center Overlay Spinner
  8. #6 Material Design Spinner
  9. #7 Loading
  10. #8 Cog loading animation
  11. #9 Cube loading animation
  12. #10 CSS loading animation 12
  13. #11 Loading Animation
  14. #12 Pacman loading animation in one div
  15. #13 Loading Animation CSS
  16. #14 CSS Dash Loader
  17. #15 Compose loading animation
  18. #16 CSS Loading Animation
  19. #17 Only CSS Loader – Wizard
  20. #18 Random geometric shapes loading animation
  21. #19 Canvas loading animation
  22. #20 XBox SmartGlass Loading Animation
  23. #21 Loading Animation MySensors
  24. #22 CSS Pancake Loader
  25. #23 Loading Animation
  26. #24 Rotate / Pulse Loading Animation
  27. #25 CSS Loading Animation
  28. #26 Authentic Weather Loader
  29. #27 Loading Animation with Morphing SVG
  30. #28 CSS open store animation
  31. #29 CSS Loading Animation
  32. #30 Cat Loader
  33. #31 Button Loading Animation
  34. #32 Floating Loading Animation
  35. #33 Organic Button
  36. #34 Switch loading animation
  37. #35 Download progress animation
  38. #36 CSS3 Loading animations
  39. #37 CSS3 Loader & Spinners
  40. #38 Download Button Animation
  41. #39 Cat loader
  42. #40 Loading
  43. #41 Glitch Loading Indicator
  44. #42 Colored Loader
  45. #43 Interactive Skate Loading
  46. #44 CSS Loading Animations
  47. #45 Pikachu Loading Page
  48. #46 Spinners using Font Icons
  49. #47 TRON Spinner
  50. #48 SpinKit
  51. #49 Loader
  52. #50 CSS3 Loading Spinner
  53. #51 Loading animation by Kayleigh
  54. #52 Loading animation by Mohamed
  55. #53 HTML ve CSS ile Loading Animation | 10
  56. #54 HTML ve CSS ile Loading Animation | 7
  57. #55 HTML ve CSS ile Loading Animation | 8
  58. #56 HTML ve CSS ile Loading Animation Tasarlama | 2
  59. #57 HTML ve CSS ile Loading Animation | 5
  60. #58 HTML ve CSS ile Loading Animation | 4
  61. #59 Flight Loading Animation
  62. #60 Nvidia Loading Animation
  63. How to add the JS & CSS loading animation to your website
  64. Conclusion
  65. 19 CSS спиннеров анимации загрузки
  66. TERMINAL SPINNER
  67. CSS3 ANIMATIONS SPINNERS
  68. SUGARCUBE SPINNER
  69. CSS SPINNERS
  70. SPINNER
  71. CSS AND SVG SPINNER
  72. POLYGON SPINNER
  73. 8 BIT SPINNER
  74. CSS LOADING ANIMATION
  75. SIMPLE REPEATING SPINNER
  76. CSS3 LOADING SPINNER
  77. PURE CSS SPINNER
  78. SPINNER
  79. LOADING SPINNER
  80. RAINBOW SPINNER
  81. SIMPLE CSS-ONLY LOADING SPINNER
  82. DIGITAL SPINNER
  83. CSS SPINNER ANIMATION
  84. SPINNER
Читайте также:  Discussion forums in php

Creating a CSS Animated Loading Card

Now we add a loading animation. This will be a CSS animation @keyframes that will move the background to give it a shining effect.

Here is the CSS animation: 

@keyframes shine  to  background-position-x: -200%; > >

Here is the is-loading class that will add the backgrounds to the image, header, and paragraph. 

.card.is-loading  .image, h2, p  background: #eee; background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%); border-radius: 5px; background-size: 200% 100%; animation: 1.5s shine linear infinite; > .image  height: 200px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; > h2  height: 30px; > p  height: 70px; > >

The important line here is the animation line: 

animation: 1.5s shine linear infinite;

We are animating the background infinitely so that the gradient keeps moving across the element.

Источник

60 inspiring Loading Animations (CSS and JavaScript)

Looking for creative and inspiring CSS loading animations to bridge website wait times? Our selection of the most innovative CSS spinners is the perfect solution. Discover how these loading animations can enhance your web applications and keep your users engaged with seamless loading experiences.

Sometimes it takes a few seconds for a complex website or application to load. So that your visitor knows that something is happening, you should definitely include a loading animation – this is also quite simple, as I will demonstrate at the end of the post with a short video.

If you like a loading animation, you can simply copy&paste 🙂

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Dump Truck Loading Animation

Author: Jon Kantner;
Coded in: HTML, CSS (SCSS), JS;

#2 Square in a circle – Loading Animation

Author: Ray;
Coded in: HTML, CSS (SCSS);

#3 Rainbow Loader

Author: Jack Rugile;
Coded in: HTML, CSS;

#4 CSS Text filling with water

Author: Lucas Bebber;
Coded in: HTML, CSS (SCSS);

#5 Single Element CSS-Only Absolute Center Overlay Spinner

Author: MattIn4D;
Coded in: HTML, CSS;

#6 Material Design Spinner

Author: Fran Pérez;
Coded in: HTML, CSS (SCSS);

#7 Loading

See the Pen Loading by dissimulate (@dissimulate) on CodePen.

Author: dissimulate;
Coded in: HTML, CSS;

#8 Cog loading animation

Author: Jamie Coulter;
Coded in: HTML (Haml), CSS (SCSS);

#9 Cube loading animation

Author: Paul Grant;
Coded in: HTML, CSS (SCSS);

#10 CSS loading animation 12

Author: Martin van Driel;
Coded in: HTML, CSS;

#11 Loading Animation

Earn money with your website or blog

Author: Ioic;
Coded in: HTML, CSS (SCSS);

#12 Pacman loading animation in one div

Author: Iddar Olivares;
Coded in: HTML, CSS (Less);

#13 Loading Animation CSS

Author: Tatsuya Azegami;
Coded in: HTML, CSS (SCSS);

#14 CSS Dash Loader

See the Pen CSS Dash Loader by Cassidy Williams (@cassidoo) on CodePen.

Author: Cassidy Williams;
Coded in: HTML, CSS;

#15 Compose loading animation

Author: Brandon Mathis;
Coded in: HTML, CSS (SCSS);

#16 CSS Loading Animation

Author: John Urbank;
Coded in: HTML (Haml), CSS (Sass);

#17 Only CSS Loader – Wizard

Author: Guilmain Dorian;
Coded in: HTML (Pug), CSS (SCSS);

#18 Random geometric shapes loading animation

Author: Tony Banik;
Coded in: HTML (Slim), CSS (SCSS), JS;

#19 Canvas loading animation

Author: Rachel Smith;
Coded in: HTML, CSS (SCSS), JS;

#20 XBox SmartGlass Loading Animation

Author: Adam Argyle;
Coded in: HTML (Pug), CSS (Stylus);

#21 Loading Animation MySensors

Author: Edoardo;
Coded in: HTML, CSS (SCSS);

#22 CSS Pancake Loader

Author: Dario Corsi;
Coded in: HTML, CSS (SCSS);

#23 Loading Animation

Author: John Heiner;
Coded in: HTML, CSS (SCSS);

#24 Rotate / Pulse Loading Animation

Earn money with your website or blog

Author: Colin Horn;
Coded in: HTML, CSS (SCSS), JS;

#25 CSS Loading Animation

Author: Glen Cheney;
Coded in: HTML (Haml), CSS (SCSS), JS;

#26 Authentic Weather Loader

Author: Tim Holman;
Coded in: HTML, CSS (SCSS);

#27 Loading Animation with Morphing SVG

Author: Heather Buchel;
Coded in: HTML, CSS (SCSS);

#28 CSS open store animation

Author: Mariana Beldi;
Coded in: HTML, CSS;

#29 CSS Loading Animation

Author: Ahmad Emran;
Coded in: HTML, CSS;

#30 Cat Loader

Author: Claudia;
Coded in: HTML, CSS (SCSS), JS (TweenMax.js);

#31 Button Loading Animation

Author: Joshua Ward;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#32 Floating Loading Animation

Author: Mario Duarte;
Coded in: HTML, CSS (SCSS);

#33 Organic Button

Author: Rik Schennink;
Coded in: HTML, CSS (SCSS), JS;

#34 Switch loading animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#35 Download progress animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#36 CSS3 Loading animations

Author: Manoz;
Coded in: HTML, CSS;

#37 CSS3 Loader & Spinners

Author: Vineeth.TR;
Coded in: HTML (Pug), CSS (SCSS);

#38 Download Button Animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#39 Cat loader

Author: Rplus;
Coded in: HTML (Pug), CSS (SCSS);

#40 Loading

See the Pen Loading by Vladislav Trefil (@v_trefil) on CodePen.

Author: Vladislav Trefil;
Coded in: HTML (Pug), CSS (Sass), JS (jQuery);

#41 Glitch Loading Indicator

Author: Jack Rugile;
Coded in: HTML, CSS, JS (jQuery, lettering.js);

#42 Colored Loader

See the Pen Untitled by Dave McCarthy (@AsLittleDesign) on CodePen.

Author: Dave McCarthy;
Coded in: HTML (Haml), CSS (Sass);

#43 Interactive Skate Loading

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#44 CSS Loading Animations

Author: Alex;
Coded in: HTML, CSS;

#45 Pikachu Loading Page

Author: Hazem Ashraf;
Coded in: HTML, CSS, JS (jQuery);

#46 Spinners using Font Icons

Author: Keyamoon;
Coded in: HTML, CSS;

#47 TRON Spinner

Author: simurai;
Coded in: HTML, CSS (SCSS);

#48 SpinKit

See the Pen SpinKit by Nicola Pressi (@ibanez182) on CodePen.

Author: Nicola Pressi;
Coded in: HTML (Haml), CSS (SCSS);

#49 Loader

See the Pen Loader by Vallée Antoine (@Antoine-360pixel) on CodePen.

Author: Vallée Antoine;
Coded in: HTML, CSS (SCSS);

#50 CSS3 Loading Spinner

Author: Matthew Roelle;
Coded in: HTML (Haml), CSS (Sass);

#51 Loading animation by Kayleigh

See the Pen Loading animation by Kayleigh Foley (@kayfo23) on CodePen.

Author: Kayleigh Foley;
Coded in: HTML, CSS, JS (gsap.js, DrawSVGPlugin3.js);

#52 Loading animation by Mohamed

See the Pen Loading Animation by Mohamed Yousef (@Freeps2) on CodePen.

Author: Mohamed Yousef;
Coded in: HTML, CSS;

#53 HTML ve CSS ile Loading Animation | 10

Author: 1kodum;
Coded in: HTML, CSS;

#54 HTML ve CSS ile Loading Animation | 7

Author: 1kodum;
Coded in: HTML, CSS;

#55 HTML ve CSS ile Loading Animation | 8

Author: 1kodum;
Coded in: HTML, CSS;

#56 HTML ve CSS ile Loading Animation Tasarlama | 2

Author: 1kodum;
Coded in: HTML, CSS;

#57 HTML ve CSS ile Loading Animation | 5

Author: 1kodum;
Coded in: HTML, CSS;

#58 HTML ve CSS ile Loading Animation | 4

Author: 1kodum;
Coded in: HTML, CSS;

#59 Flight Loading Animation

Author: Dinesh Basnet;
Coded in: HTML, CSS;

#60 Nvidia Loading Animation

Author: gambhirsharma;
Coded in: HTML, CSS;

How to add the JS & CSS loading animation to your website

Conclusion

Which loading animation did you like best? If you have also published a loading animation on codepens, please let me know so that I can expand this list! 🙂

Note: All buttons are all published on codepen.io and not by me.

Still not enough? Then this could be something for you:

Источник

19 CSS спиннеров анимации загрузки

Подборка бесплатных HTML и CSS спиннеров анимации загрузки.

  • Автор: Зено Роча, 5 июля 2017 года.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS.

TERMINAL SPINNER

Совместимые браузеры : Google Chrome, Firefox, Opera, Safari.

  • Автор: fox_hover, 14 марта 2017 года.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS (SCSS).

CSS3 ANIMATIONS SPINNERS

Анимация загрузки, созданная на чистом CSS3 без использования JavaScript.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Google Fonts, Reset.css, Autoprefixer.js

  • Автор: Milk Studio, 2 июня 2016 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS (SCSS).

SUGARCUBE SPINNER

Красивая HTML и CSS анимация кубика сахара.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

  • Автор: Юлиан Савин, 27 апреля 2016 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML (Pug) / CSS.

CSS SPINNERS

Простой CSS индикатор загрузки. Он создан с помощью CSS и минимального количества HTML-разметки.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

  • Автор: Адитая Брандари, 4 марта 2016 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS (SCSS).

SPINNER

Анимация загрузки, созданная на чистом CSS.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

  • Автор: Фабио Оттавиани, 22 января 2016 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS (SCSS).

CSS AND SVG SPINNER

Современный SVG спиннер, созданный на основе CSS.

Совместимые браузеры : Google Chrome, Edge, Firefox, Opera, Safari.

Зависимости : Reset.css, Autoprefixer.js

  • Автор: neil tron 18 июня, 2015 года.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS / JavaScript.

POLYGON SPINNER

Анимация загрузки, которая выводит SVG-треугольник, а затем преобразует его в многоугольник и обратно.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : TweenMax.js, Underscore.js.

  • Автор: Фабрицио Бьянки, 23 марта 2015 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML (Haml) / CSS.

8 BIT SPINNER

Пиксельная круговая анимация загрузки с использованием свойства box-shadow.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Reset.css, Prefixfree.js.

  • Автор: Мартин ван Дрил, 17 марта 2015 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS.

CSS LOADING ANIMATION

Красивый эффект CSS спиннера анимации загрузки.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

  • Автор: Хьюго Виледаль, 21 октября 2014 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS (SCSS).

SIMPLE REPEATING SPINNER

Простой повторяющийся спиннер с красивой анимацией.

Совместимые браузеры : Google Chrome, IE, Firefox, Opera, Safari.

  • Автор: Меттью Роэль, 19 сентября 2014 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML (Haml) / CSS (Sass).

CSS3 LOADING SPINNER

Крутая CSS3 анимация загрузки.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Google Fonts, Autoprefixer.js.

  • Автор: Омер Фатих, 22 августа 2014 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS (Less).

PURE CSS SPINNER

Точечный сппиннер, созданный на чистом CSS.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari/

  • Автор: Макс Руйгеваард, 21 августа 2014 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS.

SPINNER

Простой спиннер, созданный с помощью HTML и CSS-анимации.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

  • Автор: Кети ДеКора, 28 мая 2014 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML (Haml) / CSS (SCSS).

LOADING SPINNER

Анимация загрузки на основе CSS 3.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Reset.css, Autoprefixer.js, Modernizr.js.

  • Автор: Игор Амадо, 23 февраля 2014 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML (Haml) / CSS (SCSS).

RAINBOW SPINNER

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Reset.css, Prefixfree.js.

  • Автор: Мэтт Систо, 3 декабря 2013 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS (SCSS).

SIMPLE CSS-ONLY LOADING SPINNER

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

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

  • Автор: Кристиан Денни Сторгард, 4 июля 2013 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML / CSS.

DIGITAL SPINNER

CSS3-спинннер с дисками, вращающимися с разной скоростью.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

  • Автор: Хаким Эль Хатта, 7 июля 2013 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML (Haml) / CSS (SCSS).

CSS SPINNER ANIMATION

Еще один CSS-спиннер анимации загрузки. Непрактичный, так как в нем используется много элементов DOM.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

  • Автор: Ноэль Дельгадо, 3 апреля 2013 г.
  • Ссылки: демо-версия и код .
  • Создано с помощью: HTML (Haml) / CSS (SCSS).

SPINNER

Стрелки часов созданы с помощью псевдоэлементов :before и :after . Анимация применяется к псевдоэлементам.

Совместимые браузеры : Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости : Normalize.css, Autoprefixer.js.

Источник

Оцените статью
© 2024 Программирование