Designing A Flexible, Maintainable CSS Pie Chart With SVG — Smashing Magazine
Implementations usually involved either using an external image editor to create multiple images for multiple values of the pie chart, or large JavaScript frameworks designed for much more complex charts. Although the feat is not as impossible as it once was, there’s still no simple one-liner for it. However, in this article, Lea Verou will show you that there are many better, more maintainable wa
Single Element CSS Spinners
.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0
SpinKit
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg
Creative Loading Effects
YouTube Fill from left Fill from down Expanding box 3D Bar Bottom Pie Timer Centered Expanding Line Fill Sides Surrounding Borders Corner indicator Big Counter Filling Title Flat Top Bar Loading animations don't have to be restricted to a tiny indicator. Here is some inspiration for some creative loading effects.* *Note that not all browsers support animated pseudo-elements (last four effects).
Creative Loading Effects | Codrops
Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube. When loading something on a page, be it images or the next content, we don’t have to be restricted to a tiny loading indicator but we can get creative and big. So the idea is to indicate that something
ローディングアニメーション画像の替わりにカーソルを変更することについて
簡単なLightboxみたいなものを作っていたんですが、ローディング画像出すのがめんどくさくて「CSSのcursorでprogress出せばいいんじゃね」と思いました。 そうすればアニメーション画像読ませなくていいし、ちょっとだけ軽くなるんじゃね、とか。 まあ、少し考えて使うのはやめにしたんですが、その後にこんなツイートをしました。 「HTTP リクエストを減らすために、ローディングアイコンは cursor: progress で決まり！」とかあったらちょっと読みたい。 @ub_pnr https://twitter.com/ub_pnr/status/208021702406455297そしたら、Briccsで書かれてたと言われたので読んでみました。 乱暴にまとめると「くるくるするあれじゃなくてcursor: wait使えば？」みたいな内容です。 Bricss - Forget load
Progress Bar CSS: Tips for Stylish Implementation
Progress bars have become ubiquitous elements, gracing numerous interfaces with their presence. These bars serve the purpose of visually conveying the ongoing status of a particular procedure, be it the advancement of a download or the movement of files from one place to another. Regardless of whether your endeavor involves the development of a desktop software or a web-based application, there in
Loading spinner animation using CSS and WebKit
It’s hard to stifle a smile any time I get a glimpse of the future thanks to WebKit-based browsers like Safari and Chrome (and their mobile counterparts on iOS and Android devices). That happened today when I discovered a way to make an iPhone-style spinner without any images, just CSS. First attempt I have been working on a project that targets mobile WebKit browsers so it was natural to explore
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loaders.css
full css ball loader - Wifeo Webmaster Place
PURE CSS LOADER - Wifeo Webmaster Place
Simple loading animation
画像もFlashも無し！ スタイルシートでローディング時のスピナーを生成する -CSS load.net