Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Feb 7, 2018

10 Free CSS & JavaScript Snippets for Creating Animated Loaders

Custom loading bars offer a way for websites to update visitors using strong visuals. Sometimes a static “loading” message isn’t always enough!
And if you want to add a custom loading bar to your website then this collection is sure to have something that’ll suit your needs.

1. Loading Bar with Counter


Nicolas Slatiner created this incredible loading bar with a top tab displaying the loading percentage. It moves along with a custom animation that can be changed using JavaScript.
But the best part is the animated bar design and the clean style. This loading bar would fit on any website and it offers an incredible user experience.

2. Light Loader

If you prefer a simpler loading spinner with a twist, then this light loader might be just what you’re looking for. It uses the starburst shape coupled with pure CSS3 animations to create a loading effect that draws the eye.
You can adjust the animation style and loading time all in CSS which is pretty neat. And the shapes are all created using CSS too so you can adjust the size, speed, and structure of the starburst icon.

3. Multi-Animated Loader

Perhaps the most complex loading feature I’ve ever seen is this circle created by Glen Cheney. It does use a few lines of JavaScript to add a show/hide feature but this isn’t required for the circle animation to work.
So you can get this thing running on your site in pure CSS3 with options to change the color, size, and speed. My favorite part of this animation is the off-kilter look where the center rotates against the outside.
It offers a really cool effect that just grabs the eye.

4. Canvas Fractal Loader

This striped fractal canvas loading icon feels like an old-school Windows screensavers. This technique uses a lot of JavaScript to make the looping effect and to keep the color transition consistent.
Even though it’s called a canvas element it does not use a canvas element on the page. Instead it’s powered by Sketch.js which is a natural canvas library. Awesome design if you like the fractal style and don’t mind toying with JavaScript to get it running on your site.

5. OuroboroCSS Loaders

The OuroboroCSS loaders are a unique creation from developer Geoffrey Crofte. These loaders are powered by pure CSS and they operate on a repeating animation cycle that gives the illusion of disappearing into the shape.
I like this design more for internal loaders rather than a full-page loader. It’s quaint and easy to spot from a distance, but not so powerful as to take up the entire page.

6. Thermometer Loader

This custom thermometer-style loader feels more like an amazing proof of progress rather than a practical element for your website. But creator Hugo Giraudel really pushed the limits of CSS with this loader moving through a number of different colors from bottom to top.
It only has three HTML elements nested inside each other and the colors and animations are all pure CSS which is breaktaking.

7. Three.js Loader

I have to throw this into the collection just because it’s so darn cool. This Three.js loader by Lennart Hase uses the free Three.js 3D library to create a rotating cube on a small surface.
The animation is controlled through JavaScript and WebGL rendering. 3D design is much more prominent on the web these days and this code snippet is proof of how much you can accomplish.

8. Organic Circle

This crazy canvas circle loader reminds me of air traffic radars or the types of blips you’ll see on submarines. It’s built entire on the HTML canvas element using ctx and JavaScript calls to create this effect from scratch.
You may not find a great way to work this into your site, but you have to admit this thing is impressive.

9. Simple Circle Rotator

Short, sweet, and to the point best describes this canvas loader. It rotates the inner circle of a canvas element infinitely with some basic JavaScript controlling the animation.
I do think this rotator is simple enough to fit onto any site and it’s pretty easy to customize too. Everything runs through JS code so you won’t even need to copy the CSS at all.

10. Pure CSS Loader Dots

Another simple yet fun example is this pure CSS loader with alternating dots moving in & out of view. It’s one of the coolest loading effects that really gets the point across without being too blatant.
You can fit this onto any page and it’s simple to setup. The dot shapes and animations run through CSS and there’s no JavaScript required.

Wrapping Up

If you’re looking for a custom loader for your website then I guarantee you’ll find something here. These loaders are wildly diverse but they can all work well for different projects.
Take another look at this collection to see what you can find and feel free to customize these snippets for your own use.









Sep 7, 2016

31 Best Websites for Scoring Freebies

