60+ CSS Weather Icon, Widget, Designs

CSS Weather Icon, Widget, Designs – Are you looking for CSS Weather Icon, Widget, Designs, If yes then in this post I am going to share hand-picked CSS Weather Icon, Widget, Designs for you. If you want to share weather updates on your website then you can integrate these jQuery Weather Plugins. Displaying weather forecasts on the website is an interactive way to increase the interaction and average session duration of the visitors. You can use these CSS Weather Icon, Widget, Designs in your next web based projects.

CSS Weather Icon, Widget, Designs

Following are the list of CSS Weather Icon, Widget, Designs.

Animated Weather Icons DEMO

  Animated Weather Icons

Based on dribbble shot https://dribbble.com/shots/2097042-Widget-Weather by kylor – By joshbader


Animated Weather Cards DEMO

  Animated Weather Cards

Seamless animation between states, and some of animations break outside the container. Select the weather icons on the top to see each state. – By ste-vg


Get Weather DEMO

  Get Weather

The Weather – By socrates



Weather Widget DEMO

  Weather Widget

Hey guys! This was a little pen I made just playing around with Open Weathers API! Decided to make a simple weather widget! Hope you guys like it! – By Jackthomsonn


Weather Widgets DEMO

  Weather Widgets

CSS only Weather Widgets Inspiration: http://drbl.in/olwj – By ajerez


CSS3 animated weather icons DEMO

  CSS3 animated weather icons

CSS3 animated weather icons Inspired by Mark Geyer’s [GIF] Weather at: http://dribbble.com/shots/1389791–GIF-Weather – By motorlatitude


Weather App DEMO

  Weather App

This is a weather application built with JavaScript as part of the Free Code Camp curriculum – By ayoisaiah


Authentic Weather Loader DEMO

  Authentic Weather Loader

Loading animation for the new Authentic Weather website ~ http://authenticweather.com – By tholman



Weather Dashboard by STUDIOJQ DEMO

  Weather Dashboard by STUDIOJQ

All credits to Jonathan Quntin STUDIOJQ i’m only the bored dude who coded it =) – By creme


simpleWeather.demo.js DEMO

  simpleWeather.demo.js

Sample usage for the simpleWeather plugin. http://simpleweatherjs.com – By fleeting


CSS-only Weather App Concept DEMO

  CSS-only Weather App Concept

Dribbble rework of an original shot by Sergey Valiukh. – By davidkpiano


Weather App DEMO

  Weather App

Weather application with jQuery, and javascript. – By Lunnaris


Weather App! DEMO

  Weather App!

Weather App using real data from Open Weather Map api! – By mattgreenberg


Local Weather App DEMO

  Local Weather App

Local Weather App for the Freecodecamp challenge. – By jdtadlock


Weather Widget DEMO

  Weather Widget

A small widget to show the current weather conditions and a three day forecast. – By peanav



Weather Popup/Widget DEMO

  Weather Popup/Widget

a weather popup/widget inspired from: https://dribbble.com/shots/636796-Weather-Pop-up – By cmd430


fcc-weather DEMO

  fcc-weather

– By huluoyang


Vue Weather Notifier DEMO

  Vue Weather Notifier

A little weather notifier app to show SVG animation and vuex with templates. The code is a little different in codepen, you can see it all how it would be set up for an app in this repo: https://github.com/sdras/vue-weather-notifier – By sdras


VueJS Weather Widget DEMO

  VueJS Weather Widget

Weather widget used Vue.js 2 and Yahoo Weather APIs – By robinhuy


Weather App DEMO

  Weather App

A simple weather app using simpleweather.js, for my freecodecamp project. All icons from http://ionicons.com – By imtoobose



AngularJS weather app DEMO

  AngularJS weather app

Simple AngularJS weather application that uses OpenWeather API. Further source at https://github.com/kvitsux/ang-weather – By kvitsux


Weather App, built with jQuery and Yahoo Weather API (4 color schemes) รขยญย DEMO

  Weather App, built with jQuery and Yahoo Weather API (4 color schemes) รขยญย

Hello, This is my Weather Application for freeCodeCamp Portfolio. The Default Location is set to London but you can change it in the settings menu! It was built with jQuery and the Weather API from Yahoo to retrieve the data in a JSON format. – By tns301


Weather App DEMO

  Weather App

Created for a FreeCodeCamp project and as part of my #100DaysOfCode challenge. This app uses the Wunderground API and the set of pure CSS weather icons I created, which can be found here: https://codepen.io/tiffanyadu/pen/OprNrV – By tiffanyadu


Local Weather DEMO

  Local Weather

FreeCodeCamp: Local Weather App – By rubenribeiro


simpleWeather.geolocation.js DEMO

  simpleWeather.geolocation.js

Full docs at http://simpleweatherjs.com – By fleeting


City Widget DEMO

  City Widget

Original design from dribbble: http://drbl.in/jGgT Uses weather API to grab weather info. Nav buttons are also functional. – By drehimself


Weather Demo DEMO

  Weather Demo

Quick weather demo using the awesome SimpleWeather.js plugin. http://simpleweatherjs.com/ – By ehermanson



Show Weather powered by Dark Sky Forecast API DEMO

  Show Weather powered by Dark Sky Forecast API

Shows current weather in your area. – By Womperdev


Photo Integrated Weather App DEMO

  Photo Integrated Weather App

Detects your location based on IP address, queries the weather and returns the weather report with a random nearby image matching the current weather tag. – By AdventureBear


