100+ CSS Spinners

Last Updated on by in CSS Examples
CSS Spinners

If you are seeking a visually striking collection of CSS spinners, you’ve come to the right place! In this post, we are showcasing over 100 free HTML and CSS loading spinner code examples gathered from top platforms such as GitHub and CodePen.

CSS spinners are animated graphic elements that indicate the loading of content or the processing of a specific event on a webpage. We’ve carefully selected each loading spinner in our compilation, offering animated spinners in different shapes, sizes, and colors to provide consistent visual feedback to users.

Whether you’re a seasoned web designer, a skilled web developer, or simply on the lookout for top-notch CSS spinners for your web project, our collection caters to all. Offering a plethora of HTML and CSS spinners, each infused with creativity and customizable features, you can effortlessly craft visually striking designs for both web and mobile applications. With just a basic understanding of HTML and CSS, you can easily tweak the loader’s colors, sizes, and animations and stay ahead of design trends.

If your goal is to give your website visitors immediate visual feedback, indicating that the site is actively retrieving or processing data, then incorporating these sleek CSS spinners is essential. They enhance the user experience by minimizing uncertainty and frustration during loading periods.

Feel free to explore our highly customizable, hand-picked CSS spinner code examples, enhance visual allure, and add a touch of elegance to your website.

1. The hypnotic II

See the Pen
The hypnotic II
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: JUNE 1, 2021
Made with: HTML, CSS

2. Yet another CSS loader #3

See the Pen
Yet another CSS loader #3
by Ivan Bogachev (@sfi0zy)
on CodePen.


Author: Ivan Bogachev @sfi0zy
Links: Source Code / Demo
Created on: FEBRUARY 27, 2021
Made with: HTML, CSS(Less)

3. The Square vs The Circle

See the Pen
The Square vs The Circle
by Temani Afif (@t_afif)
on CodePen.
</p

Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: JANUARY 9, 2022
Made with: HTML, CSS

4. Trinity spinner

See the Pen
Trinity spinner
by Abraham Samma (@ABSamma)
on CodePen.


Author: Abraham Samma @ABSamma
Links: Source Code / Demo
Created on: JUNE 22, 2020
Made with: HTML, CSS

5. Yet another CSS loader #2

See the Pen
Yet another CSS loader #2
by Ivan Bogachev (@sfi0zy)
on CodePen.


Author: Ivan Bogachev @sfi0zy
Links: Source Code / Demo
Created on: FEBRUARY 27, 2021
Made with: HTML, CSS(Less)

6. Gradient Spinner

See the Pen
Gradient Spinner
by Adam Dipinto (@AdamDipinto)
on CodePen.



Author: Adam Dipinto @AdamDipinto
Links: Source Code / Demo
Created on: EPTEMBER 29, 2019
Made with: HTML, CSS

7. WiFi loader animation – Only CSS

See the Pen
WiFi loader animation – Only CSS
by Milan Raring (@milanraring)
on CodePen.

Author: Milan Raring
Links: Source Code / Demo
Created on: JUNE 4, 2020
Made with: HTML, CSS(SCSS)

8. The Square

See the Pen
The Square
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: JANUARY 8, 2022
Made with: HTML, CSS

9. 50+ Pure CSS3 Preloaders (Latest)

See the Pen
50+ Pure CSS3 Preloaders (Latest)
by Sahar Ali Raza (@mrsahar)
on CodePen.


Author: Sahar Ali Raza @mrsahar
Links: Source Code / Demo
Created on: AUGUST 10, 2019
Made with: HTML, CSS

10. Big collection: Houdini-animated 1 element pure CSS spinners

See the Pen
Big collection: Houdini-animated 1 element pure CSS spinners
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: JUNE 4, 2020
Made with: HTML(Pug), CSS(SCSS)

11. The Maze

See the Pen
The Maze
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: JANUARY 3, 2022
Made with: HTML, CSS

12. Multicolor Loader Ring

See the Pen
Multicolor Loader Ring
by Ryan Mulligan (@hexagoncircle)
on CodePen.