As the world becomes even more commercialized, an increasing amount of free stuff can be had through discount offers, recycling efforts and Internet loss leaders. Learning where to look for these deals and free samples can save you a significant amount of money on a variety of stuff. Below are the 31 best websites to check out for free stuff, although not in any particular order:
1. Craigslist
While Craigslist has a mixed reputation -- users need to use caution and common sense when interacting with total strangers -- it is also a great source of free stuff. As the phenomenon known as freecycling becomes increasingly popular, Craigslist can be a great resource for finding these offers. Freecycling is based on the idea that many people have used items that have remaining useful life but they are replacing those items anyway. Rather than throwing these items away, the owners offer them to the general public for free.
2. FreeStuff.com
FreeStuff.com gives you access to free samples of common household items ranging from coffee to moisturizer. You can use this site to save money on many items you use or to try out new brands for free.
3. Yerdle
Yerdle describes itself as the "people-powered store."  The idea of the site is that the more stuff you give away, the more credits you earn with which to buy other things you might want on Yerdle without having to use cash. While this might seem like it takes more effort than throwing things out, you can get something instead of nothing for items you were going to put in the trash. Using a service like this could be a good option for items that you feel are too valuable to simply give away or throw away but that you're not having success selling.
4. FreeSamples.org
FreeSamples.org is a portal that gives you access to a variety of free product offers for things like household products as well as coupons for products and local restaurants. The offers are updated every day.
5. The Freecycle Network
The Freecycle Network is made up of nearly nine million members worldwide. It is dedicated to enabling members to get and give stuff for free in order to put goods to their most efficient use -- and keep usable items out of landfills. This nonprofit describes itself as a "grassroots movement," and local volunteer moderators help handle network activity to keep exchanges safe and posts accurate. Membership is free.
6. Woman Freebies
Offering people the chance to try before they buy, Woman Freebies supplies free samples, coupons and giveaways of products geared toward women, from candles and shoes to vacations. This site is a good place to look for fun stuff you need or even a cheap gift for your mom, sister, wife or girlfriend.
7. Drugs.com
Drugs.com is an online resource that offers a drug discount program. The free membership card can save you as much as 80% at major pharmacies, according to the website.
8. The ReUseIt Network
The ReUseIt Network serves as a portal to give you access and information on hundreds of freecycling groups worldwide. The site focuses on directing you to freecycling groups and resources in your local area.
9. Free Stuff Finder
Free Stuff Finder shares deals, giveaways and discounts offered both online and at popular retailers. The site shows you both the original price of an item and the price after coupons and discounts to break down your savings for you.
10. Target
Target has a free sample portal that allows you to try products for free. Furthermore, by signing for the store's Red Card, you can save 5 percent on every purchase. Know what you're signing up for before committing. Loyalty cards can come with perks but also typically track your purchases, which some consumer advocacy groups consider an invasion of privacy.
11. SweetFreeStuff.com
SweetFreeStuff.com offers an e-newsletter that includes regular access to great deals online and free samples. The website also lists giveaways and sweepstakes you can sign up for online.
12. Cardpool
Cardpoolis an online marketplace that allows you to purchase gift cards at a discount to use at your favorite stores. While the discount levels vary, there are some attractive deals to be found. You also can sell your gift cards for cash.
13. All You
Lifestyle website All You lists 59 birthday freebies. The site also provides coupons for groceries and household items as well as other exclusive deals.
14. The Penny Hoarder
In addition to listing 100 places that have free birthday offers, the Penny Hoarder offers advice on saving and earning money in unconventional ways.
15. HeyItsFree.com
Another site with a long list of birthday freebies, Hey It's Free also is a good source for free offers throughout the year. Find coupons for everything from free food and moisturizer to free comic books and codes for free rewards points.
16. Freaky Freddie's
In addition to deals on products for grown-ups, Freaky Freddie's has long list of free kids' stuff. Check out offers for books, T-shirts, coloring books and activities like roller skating.
17. Totally Free Stuff
Totally Free Stuff< offers dozens of categories of free stuff as well as daily updates. Search for things in categories for type of person or interest -- such as men, women, business, religious, wedding -- or by product type, such as kitchen, pet products, toys, sports and automotive.
18. I Love Free Things
I Love Free Things is another site with a diverse collection of free stuff for kids, from books to deals on fun activities like bowling. The site has dozens of other categories of free stuff for all ages as well.
19. Freeflys.com
Freeflys.com provides lists of free samples, coupons and coupon codes. You can search the site or look for items sorted by category or brand name.
20. Raise
Raise is an online marketplace that allows you to buy gift cards for products and services from over 1000 stores and restaurants at a discount. The site also gives you the option of selling unwanted or unused gift cards for cash.
21. Recycle the World
Recycle the World is another freecycling website that allows you to post and find free stuff. Whether you are looking to get rid of unwanted items or are looking for something specific, the site lets you target your local area. It also provides a search tool to help you find recycling centers near you.
22. Coupons.com
Couponing has grown from a trend into a lifestyle for many people, and the number of websites dedicated to providing access to coupons has exploded in recent years. As a leader in the industry showcasing more than 2,000 brands, Coupons.com offers multiple ways to get coupons online. You can use the site to print coupons, find coupon codes and find discounts to specific retailers that you can add to your credit or debit card.
23. SmartSource.com
Another great source of free coupons, SmartSource.com can help you save money on everything from beauty products and groceries to weight loss products and sanding sheets for your DIY projects.
24. The Krazy Coupon Lady
Extreme couponing website The Krazy Coupon Lady< is a great source for coupons from some of your favorite retailers, from discount stores like Walmart and Dollar Tree to high-end brands like Sephora. The site also features deals for stores like Home Depot as well as online retailers such as Amazon.
25. Freebie-Depot
Freebie-Depot has "hot lists" for everything from everyday offers to birthday giveaways across a range of products and services from various brands and retailers. Among its many categories, the site features a wedding freebies section with deals for people who are getting married or are recently married.
26. Lifehacker
While Lifehacker is known for unconventional solutions to everyday problems, the website often publishes articles on how and where to save money, such as a feature on the best retail and restaurant birthday freebies.
27. Freebies.org
In addition to providing access to a variety of offers, Freebies.org offers tips and tricks on how to save money as well as its Complete Guide to Freebie Hunting.
28. I Crave Freebies
Similar to other online sources of free samples, I Crave Freebies offers links to coupons for discounts and free product samples. It also provides links to sites that pay you to take surveys.
29. GetItFree
Updated daily, GetItFree finds free offers for everything from food to household products. As you browse the site, you can add coupons, deals, freebies and sweepstakes offers to your basket just like you would when shopping online.
30. Freebies.com
Freebies.com started as a print magazine more than 30 years ago. As a digital resource, it continues to provide a blend of both products and services that are offered at no charge from major national retailers.
31. Shop4Freebies
Shop4Freebies catalogs offers for everything from free home care product samples and bargains to free cookbooks. Its list of printable coupons and other offers is updated daily.
Hundreds of sites offer consumers great ways to save. This list narrows down the options so that you can more easily find providers of freebies and deals that suit your needs. By checking out the features of these different sites, you can find the online resources that work best for you, whether you want birthday freebies, discounted items, coupon codes or free stuff year-round.
This article originally appeared on GOBankingRates.com: 31 Best Websites for Free Stuff

