Progress Bar

by Hm Ba

HTML

<script src="https://arlina-design.googlecode.com/svn/progressbar.js"></script>
<body>  
  <div class='post-body'>
    <h2 class='post-title'>قصة جحا والحمار</h2>        
    <p>اراد جحا ان يشتري حمارا فذهب الى السوق توقف عند حمار اعجبه،وقال لصاحبه بعد جدال على الثمن :
هذا كل ما معي الان فإما ان تبيعني الحمار او انصرف لحالي !! وأخيرا وافق الرجل ..</p>    
    <p>ومشى جحا يجر الحمار خلفه .. فرآه اثنان من الصوص ، فأتفقا على سرقة الحمار .تسلل أحدهما بخفة وفك الحبل من رقبة الحمار دون ان يشعر جحا بشىء .
وربط رقبته هو بالحبل . كل ذلك وجحا لا يشعر بما يجري .مشى اللص خلف جحا بينما اللص الاخر بالحمار .وكان المارة من الناس يرون ذلك ويتعجبون لهذا المنظر ، ويضحكون ..وجحا يتعجب في نفسه ويقول :لعل تعجبهم وضحكهم يرجع الى انهم معجبون بحماري !! ولما وصل جحا الى البيت التفت خلفه الى الحمار فرأى الرجل ، الحبل في رقبته !!  فتعجب من امره وقال له :
من انت ؟
فتوقف اللص باكيا وأخد يمسح دموعه
قائلا :
ياسيدي انا رجل جاهل أغضبت امي ..
قال جحا ثم ماذا ؟
قال اللص : فدعت آمي علي وطلبت من الله ان يمسخني حمار
فأستجآب الله دعاءها
ولما رأى اخي الكبير ذلك اراد ان يتخلص مني
فعرضني في السوق للبيع
وجئت اشتريني وببركتك وبفضولك
رجعت إنسانا كما كنت .. !!
وأخد اللص يقبل يد جحا داعيا شاكرا فصدقه جحا
وأطلقه بعد ان نصحه بأن يطيع امه ويطلب منها الصفح
والدعاء ..!!
وفي اليوم التالي توجه
جحا الى السوق
ليشتري حمارا
فرأى الحمار نفسه
فعرفه !!
واقترب جحا من الحمار وهمس في اذنه قائلا :
يظهر انك لم تسمع كلامي ،
واغضبت امك مرة ثانـــية ، والله لن اشتريك
ابدا … !!!</p>     
    <h2 class='post-title'>قصة حجا والحمار وابنه</h2>  
    <p>في يومٍ من الأيام كان جحا و ابنه يحزمون أمتعتهم إستعداداً للسفر إلى المدينة
المجاورة ، فركبا على ظهر الحمار لكي يبدأوا رحلتهم ...
وفي الطريق مروا على قريةٍ صغيرة فأخذ الناس ينظرون إليهم بنظراتٍ غريبة ويقولون
" أنظروا إلى هؤلاء القساه يركبون كلهما على ظهر الحمار ولا يرأفون به " ،
وعندما أوشكوا على الوصول إلى القرية الثانية نزل الأبن من فوق الحمار وسار على
قدميه لكي لا يقول عنهم أهل هذه القرية كما قيل لهم في القرية التي قبلها ،
فلما دخلوا القرية رآهم الناس فقالوا " أنظروا إلى هذا الأب...

CSS

body {
    background-color:#f9f9f9;
    font-size:16px
    color:#444;
}
.post-body h2{
    color:#e25633;
    text-align: center;
    font-family:Electrolize,ge_ss_tvbold;
}
.post-body {
    max-width:680px;
    margin:20px auto;
    border:10px solid #f0f0f0;
    padding:15px 20px;
    background-color:#fff;
    color:#68696B;
    text-align: right;
    font-family:Electrolize,ge_ss_threeregular;
}
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  -webkit-perspective: 12rem;
  -moz-perspective: 12rem;
  -ms-perspective: 12rem;
  -o-perspective: 12rem;
  perspective: 12rem;

  z-index: 2000;
  position: fixed;
  height: 6rem;
  width: 6rem;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 6rem;
  width: 6rem !important;
  line-height: 6rem;
  font-size: 2rem;
  border-radius: 50%;
  background: rgba(34, 153, 221, 0.8);
  color: #fff;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  text-align: center;

  -webkit-animation: pace-3d-spinner linear infinite 2s;
  -moz-animation: pace-3d-spinner linear infinite 2s;
  -ms-animation: pace-3d-spinner linear infinite 2s;
  -o-animation: pace-3d-spinner linear infinite 2s;
  animation: pace-3d-spinner linear infinite 2s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: block;
}

@-webkit-keyframes pace-3d-spinner {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}

@-moz-keyframes pace-3d-spinner {
  from {
    -moz-transform: rotateY(0deg);
  }
  to...