Author: Ryan Mulligan @hexagoncircle
Links: Source Code / Demo
Created on: JULY 27, 2019
Made with: HTML, CSS(SCSS)

13. The shape III

See the Pen
The shape III
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: JUNE 1, 2021
Made with: HTML, CSS

14. Circle Svg

See the Pen
Circle Svg
by Subham Subham (@shubhsboson)
on CodePen.


Author: Subham Subham @shubhsboson
Links: Source Code / Demo
Created on: MAY 31, 2020
Made with: HTML, CSS

15. Yet another CSS loader

See the Pen
Yet another CSS loader
by Ivan Bogachev (@sfi0zy)
on CodePen.


Author: Ivan Bogachev @sfi0zy
Links: Source Code / Demo
Created on: FEBRUARY 27, 2021
Made with: HTML, CSS(Less)

16. Acrobatic Preloader

See the Pen
Acrobatic Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: JANUARY 27, 2022
Made with: HTML, CSS

17. The Infinity II

See the Pen
The Infinity II
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: JANUARY 7, 2022
Made with: HTML, CSS

18. loader

See the Pen
loader
by @BrawadaCom (@Anna_Batura)
on CodePen.


Author: @BrawadaCom @Anna_Batura
Links: Source Code / Demo
Created on: NOVEMBER 19, 2020
Made with: HTML, CSS(Sass)

19. 3D Loader

See the Pen
3D Loader
by alphardex (@alphardex)
on CodePen.


Author: alphardex @alphardex
Links: Source Code / Demo
Created on: MAY 25, 2020
Made with: HTML, CSS(SCSS)

20. The Spinner III

See the Pen
The Spinner III
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: JUNE 1, 2021
Made with: HTML, CSS

21. Spin

See the Pen
Spin
by Adam Dipinto (@AdamDipinto)
on CodePen.


Author: Adam Dipinto @AdamDipinto
Links: Source Code / Demo
Created on: JULY 11, 2019
Made with: HTML, CSS

22. The Blob II

See the Pen
The Blob II
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: JANUARY 6, 2022
Made with: HTML, CSS

23. Neumorphism Gradient Loader

See the Pen
Neumorphism Gradient Loader
by samuel garcia (@sam_garcia2)
on CodePen.


Author: samuel garcia @sam_garcia2
Links: Source Code / Demo
Created on: MAY 3, 2020
Made with: HTML, CSS(SCSS)

24. Skateboard-Like Preloader

See the Pen
Skateboard-Like Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: MARCH 11, 2022
Made with: HTML, CSS

25. CSS Loading animation

See the Pen
css loading animation
by peyman (@pfndesign)
on CodePen.


Author: peyman @pfndesign
Links: Source Code / Demo
Created on: APRIL 3, 2020
Made with: HTML, CSS

26. Create Water Wave ♒ Animation Effects in CSS

See the Pen
Create Water Wave ♒ Animation Effects in CSS
by Bilal.Rizwaan (@Bilal1909)
on CodePen.


Author: Bilal.Rizwaan @Bilal1909
Links: Source Code / Demo
Created on: OCTOBER 14, 2020
Made with: HTML, CSS

27. Hexagon Loading With CSS

See the Pen
Hexagon Loading With CSS (2)
by Osama Belal (@osama-belal)
on CodePen.


Author: Osama Belal @osama-belal
Links: Source Code / Demo
Created on: JULY 1, 2019
Made with: HTML, CSS

28. The Moving

See the Pen
The Moving
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: JANUARY 2, 2022
Made with: HTML, CSS

29. Another Loader

See the Pen
Another Loader
by Chris Smith (@chris22smith)
on CodePen.


Author: Chris Smith @chris22smith
Links: Source Code / Demo
Created on: MARCH 22, 2020
Made with: HTML, CSS(SCSS)

30. Circular CSS loader (single div)

See the Pen
Circular CSS loader (single div)
by Piotr Galor (@pgalor)
on CodePen.


Author: @pgalor
Links: Source Code / Demo
Created on: MAY 17, 2019
Made with: HTML, CSS

31. Loading Goes Off Track