Sep 18, 2013

106 Free Flat UI Kits to Boost Your Designs in No Time

Over the past several months, we have noticed that in web design the use of flashy illustrations, extraneous textures and drop down shadows were minimized if not totally removed. This is due to the growing influence of flat design – a user-centric web design style.
Microsoft, Google and now even Apple is digging this design trend. If you have observed that you were left behind and you still have those beveled, bulged and eye popping gradients, you can catch up by learning the Basic Principles of Flat Design .
And here is more to help you get started. I compiled 100+ FREE downloadable Flat UI kits to help you kickin’ in no time.
UI kits are great packages for starters for they can save you time, which is important when you are catching up the trend. These kits usually come in PSD file formats and include brushes, patterns and a lot of user interface elements.

1.  Flat AP UI Kit

free-flat-UI-kit-1

2. Featherweight UI – A free, vector based and retina ready UI kit

From: Sara Hunt
free-flat-UI-kit-2

3. Flat UI Free – PSD&HTML User Interface Kit

From: Designmodo
free-flat-UI-kit-3

4. FREE flat UI kit.

free-flat-UI-kit-4

5. UI Kit

free-flat-UI-kit-5

6. Polaris UI Free – User Interface Pack

From: Designmodo
free-flat-UI-kit-6

7. Square UI Free – User Interface Kit