Flat Weather Notice Cards DEMO

  Flat Weather Notice Cards

Pure CSS3 and HTML5 animated weather notice cards. Original art by Fabrizio Bianchi. – By EvanWieland


Responsive Weather Widget DEMO

  Responsive Weather Widget

A demo of how the weather widgets generated at WeatherWidget.io automatically respond to fill their container. – By weatherwidget


Local Weather App DEMO

  Local Weather App

Local weather app created for freeCodeCamp. – By thalpha



Weather Widget DEMO

  Weather Widget

A simple current weather widget and current time and date feature. Designed inspired by EZ Weather App Skin. – By ChynoDeluxe


Local Weather App – FCC DEMO

  Local Weather App - FCC

It shows current local weather based on latitude and longitude. It informs current temperature, weather, wind speed and so on…….. – By rameshsyn


Weather widget DEMO

  Weather widget

Starting from a still image as inspiration http://dribbble.com/shots/1145537-Plug-In1 i combined it with http://openweathermap.org/ free api – By eltonkamami


Yet Another Weather Widget DEMO

  Yet Another Weather Widget

Free Code Camp’s “Show the Local Weather” project. Any comments or suggestions much appreciated! – By aliceinninaland


Weather Pane DEMO

  Weather Pane

A panel to show the weather in a specific area. Design based on this Dribbble shot [https://dribbble.com/shots/1081917-WhereTO-App] from Tiberiu Neamu. – By chrishutchinson


Weather App [FreeCodeCamp] DEMO

  Weather App [FreeCodeCamp]

This pen is a simple weather app designed for the freecodecamp.com project “Show the Local Weather”. It utilizes the OpenWeatherMap API. – By JayV30


Show the Local Weather DEMO

  Show the Local Weather

Note: Probably won’t work if you’re using a VPN. Refactored and improved. Geolocation is faster and more accurate. Updated with the latest version of Weather Icons. Wind direction is now perfect to the degree. – By denmch



Local Weather App DEMO

  Local Weather App

freecodeCamp project – Shows the the weather of the current user. – By tiagovalverde


FCC: Local Weather App DEMO

  FCC: Local Weather App

FCC challenge: http://www.freecodecamp.com/challenges/show-the-local-weather Fetches local IP & weather data via – By cfleschhut


Circular Calendar Display DEMO

  Circular Calendar Display

A circular calendar and clock display, with and added weather and daily activity widget mock-ups. – By mattjuggins


Local Weather App – openweather API DEMO

  Local Weather App - openweather API

Zipline Project at FreeCodeCamp – uses openweather.org API to retrieve weather data base on the users location – By wearegroot


Material Weather Widget with Moment.js DEMO

  Material Weather Widget with Moment.js

CodePen demo for: http://kyusuf.com/post/material-weather-widget-with-moment-js – By KenanYusuf



App Icon – Weather DEMO

  App Icon - Weather

App Icon – Weather – By nicolazj


Local Weather DEMO

  Local Weather

A pen that displays the local weather for the user, using these APIs and Libraries: Bootstrap, jQuery, Google Material Design Lite, OpenWeatherMap’s Current weather API, and Erik Flowers’ Weather Icons – By Damon-Myers


Weather App DEMO

  Weather App

A simple local weather app. – By akashvevo


Local Weather App v1.0 DEMO

  Local Weather App v1.0

Developed for the freeCodeCamp Intermediate Front-end Development Challenge: Show the Local Weather. Details: http://www.freecodecamp.com/challenges/show-the-local-weather – By TylerMoeller


Simple Weather App DEMO

  Simple Weather App

– By jasonchan


simpleWeather.minimum.js DEMO

  simpleWeather.minimum.js

Bare minimum example for simpleWeather. Full docs at http://simpleweatherjs.com – By fleeting


Minimalist Clock/Weather Widget DEMO

  Minimalist Clock/Weather Widget

Lost interest, may revisit eventually. Uses JS/css transforms to align the clock hands and weather api with angular for the current/local weather – By TyStelmach



AngularJS Weather App DEMO

  AngularJS Weather App

Uses Angular, Weather Icons and Open Weather Map API to create a simple weather card, initially based on user location, but can be over-ridden by the input below. – By nickmoreton


Weather Widget with CSS and SVG: Raining DEMO

  Weather Widget with CSS and SVG: Raining

Trying CSS animation for SVG clouds for weather widget – By nailaahmad


Weather card DEMO

  Weather card

A simplistic, minimalist weather card! – By thecodingaviator


Analog Weather App DEMO

  Analog Weather App

Re-created a dribbble by Max Shakurov in HTML/CSS. – By birjolaxew


Free Code Camp Weather App DEMO

  Free Code Camp Weather App

– By awalthefirst



Show Me The Weather DEMO

  Show Me The Weather

A weather widget written in vanilla JavaScript รขโ‚ฌโ€œ implemented as a traditional prototype class. It shows a weather condition icon, degrees in Celsius or Fahrenheit and the city location, using the Yahoo! Weather API. – By camlcase


Weather DEMO

  Weather

– By biancamihai


Weather Forecast DEMO

  Weather Forecast

Local Weather Forecast. Weather data for today and upcoming days is presented based on geographic IP address. Depending on the forecast temperature, the gradient will switch from warm to cold colors. The background image behind the gradient will change depending on the weather status (clear, clouds, rain) – By Tbgse


some weather icon svgs DEMO

  some weather icon svgs

– By n-sayenko


I Hope you liked Hand-picked list of CSS Weather Icon, Widget, Designs, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.