See the Pen
Loading Goes Off Track
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: MARCH 17, 2022
Made with: HTML, CSS

32. Longcat Spinner

See the Pen
Longcat Spinner
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: OCTOBER 3, 2019
Made with: HTML(Pug), CSS(SCSS)

33. Spinners

See the Pen
Spinners
by Mikael Ainalem (@ainalem)
on CodePen.


Author: Mikael Ainalem @ainalem
Links: Source Code / Demo
Created on: SEPTEMBER 2, 2020
Made with: HTML, CSS

34. Simple spinner as background SVG image datauri with style

See the Pen
Simple spinner as background SVG image datauri with style
by myf (@myf)
on CodePen.


Author: myf @myf
Links: Source Code / Demo
Created on: MAY 12, 2019
Made with: HTML, CSS

35. Loading Animation w/ Translate and Z-index

See the Pen
Loading Animation w/ Translate and Z-index
by Ty Strong (@tystrong)
on CodePen.


Author: Ty Strong @tystrong
Links: Source Code / Demo
Created on: MARCH 11, 2020
Made with: HTML, CSS(SCSS)

36. Pencil Loader

See the Pen
Pencil Loader
by Saahil Shukla (@saahil-shukla)
on CodePen.


Author: Saahil Shukla @saahil-shukla
Links: Source Code / Demo
Created on: DECEMBER 21, 2021
Made with: HTML, CSS

37. Quick loader with CSS transforms, vars & Houdini magic

See the Pen
Quick loader with CSS transforms, vars & Houdini magic
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: APRIL 26, 2019
Made with: HTML(Pug), CSS(SCSS)

38. Weird Loader

See the Pen
Weird Loader
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: APRIL 19, 2019
Made with: HTML, CSS

39. Cube Loader – Pure CSS

See the Pen
Cube Loader – Pure CSS
by Josetxu (@josetxu)
on CodePen.


Author: Josetxu @josetxu
Links: Source Code / Demo
Created on: DECEMBER 16, 2021
Made with: HTML, CSS

40. Light Ball Preloader

See the Pen
Light Ball Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: APRIL 4, 2019
Made with: HTML, CSS

41. Opposites (Attract) loading animation

See the Pen
#CodePenChallenge: Opposites (Attract) loading animation
by Melissa Em (@meowwwls)
on CodePen.


Author: Melissa Em @meowwwls
Links: Source Code / Demo
Created on: OCTOBER 7, 2019
Made with: HTML, CSS

42. Glowing Loader Ring Animation

See the Pen
Glowing Loader Ring Animation
by Ekta maurya (@Curlmuhi)
on CodePen.


Author: Ekta maurya @Curlmuhi
Links: Source Code / Demo
Created on: AUGUST 25, 2020
Made with: HTML, CSS

43. Elastic Bouncing Squares Loader

See the Pen
Elastic Bouncing Squares Loader
by Ricardo Gouveia (@ricardogouveia3)
on CodePen.


Author: Ricardo Gouveia @ricardogouveia3
Links: Source Code / Demo
Created on: NOVEMBER 17, 2018
Made with: HTML(Pug), CSS(Sass)

44. Simple Preloaders

See the Pen
Simple Preloaders
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: APRIL 3, 2019
Made with: HTML, CSS

45. The shapes II

See the Pen
The shapes II
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: MAY 25, 2021
Made with: HTML, CSS

46. One div loader

See the Pen
One div loader
by Filip Vitas (@FilipVitas)
on CodePen.


Author: Filip Vitas @FilipVitas
Links: Source Code / Demo
Created on: MARCH 20, 2019
Made with: HTML(Pug), CSS(Stylus)

47. 1 element pure CSS 3D loader

See the Pen
1 element pure CSS 3D loader
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: JANUARY 11, 2019
Made with: HTML, CSS(SCSS)

48. Take on me loading circle

See the Pen
Take on me loading circle
by Jon Marron (@jon-marron)
on CodePen.


Author: Jon Marron @jon-marron
Links: Source Code / Demo
Created on: AUGUST 6, 2020
Made with: HTML, CSS(SCSS)