From: Designmodo
free-flat-UI-kit-7

8. Freebie PSD: Flat / UI Kit

free-flat-UI-kit-8

9. #flatlyfe UI Kit [FREEBIE]

From: Dylan Opet
free-flat-UI-kit-9

10. Flat UI

free-flat-UI-kit-10

11. Blog/Magazine Flat UI Kit

From: Raul Taciu
free-flat-UI-kit-11

12. PSD Flat UI Kit Template Vol2

free-flat-UI-kit-12

13. Simple UI Kit with Flat Colors

free-flat-UI-kit-13

14. Free flat UI kit (.psd freebie)

free-flat-UI-kit-14

15. Flat Design UI Kit Vol. 1

free-flat-UI-kit-15

16. EVEN: A FLAT UI KIT

free-flat-UI-kit-16

17. The Free Modern Touch Kit

free-flat-UI-kit-17

18. Free Color UI Kit

From: Cüneyt ŞEN
free-flat-UI-kit-18

19. Flat UI Kit

From: JAN DVOŘÁK
free-flat-UI-kit-19

20. SmoothBerry – Free UI Kit

From: Mansoor MJ
free-flat-UI-kit-20

21. Free Minimal UI Kit

free-flat-UI-kit-21

22. Mega Flat UI Kit

From: Kim
free-flat-UI-kit-22

23. UI Kit – Free PSD

free-flat-UI-kit-23

24. Vertical Infinity – A Mega Flat Style UI Kit PSD

free-flat-UI-kit-24

25. Flat UI Kit (Free PSD)

From: Devin Schulz
free-flat-UI-kit-25

26. Metro UI kit

free-flat-UI-kit-26

27. Flat UI Kit

free-flat-UI-kit-27

28. Beach GUI

From: Mike Clarke
free-flat-UI-kit-28

29. UI Kit – Free download

free-flat-UI-kit-29

30. Dark UI Kit – Free download

free-flat-UI-kit-30

31. Flat UI Freebie Pack

From: Shaun Stehly
free-flat-UI-kit-31

32. remember.me – Application Artboards (Free PSD)

From: Amit Jakhu
free-flat-UI-kit-32

33. Flat Design UI Components

From: Raul Taciu
free-flat-UI-kit-33

34. Free Flat UI Kit

From: Enes Danış
free-flat-UI-kit-34

35. Flat dashboard. Free UI kit PSD

free-flat-UI-kit-35

36. Flat Web & UI Kit Final Pack

From: Dart 117
free-flat-UI-kit-36

37. UI Kit

free-flat-UI-kit-37

38. UI/UX Flat design – Free PSD

free-flat-UI-kit-38

39. Freebie PSD: Flat UI Kit

From: Riki Tanone
free-flat-UI-kit-39

40. Freebie PSD: Flat UI Kit 2 (Blog)

From: Riki Tanone
free-flat-UI-kit-40

41. Flat UI Design Kit PSD

From: Asim Craft
free-flat-UI-kit-41

42. UI Kit (Free PSD)

free-flat-UI-kit-42

43. Flat UI Kit – Freebie PSD

From: Ryan Bales
free-flat-UI-kit-43

44. Avengers Flat UI Kit

free-flat-UI-kit-44

45. flat UI kit

From: Daniel
free-flat-UI-kit-45

46. Responsive UI Kit (PSD)

free-flat-UI-kit-46

47. UI KIT – 1 PSD SET (FREE)

From: PremiumPsds
free-flat-UI-kit-47

48. Freebie: UI Kit PSD

free-flat-UI-kit-48

49. Flatastic UI

free-flat-UI-kit-49

50. Flat UI Kit

From: Eric Bieller
free-flat-UI-kit-50

51. Flatilicious User Interface Free

From: Patrick M.
free-flat-UI-kit-51

52. Free PSD: Flat UI Kit

free-flat-UI-kit-52

53. Flat UI Elements

free-flat-UI-kit-53

54. Free Flat UI Kit

free-flat-UI-kit-54

55. Free Deal: Flat User Interface Set

free-flat-UI-kit-55

56. Flatter- A Free UI Kit

From: Andrew Coyle
free-flat-UI-kit-56