49. Squares Loading Animation

See the Pen
Squares Loading Animation
by Chris Smith (@chris22smith)
on CodePen.


Author: Chris Smith @chris22smith
Links: Source Code / Demo
Created on: NOVEMBER 11, 2018
Made with: HTML, CSS(SCSS)

50. “That” loader in CSS ????✨

See the Pen
“That” loader in CSS ????✨
by Jhey (@jh3y)
on CodePen.


Author: JHEY @jh3y
Links: Source Code / Demo
Created on: JANUARY 15, 2022
Made with: HTML(Pug), CSS

51. Solo.to Loader Animation

See the Pen
Solo.to Loader Animation
by Yoav Kadosh (@ykadosh)
on CodePen.


Author: Yoav Kadosh @ykadosh
Links: Source Code / Demo
Created on: JULY 16, 2021
Made with: HTML, CSS(SCSS)

52. CSS Loading Animations

See the Pen
CSS Loading Animations
by Alex (@AlexWarnes)
on CodePen.


Author: Alex @AlexWarnes
Links: Source Code / Demo
Created on: JANUARY 2, 2019
Made with: HTML, CSS

53. Red Dead Redemption Loader (Pure CSS)

See the Pen
Red Dead Redemption Loader (Pure CSS)
by Kyle Wetton (@kylewetton)
on CodePen.


Author: Kyle Wetton @kylewetton
Links: Source Code / Demo
Created on: NOVEMBER 8, 2018
Made with: HTML, CSS(SCSS)

54. CSS3 Loader & Spinners

See the Pen
CSS3 Loader & Spinners
by Vineeth.TR (@vineethtrv)
on CodePen.


Author: Vineeth.TR @vineethtrv
Links: Source Code / Demo
Created on: JULY 29, 2020
Made with: HTML(Pug), CSS(SCSS)

55. CSS loading animation

See the Pen
CSS loading animation
by Natalia ???? (@natszafraniec)
on CodePen.


Author: Natalia
Links: Source Code / Demo
Created on: DECEMBER 12, 2018
Made with: HTML, CSS

56. The flipping

See the Pen
The flipping
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: MAY 25, 2021
Made with: HTML, CSS

57. Pure CSS loading animations

See the Pen
Pure CSS loading animations
by Jason Liquorish (@bassetts)
on CodePen.


Author: Jason Liquorish @bassetts
Links: Source Code / Demo
Created on: NOVEMBER 7, 2018
Made with: HTML, CSS(SCSS)

58. Ball Motion Preloader

See the Pen
Ball Motion Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: JULY 1, 2020
Made with: HTML(Pug), CSS(SCSS)

59. loader animation

See the Pen
loader animation
by Uwe Chardon (@uchardon)
on CodePen.


Author: Uwe Chardon @uchardon
Links: Source Code / Demo
Created on: OCTOBER 31, 2018
Made with: HTML, CSS(Less)

60. CSS Loader animation

See the Pen
CSS Loader animation
by Uwe Chardon (@uchardon)
on CodePen.


Author: Uwe Chardon @uchardon
Links: Source Code / Demo
Created on: OCTOBER 22, 2018
Made with: HTML, CSS(Less)

61. Animated SVG loader

See the Pen
Animated SVG loader
by Sam Roebuck (@samroebuck_)
on CodePen.


Author: Sam Roebuck @samroebuck_
Links: Source Code / Demo
Created on: FEBRUARY 10, 2020
Made with: HTML, CSS(SCSS)

62. Triangle Loading Animation

See the Pen
Triangle Loading Animation
by Tony Banik (@banik)
on CodePen.


Author: Tony Banik @banik
Links: Source Code / Demo
Created on: SEPTEMBER 13, 2018
Made with: HTML(Slim), CSS(SCSS)

63. Gooey Loaders

See the Pen
Gooey Loaders
by Travis John (@travis_john)
on CodePen.


Author: Travis John @travis_john
Links: Source Code / Demo
Created on: FEBRUARY 21, 2019
Made with: HTML, CSS(SCSS)

64. Face Loader [CSS][Animation]

See the Pen
Face Loader [CSS][Animation]
by Fernando Cohen (@designfenix)
on CodePen.


Author: Fernando Cohen @designfenix
Links: Source Code / Demo
Created on: JULY 1, 2020
Made with: HTML, CSS(SCSS)

65. The Shuriken

See the Pen
The Shuriken
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: MAY 25, 2021
Made with: HTML, CSS

66. Loading things… Spinner.

See the Pen
Loading things… Spinner.
by Ben Evans (@ivorjetski)
on CodePen.


Author: Ben Evans @ivorjetski
Links: Source Code / Demo
Created on: AUGUST 17, 2018
Made with: HTML, CSS(SCSS)

67. Pure CSS loader

See the Pen
Pure CSS loader #29
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: JANUARY 29, 2020
Made with: HTML, CSS(SCSS)

68. Pure CSS loader element swappy

See the Pen
Pure CSS loader #31 – 1 element swappy
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: JANUARY 31, 2020
Made with: HTML, CSS(SCSS)

69. Pure CSS loader element metaballs animation

See the Pen
Pure CSS loader #30: 1 element metaballs animation
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: JANUARY 30, 2020
Made with: HTML, CSS(SCSS)

70. Animated SVG loader

See the Pen
Animated SVG loader
by Sam Roebuck (@samroebuck_)
on CodePen.


Author: Sam Roebuck @samroebuck_
Links: Source Code / Demo
Created on: FEBRUARY 10, 2020
Made with: HTML, CSS(SCSS)

71. Gooey Loaders

See the Pen
Gooey Loaders
by Travis John (@travis_john)
on CodePen.


Author: Travis John @travis_john
Links: Source Code / Demo
Created on: FEBRUARY 21, 2019
Made with: HTML, CSS(SCSS)

72. Google Loaders Redesign

See the Pen
Google Loaders Redesign
by Amine Bahmed (@AmineMohamed)
on CodePen.


Author: Amine Bahmed @AmineMohamed
Links: Source Code / Demo
Created on: JULY 1, 2018
Made with: HTML, CSS(SCSS)

73. Ribbon Preloader

See the Pen
Ribbon Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: APRIL 8, 2022
Made with: HTML, CSS

74. The Spinner II

See the Pen
The Spinner II
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: MAY 25, 2021
Made with: HTML, CSS

75. Remix CD Loader

See the Pen
Remix CD Loader
by Chance Strickland (@chancethedev)
on CodePen.


Author: Chance Strickland @chancethedev
Links: Source Code / Demo
Created on: APRIL 12, 2022
Made with: HTML, CSS(SCSS)

76. CSS Single Element Goey Spinner

See the Pen
CSS Single Element Goey Spinner
by Zed Dash (@z-)
on CodePen.


Author: Zed Dash
Links: Source Code / Demo
Created on: DECEMBER 27, 2019
Made with: HTML, CSS(SCSS)

77. Loaders for website

See the Pen
Loaders for website
by Swarup Kumar Kuila (@uiswarup)
on CodePen.


Author: Swarup Kumar Kuila @uiswarup
Links: Source Code / Demo
Created on: DECEMBER 2, 2019
Made with: HTML, CSS

78. Satellite spinner

See the Pen
Satellite spinner
by Michelle Barker (@michellebarker)
on CodePen.


Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: FEBRUARY 1, 2023
Made with: HTML, CSS

79. Spiral Loading

See the Pen
Spiral Loading
by alphardex (@alphardex)
on CodePen.


Author: alphardex @alphardex
Links: Source Code / Demo
Created on: JANUARY 27, 2020
Made with: HTML, CSS(SCSS)

80. Pencil Preloader

See the Pen
Pencil Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: FEBRUARY 3, 2023
Made with: HTML, CSS

81. Fiery Preloader

See the Pen
Fiery Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: JULY 8, 2021
Made with: HTML, CSS(Sass)

82. CSS only rotating loader

See the Pen
CSS only rotating loader
by Chris Smith (@BlogFire)
on CodePen.