57. Freebie PSD: Oniam UI Kit

free-flat-UI-kit-57

58. Flat UI Kit (free download!)

free-flat-UI-kit-58

59. (FREE PSD) Flat UI

free-flat-UI-kit-59

60. Orange/Cyan UI

From: Marc Konno
free-flat-UI-kit-60

61. Tablet-Friendly Almost Flat UI Kit

free-flat-UI-kit-61

62. Flat + Transparent UI

free-flat-UI-kit-62

63. Flat UI kit

free-flat-UI-kit-63

64. Ecommerce Flat UI Kit Vol.1 (PSD)

free-flat-UI-kit-64

65. Minimize UI Kit

free-flat-UI-kit-65

66. Free Flat Design UI/UX Kit

free-flat-UI-kit-66

67. Human After All -UI Kit Free

From: Tim Meissne
free-flat-UI-kit-67

68. UI/UX Flat Design Kit – Neon Theme – FREE PSD

free-flat-UI-kit-68

69. Flat UI Kit – Free Download

From: Mark Peck
free-flat-UI-kit-69

70. Gideo UI Kit

From: Paul
free-flat-UI-kit-70

71. Flat UI Kit Free

free-flat-UI-kit-71

72. Free RockMedia Media UI Kit

free-flat-UI-kit-72

73. Free modern UI PSD

free-flat-UI-kit-73

74. Flat UI Kit

free-flat-UI-kit-74

75. REDMILK FREE UI Elements (PSD)

free-flat-UI-kit-75

76. Metrostyle Web UI Kit (PSD)

free-flat-UI-kit-76

77. touch50px UI Kit (PSD)

From: Angelo
free-flat-UI-kit-77

78. UI/UX Flat Design – Sorbet Theme – Free PSD

free-flat-UI-kit-78

79. Flat Design Buttons for Websites

From: Asim Craft
free-flat-UI-kit-79

80. UI Kit

free-flat-UI-kit-80

81. Grooveshark PSD (Flat redesign)

free-flat-UI-kit-81

82. Metro Vibes UI Kit (PSD)

From: Pixelkit.com
free-flat-UI-kit-82

83. Free Flat Flags

free-flat-UI-kit-83

84. “Pizza” UI Kit – PSD

free-flat-UI-kit-84

85. Eerste – Flat User Interface Kit That Is Free To Download

free-flat-UI-kit-85

86. Minimal Blue UI Kit

free-flat-UI-kit-86

87. Weekly Freebie – Reservation Box

free-flat-UI-kit-87

88. Metro UI Kit

free-flat-UI-kit-88

89. Metro UI KitRegister UI — Free PSD included

From: Ionut Zamfir
free-flat-UI-kit-89

90. Friends list UI (Free PSD)

From: Nicolas Mata
free-flat-UI-kit-90

91. Sign Up Form

From: Dylan Opet
free-flat-UI-kit-91

92. Flat Web Ui

free-flat-UI-kit-92

93. Simple UI – Free PSD included

From: Ionut Zamfir
free-flat-UI-kit-93

94. Simplistic UI Kit

free-flat-UI-kit-94

95. Flattastic Free

free-flat-UI-kit-95

96. Ui Kit [Free PSD]

free-flat-UI-kit-96

97. Freebie PSD: UI Kit

From: Patryk Adaś
free-flat-UI-kit-97

98. Transparent freebie

From: Patryk Adaś
free-flat-UI-kit-98

99. Simple UI Kit – Free

From: Sadat
free-flat-UI-kit-99

100. Freebie PSD: Flat & Casted Long Shadow UI Kit

From: Jacopo Spina
free-flat-UI-kit-100

101. RED UI

free-flat-UI-kit-101

102. Leo

free-flat-UI-kit-102

103. Almost Flat Dark UI Pack

free-flat-UI-kit-103

104. City Break UI Kit

Free Flat UI kit 104

105. Arctic Sunset GUI Kit Free PSD (Exclusive) 

Free-Flat-UI-kit-105

106. Sweet Candy UI Kit

Free-Flat-UI-kit-106

Having a library of UI elements can help you make your design process faster.
Download these Free UI kit now and you will never get left behind!
Hands down to our great designers who share their works for free!