Author: Chris Smith @BlogFire
Links: Source Code / Demo
Created on: JUNE 29, 2022
Made with: HTML, CSS

83. The hypnotic

See the Pen
The hypnotic
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: MAY 25, 2021
Made with: HTML, CSS

84. Dot Clock Preloader

See the Pen
Dot Clock Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: JUNE 23, 2021
Made with: HTML, CSS(Sass)

85. Spinner and Balls

See the Pen
Spinner and Balls
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: SEPTEMBER 1, 2022
Made with: HTML, CSS

86. Compass Preloader

See the Pen
Compass Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: OCTOBER 28, 2022
Made with: HTML, CSS

87. The shapes

See the Pen
The shapes
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: MAY 12, 2021
Made with: HTML, CSS

88. Opposites (Attract) loading animation

See the Pen
#CodePenChallenge: Opposites (Attract) loading animation
by Melissa Em (@meowwwls)
on CodePen.


Author: Melissa Em @meowwwls
Links: Source Code / Demo
Created on: OCTOBER 7, 2019
Made with: HTML, CSS

89. The Spinner

See the Pen
The Spinner
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: MAY 12, 2021
Made with: HTML, CSS

90. Infinity path loader ⏳

See the Pen
Infinity path loader ⏳
by Jhey (@jh3y)
on CodePen.


Author: JHEY @jh3y
Links: Source Code / Demo
Created on: OCTOBER 9, 2019
Made with: HTML(Pug), CSS(SCSS)

91. Stunt Preloader

See the Pen
Stunt Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: NOVEMBER 16, 2022
Made with: HTML, CSS

92. Snowball Preloader

See the Pen
Snowball Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: DECEMBER 13, 2022
Made with: HTML, CSS

93. Kinetic CSS loaders

See the Pen
Kinetic CSS loaders
by Jenning (@jenning)
on CodePen.


Author: Jenning @jenning
Links: Source Code / Demo
Created on: JUNE 10, 2021
Made with: HTML, CSS

94. Dual Triangle Preloaders

See the Pen
Dual Triangle Preloaders
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: NOVEMBER 20, 2019
Made with: HTML, CSS

95. CSS only – Google Fiber Loading Animation Idea

See the Pen
CSS only – Google Fiber Loading Animation Idea
by Derek Story (@derekstory)
on CodePen.


Author: Derek Story @derekstory
Links: Source Code / Demo
Created on: DECEMBER 23, 2022
Made with: HTML, CSS(SCSS)

96. Simple CSS loaders

See the Pen
Simple CSS loaders
by Jenning (@jenning)
on CodePen.


Author: Jenning @jenning
Links: Source Code / Demo
Created on: MAY 2, 2021
Made with: HTML, CSS

97. Rings loader

See the Pen
Rings loader ⏳
by Jhey (@jh3y)
on CodePen.


Author: JHEY @jh3y
Links: Source Code / Demo
Created on: NOVEMBER 21, 2019
Made with: HTML(Pug), CSS(Stylus)

98. Leaky Preloader

See the Pen
Leaky Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: NOVEMBER 7, 2022
Made with: HTML, CSS

99. Smiley Preloader

See the Pen
Smiley Preloader
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: DECEMBER 30, 2022
Made with: HTML, CSS

100. Pure CSS loader element transparency tails

See the Pen
Pure CSS loader #5/ 2020 – 1 element transparency tails
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: JANUARY 6, 2020
Made with: HTML, CSS(SCSS)

101. Liquid loader – clean code, pastel gradient

See the Pen
Liquid loader – clean code, pastel gradient
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: JANUARY 4, 2020
Made with: HTML(Pug), CSS(SCSS)

102. Liquid loader

See the Pen
Liquid loader
by Mikael Ainalem (@ainalem)
on CodePen.


Author: Mikael Ainalem @ainalem
Links: Source Code / Demo
Created on: JANUARY 1, 2020
Made with: HTML, CSS

103. Pure CSS loader

See the Pen
Pure CSS loader #1/ 2020
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: JANUARY 2, 2020
Made with: HTML(Pug), CSS(SCSS)

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.